Filter and Column buttons to expand panels and styling cleanup

public_html/index.html

@@ -214,8 +214,11 @@
 								</div> <!-- dump1090_infoblock -->
 
 								<div class="config_button_row">
-									<button class="accordion">Filters</button>
+									<button id="filter_button" class="config_button">Filters</button>
-										<div class="panel">
+									<button id="column_select_button" class="config_button">Select Columns</button>
+								</div>
+
+								<div id="filter_panel" class="panel">
 									<form id="altitude_filter_form">
 										<label><span class="infoBlockTitleText">Filter by Altitude:</span></label>
 										<input id="altitude_filter_min" name="minAltitude" type="text" class="altitudeFilterInput" maxlength="5">
@@ -240,16 +243,13 @@
 										<button id="aircraft_ident_filter_reset_button">Reset</button>
 									</form>
 								</div>
-									<button id="column_select">Select Columns</button>
-								</div>
 
-								<div id="column_select_window" class="hidden">
+								<div id="column_select_panel" class="panel">
-									<div id="column_select_close_box"></div>
-									<div id="column_select_header">Columns</div>
 										<div class="columnOptionSelectAllContainer">
 											<div class="columnSelectAllCheckbox" id="select_all_column_checkbox"></div>
 											<div class="columnOptionText">Select/Deselect All</div>
 										</div>
+										<div class="wrapper">
 											<div class="columnOptionContainer">
 												<div class="columnSelectCheckbox" id="icao_col_checkbox"></div>
 												<div class="columnOptionText">Icao</div>
@@ -331,6 +331,7 @@
 												<div class="columnOptionText">Photos</div>
 											</div>
 										</div>
+								</div>
 
 								<div id="planes_table_container">
 									<div id="planes_table">

public_html/script.js

@@ -320,25 +320,7 @@ function initialize() {
             customAltitudeColors = false;
         }
 
-        // Accordian display logic for additional config buttons
-        var acc = document.getElementsByClassName("accordion");
-        var i;
 
-        for (i = 0; i < acc.length; i++) {
-          acc[i].addEventListener("click", function() {
-            /* Toggle between adding and removing the "active" class,
-            to highlight the button that controls the panel */
-            this.classList.toggle("active");
-
-            /* Toggle between hiding and showing the active panel */
-            var panel = this.nextElementSibling;
-            if (panel.style.display === "block") {
-              panel.style.display = "none";
-            } else {
-              panel.style.display = "block";
-            }
-          });
-        }
 
         $("#altitude_filter_reset_button").click(onResetAltitudeFilter);
 
@@ -354,14 +336,6 @@ function initialize() {
         	$('#settings_infoblock').toggle();
         });
 
-        $('#column_select').on('click', function() {
-                $('#column_select_window').toggle();
-        });
-
-        $('#column_select_close_box').on('click', function() {
-                $('#column_select_window').hide();
-        });
-
         $('#settings_close').on('click', function() {
             $('#settings_infoblock').hide();
         });
@@ -416,6 +390,15 @@ function initialize() {
                 refreshDataSourceFilters();
         })
 
+        $('#column_select_button').on('click', function() {
+                $('#column_select_panel').toggle();
+        });
+
+
+        $('#filter_button').on('click', function() {
+                $('#filter_panel').toggle();
+        });
+
         // Event handlers for to column checkboxes
         checkbox_div_map.forEach(function (checkbox, div) {
                 $(div).on('click', function() {

public_html/style.css

@@ -55,48 +55,6 @@ html, body {
     overflow-x: scroll;
 }
 
-#column_select {
-    position: relative;
-    float: right;
-    background-color: #002F5D;
-    color: #FFFFFF;
-    width: 125px;
-}
-
-#column_select_window {
-    position: absolute;
-    right: 1px;
-    top: 80px;
-    width: 150px;
-    min-height: 180px;
-    background: #ffffff;
-    box-shadow: 4px 4px 10px #444444;
-    padding: 20px;
-    z-index: 9999;
-    display: none;
-}
-
-#column_select_header {
-    display: table;
-    background-color: #002F5D;
-    color: #ffffff;
-    font-size: smaller;
-    padding: 5px;
-    text-align: center;
-    width: 120px;
-}
-
-#column_select_close_box {
-    position: absolute;
-    right: 15px;
-    top: 21px;
-    background-image: url('images/close-settings.png');
-    background-size: cover;
-    width: 20px;
-    height: 20px;
-    cursor: pointer;
-}
-
 .columnOptionContainer {
     position: relative;
     display: table;
@@ -887,28 +845,36 @@ select.error, textarea.error, input.error {
     }
 }
 
-/* Style the buttons that are used to open and close the accordion panel */
+.config_button {
-.accordion {
     position: relative;
-    background-color: #002F5D;
+    background-color: #FEBC11;
-    color: #FFFFFF;
+    color: #002F5D;
     cursor: pointer;
     text-align: center;
     width: 125px;
 }
 
-.active, .accordion:hover, #column_select:hover {
+.config_button:hover {
     background-color: #abcad8;
 }
 
-  /* Style the accordion panel. Note: hidden by default */
+.config_button_row {
-.panel {
+    position: relative;
-    padding: 0 2px;
+    margin-top: 5px;
-    background-color: #E5F6FC;
+    padding: 3px 0 3px 0;
-    display: none;
+
-    overflow: hidden;
 }
 
-.config_button_row {
+.panel {
-      margin-top: 5px;
+    position: relative;
+    padding: 3px 3px 6px 3px;
+    display: none;
+    margin-bottom: 5px;
+    border: solid;
+    border-color: #002F5D;
 }
+
+.wrapper {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }