Add a close button that always closes the right menu pages

Author: ianrenton

css/layout.css

@@ -29,6 +29,10 @@ button#bandsButton {
     top: 10.5em;
 }
 
+button#closeButton {
+    top: 13em;
+}
+
 button.slideOutButton i {
     padding: 0;
     margin: 0;

index.html

@@ -59,6 +59,7 @@
     <button id="displayButton" class="slideOutButton"><i class="fa-solid fa-display"></i></button>
     <button id="dataButton" class="slideOutButton"><i class="fa-solid fa-cloud-arrow-down"></i></button>
     <button id="bandsButton" class="slideOutButton"><i class="fa-solid fa-ruler-vertical textFlipHorizontal"></i></button>
+    <button id="closeButton" class="slideOutButton" style="display: none"><i class="fa-solid fa-xmark"></i></button>
 </div>
 <div id="map"></div>
 <div id="infoPanel" class="rightbox">
@@ -72,8 +73,8 @@ <h1><img src="img/favicon.svg" style="width: 40px; height: 40px; position: relat
             <li><a href="https://github.com/ianrenton/field-spotter/issues">Issue Tracker</a></li>
         </ul>
         <h3>Using the tool</h3>
-        <p>Spots from portable amateur radio activities such as POTA, SOTA &amp; WWFF are displayed on the map. Click a marker to view details such as activator, park/summit code, distance and how old
-            the spot is. Older spots appear faded out. When a location has multiple spots, click the marker to expand out the set of spots.</p>
+        <p style="margin-right: 2.5em;">Spots from portable amateur radio activities such as POTA, SOTA &amp; WWFF are displayed on the map. Click a marker to view details such as activator,
+            park/summit code, distance and how old the spot is. Older spots appear faded out. When a location has multiple spots, click the marker to expand out the set of spots.</p>
         <p>The <i class="fa-solid fa-filter"></i> button allows you to filter spots by program, mode and band.</p>
         <p>The <i class="fa-solid fa-display"></i> button allows you to configure display settings and extra features.</p>
         <p>The <i class="fa-solid fa-cloud-arrow-down"></i> button allows you to configure update rates and view API status.</p>

js/ui-funcs.js

@@ -24,6 +24,13 @@ function manageRightBoxes(toggle, hide1, hide2, hide3, hide4, callback) {
             showDelay = 600;
         }
 
+        if (! $(toggle).is(":visible")) {
+            setTimeout(function () {
+                $("#closeButton").show();
+            }, showDelay + 500);
+        } else {
+            $("#closeButton").hide();
+        }
         setTimeout(function () {
             $(toggle).toggle("slide", {direction: "right"}, 500, callback);
         }, showDelay);
@@ -42,6 +49,26 @@ function manageRightBoxes(toggle, hide1, hide2, hide3, hide4, callback) {
             $(hide4).hide();
         }
         $(toggle).toggle(0, callback);
+        if ($(toggle).is(":visible")) {
+            $("#closeButton").show();
+        } else {
+            $("#closeButton").hide();
+        }
+    }
+}
+
+// Close all right boxes
+function closeRightBoxes() {
+    let allBoxes = ["#infoPanel", "#filtersPanel", "#displayPanel", "#dataPanel", "#bandsPanel"];
+    for (let i = 0; i < allBoxes.length; i++) {
+        if (enableAnimation) {
+            if ($(allBoxes[i]).is(":visible")) {
+                $(allBoxes[i]).hide("slide", {direction: "right"}, 500);
+            }
+        } else {
+            $(allBoxes[i]).hide();
+        }
+        $("#closeButton").hide();
     }
 }
 
@@ -79,6 +106,9 @@ $("#bandsButton").click(function () {
         }
     });
 });
+$("#closeButton").click(function () {
+    closeRightBoxes();
+});
 
 // Manual update button
 $("#updateNow").click(function () {