UI2.0 - LiveATC tab complete

css/ui2-light.css

@@ -413,7 +413,7 @@
 }
 
 #sidebar_close {
-    color: rgba(0,0,0,.7);
+    color: rgba(0, 0, 0, .7);
     cursor: pointer;
     position: fixed;
     right: 5px;
@@ -422,9 +422,9 @@
 
 #sidebar_open_button {
     background-color: rgba(255, 255, 255, 0.8);
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     border-bottom-left-radius: 4px;
     border-top-left-radius: 4px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     cursor: pointer;
     height: 25%;
     padding: 2px;
@@ -782,17 +782,46 @@ div#update_error {
 }
 
 div.atc_state {
-    background-color: #ffffffa6;
-    border: 1px solid black;
-    border-radius: 25px;
-    height: 20px;
-    margin: 4px;
-    padding: 4px;
-    padding-left: 10px;
-    text-decoration: none;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    padding: 5px;
+    margin: 5px;
+    width: 28%;
+    height: 50px;
+    float: left;
+    display: flex;
+    align-items:center;
+    justify-content:center;
 }
 
-#station_id, #station_name, #full_metar {
+.atc_state > b {
+    
+}
+
+div.atc_header {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    padding: 5px;
+    margin: 5px;
+    width: 44%;
+    display: inline-block;
+    height: 50px;
+    text-align: center;
+    line-height: 50px;
+}
+
+div.atc_header1 {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    padding: 5px;
+    margin: 5px;
+    width: 28%;
+    display: inline-block;
+    height: 50px;
+    text-align: center;
+    line-height: 50px;
+}
+
+#station_id,
+#station_name,
+#full_metar {
     text-align: center;
 }
 

gmap.html

@@ -256,10 +256,6 @@
         <div id="map_container">
             <div id="map_canvas"></div>
         </div>
-        <div id="popup" class="ol-popup">
-            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
-            <div id="popup-content"></div>
-        </div>
         <div id="sidebar_container">
             <div id="sidebar_close" onclick="closeSidebar()"><span class="material-icons">
                     close
@@ -612,7 +608,7 @@
             </div>
             <div id="atc_container" style="display: none">
                 <div id="atc_radio">
-                    <h4 id="atc_title">No feed selected</h4>
+                    <h4 id="atc_title"></h4>
                     <span id="atc_location" style="display: none;"></span><br id="atc_spacer" style="display: none;"><br
                         id="atc_spacer" style="display: none;">
                     <audio id="player">
@@ -622,14 +618,13 @@
                         onclick="playPause()" style="display: none;">
                         <i class="material-icons" id="audioControl_icon">pause</i>
                     </button>
-                    <hr>
                 </div>
 
                 <div id="atc_selector">
 
                 </div>
             </div>
-
+            
         </div>
         <!-- sidebar_container -->
 

js/liveatc.js

@@ -93,13 +93,13 @@ function selectState(state) {
     document.getElementById("atc_selector").innerHTML = ""
     var node = document.createElement("div")
     node.setAttribute("id", "atc_" + state)
-    node.setAttribute("class", "atc_state noselect pointer")
+    node.setAttribute("class", "atc_header noselect pointer")
     node.setAttribute("onmousedown", "listStations()")
     node.innerHTML = "<b>Go Back</b>"
     document.getElementById("atc_selector").appendChild(node)
     var node = document.createElement("div")
     node.setAttribute("id", "atc_" + state)
-    node.setAttribute("class", "atc_state noselect")
+    node.setAttribute("class", "atc_header noselect")
     node.setAttribute("onmousedown", "selectState('" + state + "')")
     node.innerHTML = "<b>" + state + "</b>"
     document.getElementById("atc_selector").appendChild(node)
@@ -136,18 +136,18 @@ function selectAirport(airport, state) {
     document.getElementById("atc_selector").innerHTML = ""
     var node = document.createElement("div")
     node.setAttribute("id", "atc_" + state)
-    node.setAttribute("class", "atc_state noselect pointer")
+    node.setAttribute("class", "atc_header1 noselect pointer")
     node.setAttribute("onmousedown", "selectState('" + state + "')")
     node.innerHTML = "<b>Go Back</b>"
     document.getElementById("atc_selector").appendChild(node)
     var node = document.createElement("div")
     node.setAttribute("id", "atc_" + state)
-    node.setAttribute("class", "atc_state noselect")
+    node.setAttribute("class", "atc_header1 noselect")
     node.innerHTML = "<b>" + state + "</b>"
     document.getElementById("atc_selector").appendChild(node)
     var node = document.createElement("div")
     node.setAttribute("id", "atc_" + airport)
-    node.setAttribute("class", "atc_state noselect")
+    node.setAttribute("class", "atc_header1 noselect")
     node.innerHTML = "<b id='atc_airport_code'>" + airport + "</b>"
     document.getElementById("atc_selector").appendChild(node)
     var node = document.createElement("hr")
@@ -175,7 +175,7 @@ function selectAirport(airport, state) {
     })
 }
 
-//DEPRACATED - NOT USED - GENERATES FILE
+//DEPRECATED - NOT USED - GENERATES FILE
 function startPulling() {
     var json = {}
 

js/script2.js

@@ -16,6 +16,9 @@ function openRadar() {
     document.getElementById("atc_container").style.display = "none"
     TAB = "RADAR"
     document.getElementById("sidebar_close").style.color = "rgba(0,0,0,.7)"
+    if (lastMETAR === 1) {
+        StaticFeatures.removeAt(0)
+    }
 }
 
 function openATC() {
@@ -26,6 +29,9 @@ function openATC() {
     TAB = "ATC"
     listStations()
     document.getElementById("sidebar_close").style.color = "rgba(0,0,0,.7)"
+    if (lastMETAR === 1) {
+        StaticFeatures.removeAt(0)
+    }
 }
 
 function readBatteryLevel() {