stufffffffff

static/index.html

@@ -51,18 +51,22 @@
       }
 
       #banner {
-        grid-column-start: 1;
-        grid-column-end: 3;
+        grid-column: span 2;
         background-color: #ef4444;
         color: white;
         display: flex;
         align-items: center;
         justify-content: center;
+        height: 40px;
       }
 
       #banner.hidden {
         display: none;
       }
+      
+      #map, #sidebar {
+        grid-row: 2 / 3;
+      }
     </style>
   </head>
 
@@ -71,7 +75,7 @@
       style="
         display: grid;
         grid-template-columns: auto 300px;
-        grid-template-rows: 40px 1fr;
+        grid-template-rows: auto 1fr;
         height: 100vh;
       "
     >

static/js/main.js

@@ -85,6 +85,8 @@ protobuf.load("/schema.proto").then((root) => {
     document.getElementById("count-frontrunner").innerText = totals.frontrunner.toString()
   }
 
+  let bannerVisible = false
+
   async function reload() {
     const bin = await fetch("/api").then((r) => r.arrayBuffer());
     const { vehicles, info } = root
@@ -96,10 +98,17 @@ protobuf.load("/schema.proto").then((root) => {
 
     populateTotals(vehicles)
     if (vehicles.length == 0) {
-      document.getElementById("banner").classList.remove("hidden")
-      map.invalidateSize()
+      if (!bannerVisible) {
+        document.getElementById("banner").classList.remove("hidden")
+        bannerVisible = true
+        map.invalidateSize()
+      }
     } else {
-      document.getElementById("banner").classList.add("hidden")
+      if (bannerVisible) {
+        document.getElementById("banner").classList.add("hidden")
+        bannerVisible = false
+        map.invalidateSize()
+      }
     }
 
     // render vehicles on map