Fixed positioning of footer bar on empty course list; updated import-export UI and added auto-close for popups

css/popup.css

@@ -85,8 +85,9 @@ i {
 }
 
 .settings {
-    position: relative;
+    position: absolute;
-    float: right;
+    bottom: 0px;
+    right: 0px;
     display: flex;
     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);
@@ -245,6 +246,18 @@ input[type=number]::-webkit-outer-spin-button {
     width: 120px;
 }
 
+#import-export-popup {
+    background: white;
+    color: #747474;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+    position: absolute;
+    margin: auto;
+    bottom: 42px;
+    right: 10px;
+    border-radius: inherit;
+    width: 160px;
+}
+
 .flex-container {
     display: flex;
     flex-direction: column;
@@ -316,6 +329,37 @@ input[type=number]::-webkit-outer-spin-button {
     margin: 8px 0px;
 }
 
+.simple-menu-option {
+    display: inline-block;
+    color: rgba(0, 0, 45, 0.48);
+    border: none;
+    font-size: 17px;
+    overflow: hidden;
+    vertical-align: middle;
+    text-align: left;
+    padding: 10px 0px 5px 5px;
+    border-radius: 7px;
+}
+
+.simple-menu-option i {
+    font-size: 19px;
+    vertical-align: middle;
+    margin-top: 0px;
+    margin-left: 0px;
+    margin-right: 3px;
+    margin-bottom: 3px;
+}
+
+.simple-menu-option:hover {
+    background-color: rgba(177, 175, 175, 0.324);
+    -webkit-transition-duration: 0.4s; /* Safari */
+    transition-duration: 0.4s;
+}
+
+.simple-menu-option:focus {
+    outline: none;
+}
+
 .hide {
     display: none !important;
 }

js/popup.js

@@ -126,6 +126,7 @@ $(document).ready(function () {
 	}).on('mouseleave', '.copybut', function () {
 		$(this).removeClass('shadow');
 	});
+
 	$("#courseList").on('click', '.copybut', function (e) {
 		e.stopPropagation();
 		var temp = $("<input>");
@@ -147,6 +148,7 @@ $(document).ready(function () {
 		document.execCommand("copy");
 		temp.remove();
 	});
+
 	$("#courseList").on('click', 'li', function () {
 		$(this).find("#listMoreInfo").click(function () {
 			window.open(courses[$(this).closest("li").attr("id")].link);
@@ -214,49 +216,58 @@ $(document).ready(function () {
 			$(this).find('#arrow').css('transform', '');
 		}
 	});
+
 	$("#clear").click(function () {
 		clear();
 	});
+
 	$("#schedule").click(function () {
 		chrome.tabs.create({
 			'url': 'https://registrar.utexas.edu/schedules'
 		});
 	});
+
 	$("#impexp").click(function () {
+		// Close import export window
 		if ($("#impexp>i").text() == 'close') {
-			$('#import').hide();
+			hideImportExportPopup();
-			$('#export').hide();
-			$("#impexp>i").text('import_export');
 			// $(this).removeClass('selected');
 		} else {
-			$("#impexp>i").text('close');
+			// Open import export window
-			$('#import').show();
+			
+			// If search window open, close it first to prevent overlap
+			if ($("#search>i").text() == 'close') {
+				hideSearchPopup();
+			}
+			
+			showImportExportPopup();
 			// $(this).addClass('selected');
-			$('#export').show();
 		}
 	});
+
 	$("#search").click(function () {
+		// Close search window
 		if ($("#search>i").text() == 'close') {
-			$("#search>i").text('search');
+			hideSearchPopup();
-			$("#class_id_input").hide();
-			$("#semcon").hide();
-			$("#semesters").hide();
-			$("#search-popup").addClass('hide');
 			// $(this).removeClass('selected');
 		} else {
-			$("#search>i").text('close');
+			// Open search window
-			$("#class_id_input").show();
+
-			$("#semesters").show();
+			// If import export window open, close it first to prevent overlap
-			$("#semcon").show();
+			if ($("#impexp>i").text() == 'close') {
-			$('#class_id_input').focus();
+				hideImportExportPopup();
-			$("#search-popup").removeClass('hide');
+			}
+			
+			showSearchPopup();
 			// $(this).addClass('selected');
 		}
 	});
-	$('#import').click(function () {
+
+	$('#import-class').click(function () {
 		$("#importOrig").click();
 	});
-	$('#export').click(function () {
+
+	$('#export-class').click(function () {
 		chrome.storage.sync.get('savedCourses', function (data) {
 			if (data.savedCourses.length > 0) {
 				var exportlink = document.createElement('a');
@@ -296,6 +307,7 @@ $(document).ready(function () {
 			'url': "calendar.html"
 		});
 	});
+
 });
 
 $("#importOrig").change(function (e) {
@@ -526,11 +538,38 @@ function getDtarr(object) {
 	return dtarr;
 }
 
-/*Convert time to 24hour format*/
+/* Convert time to 24hour format */
 function convertTime(time) {
 	var converted = time.replace(/\./g, '').split("-");
 	for (var i = 0; i < 2; i++) {
 		converted[i] = moment(converted[i], ["h:mm A"]).format("HH:mm");
 	}
 	return converted;
+}
+
+function hideSearchPopup() {
+	$("#search>i").text('search');
+	$("#class_id_input").hide();
+	$("#semcon").hide();
+	$("#semesters").hide();
+	$("#search-popup").addClass('hide');
+}
+
+function showSearchPopup() {
+	$("#search>i").text('close');
+	$("#class_id_input").show();
+	$("#semesters").show();
+	$("#semcon").show();
+	$('#class_id_input').focus();
+	$("#search-popup").removeClass('hide');
+}
+
+function hideImportExportPopup() {
+	$("#import-export-popup").addClass('hide');
+	$("#impexp>i").text('import_export');
+}
+
+function showImportExportPopup() {
+	$("#impexp>i").text('close');
+	$("#import-export-popup").removeClass('hide');
 }

popup.html

@@ -55,27 +55,25 @@
       </div>
 
       <button id="search-class" class="matbut">Search</button>
-
     </div>
 
-    <button title='Export' style="background-color:white; display:none;" class="settingsbut" id='export'>
-      <i style='color:#FF0000' class="material-icons">
-        arrow_downward
-      </i>
-    </button>
-
-    <button title='Import' style="background-color:white; display:none;" class="settingsbut" id='import'>
-      <i style='color:#FF0000' ; class="material-icons">
-        arrow_upward
-      </i>
-    </button>
-
     <button title='Import/Export' style="background-color:white;" class="settingsbut" id='impexp'>
       <i style='color:#FF9800' class="material-icons">
         import_export
       </i>
     </button>
 
+    <div id="import-export-popup" class="hide">
+      <div class="flex-container">
+        <button id="import-class" class="simple-menu-option">
+          <i class="material-icons">file_upload</i>Import Classes
+        </button>
+        <button id="export-class" class="simple-menu-option">
+          <i class="material-icons">file_download</i>Export Classes
+        </button>
+      </div>
+    </div>
+
     <button title='Options' style="background-color:white; margin-right: 0px;" class="settingsbut" id='open'>
       <i style='color:#FF9800' class="material-icons">
         settings