Merge pull request #11 from tadakda/master

Popup autocloses if user clicks outside the element. Cleaned up some styling.

css/popup.css

@@ -25,6 +25,29 @@ body {
     min-height: 400px;
 }
 
+#courseList {
+    list-style-type: none;
+    padding: 5px;
+}
+
+#empty {
+    font-weight: normal;
+    font-size: large;
+    margin: 60px 30px 180px 30px;
+    text-align: center;
+}
+
+#empty #main {
+    margin-bottom: 5px;
+}
+
+#empty span {
+    font-size: small;
+    display: table;
+    margin: 0 auto;
+    font-weight: bold;
+}
+
 .settingsbut {
     margin-right: 2px;
     border: 0px;
@@ -85,10 +108,9 @@ i {
 }
 
 .settings {
-    position: absolute;
+    position: relative;
-    bottom: 0px;
-    right: 0px;
     display: flex;
+    float: right;
     vertical-align: middle;
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
     transition: 0.3s;
@@ -358,7 +380,7 @@ input[type=number]::-webkit-outer-spin-button {
 .simple-menu-option:hover {
     background-color: rgba(177, 175, 175, 0.200);
     transition-duration: 0.4s;
-    color: #FF9800;
+    /* color: #FF9800; */
 }
 
 .simple-menu-option:focus {

js/popup.js

@@ -2,8 +2,8 @@ var courses;
 
 setCourseList();
 getSemesters();
-var can_remove = true;
 
+var can_remove = true;
 
 function setCourseList() {
 	$("#courseList").empty()
@@ -79,6 +79,19 @@ function formatShortenedCourseName(course) {
 	return `${department} ${number} (${course.unique})`;
 }
 
+$(document).click(function(event) {
+	$target = $(event.target);
+	
+	// If we're not clicking on search button or search popup, and popup is visible, hide it
+	if (!$target.closest('#search').length && !$target.closest('#search-popup').length && $('#search-popup').is(":visible")) {
+		hideSearchPopup();
+	}
+
+	// If we're not clicking on import/export button or imp/exp popup, and popup is visible, hide it
+	if (!$target.closest('#impexp').length && !$target.closest('#import-export-popup').length && $('#import-export-popup').is(":visible")) {
+		hideImportExportPopup();
+	}
+});
 
 $("#clear").click(function () {
 	chrome.storage.sync.set({

popup.html

@@ -18,13 +18,13 @@
   </div>
 
   <div>
-    <ul id="courseList" style="list-style-type: none;padding: 5px;"></ul>
+    <ul id="courseList"></ul>
-    <h2 id="empty" style="font-weight: normal;font-size: large;margin: 60px 30px 40px 30px ;text-align: center">
+    <h2 id="empty">
-      <div id="main" style="margin-bottom: 5px;">Doesn't Look Like
+      <div id="main">Doesn't Look Like
         Anything
         To Me.
       </div>
-      <span style="font-size: small;display:table;margin:0 auto;font-weight: bold">(No Courses Saved)</span>
+      <span>(No Courses Saved)</span>
     </h2>
   </div>