website/index.html

@@ -13,22 +13,18 @@
 <link rel="stylesheet" href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css" crossorigin="">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" crossorigin="">
 <style>
-  html, body, #map {
+  @media (hover: none) {
-    height: 100%;
+    .leaflet-tooltip-pane {
-    width: 100vw;
+      display: none;
+    }
   }
   body {
     margin: 0;
     padding: 0;
   }
-  body.dark {
+  html, body, #map {
-    filter: invert(1) hue-rotate(180deg) brightness(1.25);
+    height: 100%;
-  }
+    width: 100vw;
-  body.dark .dark-hidden {
-    display: none;
-  }
-  body:not(.dark) .dark-only {
-    display: none;
   }
   #header {
     background-color: #fff;
@@ -37,7 +33,7 @@
     display: flex;
     gap: 2ch;
     font-family: "Roboto", sans-serif;
-    padding: 0.75em;
+    padding: 0.5em 1em;
     position: absolute;
     top: 0;
     left: 0;
@@ -68,10 +64,22 @@
   .break {
     word-break: break-all;
   }
-  .leaflet-top {
+  .dark {
-    top: 4em;
+    filter: invert(1) hue-rotate(180deg) brightness(1.25);
   }
-  .leaflet-tooltip, .leaflet-popup-content {
+  .dark .leaflet-shadow-pane {
+    display: none;
+  }
+  .dark :is(.leaflet-tooltip, .leaflet-popup-content-wrapper, .leaflet-popup-tip) {
+    box-shadow: none;
+  }
+  .leaflet-top {
+    top: 3em;
+  }
+  .leaflet-tooltip-pane {
+    z-index: 750;
+  }
+  .leaflet-popup-content {
     font-family: "Roboto", sans-serif;
     font-size: 12px;
   }
@@ -83,27 +91,9 @@
   .leaflet-popup-content table {
     margin-top: 1em;
   }
-  body.dark .leaflet-shadow-pane {
-    display: none;
-  }
-  body.dark :is(.leaflet-tooltip, .leaflet-popup-content-wrapper, .leaflet-popup-tip) {
-    box-shadow: none;
-  }
-  @media (hover: none) {
-    .leaflet-tooltip-pane {
-      display: none;
-    }
-  }
 </style>
 <div id="header">
-  <div><a href="https://meshmap.net/" title="A nearly live map of Meshtastic nodes seen by the official Meshtastic MQTT server">MeshMap</a></div>
+  <div><a href="https://meshmap.net/" title="A nearly live map of Meshtastic nodes seen by the official Meshtastic MQTT server">MeshMap.net</a></div>
-  <div>
-    <span
-      onclick="window.localStorage.setItem('theme', document.body.classList.toggle('dark') ? 'dark' : 'light')"
-      style="cursor:pointer;"
-      title="Toggle dark mode"
-    ><i class="fa fa-moon-o fa-fw dark-hidden"></i><i class="fa fa-sun-o fa-fw dark-only"></i></span>
-  </div>
   <div><a href="https://meshtastic.org/">Meshtastic</a></div>
   <div><a href="https://github.com/brianshea2/meshmap.net">GitHub</a></div>
 </div>
@@ -175,11 +165,9 @@
     marker: false,
     moveToLocation: (_, s) => showNode(nodesBySearchString[s]),
   }))
-  // add zoom control
-  L.control.zoom({position: 'topright'}).addTo(map)
   // add geolocation control
   L.easyButton({
-    position: 'topright',
+    position: 'topleft',
     states: [
       {
         stateName: 'geolocation-button',
@@ -194,6 +182,34 @@
       },
     ],
   }).addTo(map)
+  // add theme control
+  L.easyButton({
+    position: 'topright',
+    states: [
+      {
+        stateName: 'theme-light',
+        title: 'Toggle dark mode',
+        icon: 'fa-sun-o',
+        onClick: btn => {
+          const dark = document.body.classList.toggle('dark')
+          window.localStorage.setItem('theme', dark ? 'dark' : 'light')
+          btn.state(dark ? 'theme-dark' : 'theme-light')
+        },
+      },
+      {
+        stateName: 'theme-dark',
+        title: 'Toggle dark mode',
+        icon: 'fa-moon-o',
+        onClick: btn => {
+          const dark = document.body.classList.toggle('dark')
+          window.localStorage.setItem('theme', dark ? 'dark' : 'light')
+          btn.state(dark ? 'theme-dark' : 'theme-light')
+        },
+      },
+    ],
+  }).state(document.body.classList.contains('dark') ? 'theme-dark' : 'theme-light').addTo(map)
+  // add zoom control
+  L.control.zoom({position: 'bottomleft'}).addTo(map)
   // track and store map position
   map.on('moveend', () => {
     const center = map.getCenter()
@@ -285,7 +301,7 @@
           </tbody></table>
         `
         L.polyline([position, markersByNode[neighborNum].getLatLng()], {weight: 4})
-          .bindTooltip(neighborContent, {sticky: true})
+          .bindTooltip(neighborContent, {sticky: true, opacity: 1.0})
           .on('click', () => showNode(neighborNum))
           .addTo(detailsLayer)
       })