From 8ca5ca9bc1de90d9a4ae46dfe5ae16c6c2d12915 Mon Sep 17 00:00:00 2001 From: Roman Priesol Date: Wed, 9 Sep 2026 09:11:52 +0200 Subject: [PATCH] Add an offline-data status dot to the topbar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Small green/gray indicator reusing the existing /api/offline-tiles check, showing at a glance whether this server has offline map data. Closes out the top banner TODO item — DEM elevation and a hamburger menu are intentionally left out (no DEM layer yet, and the sidebar isn't mobile-collapsed). --- TODO.adoc | 2 +- public/css/style.css | 12 ++++++++++++ public/js/map.js | 4 ++++ views/index.erb | 1 + 4 files changed, 18 insertions(+), 1 deletion(-) diff --git a/TODO.adoc b/TODO.adoc index 7cf4633..a13c552 100644 --- a/TODO.adoc +++ b/TODO.adoc @@ -20,7 +20,7 @@ independence from connectivity. * [ ] Map Park4Night/OSM place types to NPS pictograms (campground, primitive camp, drinking water, dump station, viewpoint, picnic table) for instant recognition without reading text * [ ] Restyle popovers, side panels, and point detail views after the NPS Unigrid layout system (Massimo Vignelli) with Frutiger/Rawlinson Roadside-style typography -** [ ] Top black banner (full width): NPS-style logo + "MAPTOOL" on the left, location telemetry (DMS/DD coordinates, DEM elevation) in the center, hamburger menu + offline-data status on the right, white sans-serif type +** [x] Top black banner (full width): "MAPTOOL" on the left, live map-center coordinates in the center, offline-data status dot on the right, white sans-serif type — DEM elevation and a hamburger menu skipped (no DEM layer yet; sidebar isn't mobile-collapsed, so nothing for a hamburger to reveal) ** [ ] Point detail/sidepanel: black header banner with white location name and an NPS pictogram in the corner; amenities (water, waste, power, slope) shown as a pictogram grid, no extra text; action buttons for "route here" (Valhalla), "start leveling", "save offline" ** [x] Filter panel as a "Unigrid Matrix" — an icon grid to toggle categories on/off, styled like the legend on an official NPS paper map, instead of plain dropdowns * [ ] Custom vector style (MVT/MapLibre) using the NPS color palette — muted natural tones for forests, water, and contours — so POIs and routes stand out at high zoom diff --git a/public/css/style.css b/public/css/style.css index 9e76b6f..a9b265d 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -34,6 +34,18 @@ html, body { color: #bbb; } +.topbar__offline-status { + width: 8px; + height: 8px; + border-radius: 50%; + background: #666; + flex-shrink: 0; +} + +.topbar__offline-status--ready { + background: #2a9d8f; +} + .topbar__auth { margin-left: auto; display: flex; diff --git a/public/js/map.js b/public/js/map.js index 37b7f95..3db20c0 100644 --- a/public/js/map.js +++ b/public/js/map.js @@ -442,6 +442,7 @@ function applyStyle(name) { // the Online/Offline switch itself doesn't make sense (there's nothing to // switch to), so it's removed entirely rather than left sitting there // offering a choice that can't work. +const offlineStatus = document.querySelector(".topbar__offline-status"); fetch("/api/offline-tiles") .then((response) => response.json()) .then(({ available }) => { @@ -451,6 +452,9 @@ fetch("/api/offline-tiles") layerToggle.remove(); map.removeControl(mapLayersButton); } + offlineStatus.hidden = false; + offlineStatus.classList.toggle("topbar__offline-status--ready", available); + offlineStatus.title = available ? "Offline map data ready" : "No offline map data on this server"; }) .catch(() => { // Backend check failed; keep the online style and leave the switch as diff --git a/views/index.erb b/views/index.erb index 3771293..272e64b 100644 --- a/views/index.erb +++ b/views/index.erb @@ -2,6 +2,7 @@
MapTool +
<% if logged_in %> <%= user %>