From f994ebdb267b4fcf5390bf723492b1aeb7e41ff4 Mon Sep 17 00:00:00 2001
From: Nicholas Pease <me@nicholaspease.com>
Date: Wed, 31 Jan 2024 04:53:15 +0000
Subject: [PATCH] Display fixes for mobile, fixes sidebar closing

---
 simplepwa/index.html | 64 ++++++++++++++++++++++----------------------
 simplepwa/main.js    |  3 +++
 simplepwa/style.css  |  5 ++--
 3 files changed, 38 insertions(+), 34 deletions(-)
diff --git a/simplepwa/index.html b/simplepwa/index.html
index 598873a..02c1607 100644
--- a/simplepwa/index.html
+++ b/simplepwa/index.html
@@ -40,9 +40,35 @@
     <script defer src="./main.js"></script>
   </head>
   <body onload="onload()">
-  <div id="sidebar" style="display: none">
+    <div id="header" style="left: 210px;display: none">
+      <div id="header_nav">
+        <button class="mdl-button mdl-js-button mdl-button--raised" onclick="main()">tar1090</button>
+        <button class="mdl-button mdl-js-button mdl-button--raised" onclick="window.location.href = 'shortcuts://run-shortcut?name=OpenADSBWebLaunch'">OpenADSB</button>
+        <button class="mdl-button mdl-js-button mdl-button--raised" onclick="ATC()" id="ATC_Button">LiveATC</button>
+        <button class="mdl-button mdl-js-button mdl-button--raised" onclick="settings()">Settings</button>
+      </div>
+      <div id="header_atc">
+       <table>
+        <tr>
+          <td> 
+            <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab" id="ATC_Pause_Play" onmouseup="pausePlay()">
+              <i class="material-icons" id="ATC_Pause_Play_Icon">stop</i>
+            </button>
+          </td>
+          <td>
+            <span id="audioControl_CurrentFeedName">No Feed Loaded</span><br>
+            <span id="audioControl_CurrentFeedStatus" style="color:red;">•</span><span id="audioControl_CurrentFeedStatusText">Disconnected</span> <span id="audioControl_CurrentFeedTimeFormatting">(<span id="audioControl_CurrentFeedTime">00:00:00</span>)</span>
+            <audio id="player">
+              <source type="audio/mpeg">
+            </audio>
+          </td>
+        </tr>
+       </table>
+      </div>
+    </div>
+    <div id="sidebar" style="display: none">
     <div>
-      <span onclick="main()"><i class="material-icons" style="font-size: 30px;margin: 15px;" onmouseup="main()">arrow_back_ios_new</i></span>
+      <span id="sidebar_back_button"><i class="material-icons" style="font-size: 30px;margin: 15px;z-index: 5;" >arrow_back_ios_new</i></span>
       <span style="font-size:30px;font-weight: bold;margin: 15px;">Aircraft Radio</span>
       <span style="font-size: 14px;margin: auto;">Powered By LiveATC</span>
     </div>
@@ -54,36 +80,10 @@
         
       </ul>
     </div>
-  </div>
-	<div id="loading" style="display: block">
-		<img id="loading_icon" src="images/loading.gif">
-		<br>Connecting to Aviation Assistant<br>Please Wait.
-	</div>
-    <div id="header" style="left: 210px;display: none">
-            <div id="header_nav">
-              <button class="mdl-button mdl-js-button mdl-button--raised" onclick="main()">tar1090</button>
-              <button class="mdl-button mdl-js-button mdl-button--raised" onclick="window.location.href = 'shortcuts://run-shortcut?name=OpenADSBWebLaunch'">OpenADSB</button>
-              <button class="mdl-button mdl-js-button mdl-button--raised" onclick="ATC()" id="ATC_Button">LiveATC</button>
-              <button class="mdl-button mdl-js-button mdl-button--raised" onclick="settings()">Settings</button>
-            </div>
-            <div id="header_atc">
-             <table>
-              <tr>
-                <td> 
-                  <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab" id="ATC_Pause_Play" onmouseup="pausePlay()">
-                    <i class="material-icons" id="ATC_Pause_Play_Icon">stop</i>
-                  </button>
-                </td>
-                <td>
-                  <span id="audioControl_CurrentFeedName">No Feed Loaded</span><br>
-                  <span id="audioControl_CurrentFeedStatus" style="color:red;">•</span><span id="audioControl_CurrentFeedStatusText">Disconnected</span> <span id="audioControl_CurrentFeedTimeFormatting">(<span id="audioControl_CurrentFeedTime">00:00:00</span>)</span>
-                  <audio id="player">
-                    <source type="audio/mpeg">
-                  </audio>
-                </td>
-              </tr>
-             </table>
-            </div>
+    </div>
+    <div id="loading" style="display: block">
+      <img id="loading_icon" src="images/loading.gif">
+      <br>Connecting to Aviation Assistant<br>Please Wait.
     </div>
     <div id="main_tab" style="display: none">
       <iframe src="https://aa.local/tar1090"></iframe>
diff --git a/simplepwa/main.js b/simplepwa/main.js
index a717fde..88363c9 100644
--- a/simplepwa/main.js
+++ b/simplepwa/main.js
@@ -80,6 +80,9 @@ function ATC() {
 }
 
 function onload() { 
+    document.getElementById("sidebar_back_button").addEventListener("click", function () {
+        main()
+    });
     var xhr = new XMLHttpRequest();
     xhr.open("GET", "https://aa.local:5000/alive?_="+Date.now(), true);
     xhr.setRequestHeader('Content-Type', 'application/json');
diff --git a/simplepwa/style.css b/simplepwa/style.css
index 84ec28b..e95dff0 100644
--- a/simplepwa/style.css
+++ b/simplepwa/style.css
@@ -123,7 +123,7 @@ body {
 #header_atc {
   display: inline-block;
   position: relative;
-  left: 30px;
+  left: 5px;
   background-color: rgba(255, 255, 255, 0.8);
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   border-radius: 8px;
@@ -164,7 +164,7 @@ body {
 
 #sidebar {
   position: absolute;
-  top: 15px;
+  top: 10px;
   left: calc(100% - 475px);
   height: calc(100% - 30px);
   width: 450px;
@@ -174,6 +174,7 @@ body {
   line-height: 30px;
   display: flex;
   flex-direction: column;
+  z-index: 2;
 }
 
 .ATC_State {
