nate/weather
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Map tab: full-bleed map with floating glass controls (Apple Weather style)
Publish Container / publish (push) Successful in 2m58s
Details

Browse Source 
- Map fills everything between the top bar and bottom nav; no page scroll on this tab
- Floating round controls (layers, my location, full screen), readout chips top-left,
  layers sheet beside the controls, weather summary + radar timeline floating at the bottom
- Safe-area aware in full-screen mode; zoom buttons tucked away on touch devices

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Nate EmmertandClaude Sonnet 5.5 committed 2026-10-15 13:48:13 -04:00
1 parent 4f47d67a7e
commit 8252017417
4 files changed
+102 -60
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/public/index.html
+42 -43
View File
@@ -248,26 +248,37 @@
<div id="station-live" class="sl"></div>
</div>
<!-- ── TAB: MAP (full-bleed map, floating glass controls) ── -->
<div id="tab-unified-map" class="tab-panel hidden">
<div class="unified-map-wrap">
<!-- Map Controls -->
<div class="map-controls-header">
<div class="map-controls-row">
<label for="base-map-select" class="control-label">Base Map:</label>
<select id="base-map-select" class="map-select">
<div class="unified-map-shell">
<div id="unified-map" class="unified-map-container"></div>
<div class="map-overlay-readouts" id="map-overlay-readouts">
<span class="map-readout-chip" id="overlay-temp">Temp --</span>
<span class="map-readout-chip" id="overlay-aqi">AQI --</span>
<span class="map-readout-chip" id="overlay-sunmoon">Sun -- • Moon --</span>
</div>
<div class="map-hud" role="toolbar" aria-label="Map controls">
<button id="layer-menu-toggle" class="hud-btn" type="button" aria-expanded="false" aria-label="Map layers" title="Layers">
<svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M12 3 3 8l9 5 9-5-9-5Z" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/><path d="m3 12 9 5 9-5M3 16l9 5 9-5" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round" stroke-linecap="round"/></svg>
</button>
<button id="map-recenter-btn" class="hud-btn" type="button" aria-label="My location" title="My location">
<svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M21 3 3 10.5l7 2.5 2.5 7L21 3Z" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/></svg>
</button>
<button id="map-fullscreen-btn" class="hud-btn radar-fs-btn" type="button" aria-label="Full screen" title="Full screen">⛶</button>
</div>
<div id="layer-menu-panel" class="map-layer-menu-panel glass hidden" role="dialog" aria-label="Map layers">
<div class="lm-head"><b>Map</b><button type="button" id="layer-menu-close" class="lm-close" aria-label="Close layers">✕</button></div>
<label class="lm-style" for="base-map-select"><span>Style</span> <select id="base-map-select" class="map-select">
<option value="dark">Dark</option>
<option value="light">Light</option>
<option value="satellite">Satellite</option>
</select>
<button id="map-recenter-btn" class="map-recenter" type="button" title="Back to my location">📍 My location</button>
<button id="map-fullscreen-btn" class="radar-btn radar-fs-btn" title="Fullscreen">⛶</button>
</div>
<div class="map-layer-menu">
<button id="layer-menu-toggle" class="map-layer-menu-toggle" type="button" aria-expanded="false">Show Layer Menu</button>
<div id="layer-menu-panel" class="map-layer-menu-panel hidden">
<div class="map-layer-menu-title">Map Layers</div>
<div class="map-controls-toggle-grid">
</select></label>
<div class="map-layer-menu-title">Layers</div>
<div class="map-controls-toggle-grid">
<label class="toggle-control">
<span class="toggle-label">📡 Radar</span>
<span class="switch-toggle">
@@ -346,36 +357,10 @@
</span>
</label>
</div>
</div>
</div>
</div>
<!-- Main Map -->
<div class="unified-map-shell">
<div id="unified-map" class="unified-map-container"></div>
<div class="map-overlay-readouts" id="map-overlay-readouts">
<span class="map-readout-chip" id="overlay-temp">Temp --</span>
<span class="map-readout-chip" id="overlay-aqi">AQI --</span>
<span class="map-readout-chip" id="overlay-sunmoon">Sun -- • Moon --</span>
</div>
</div>
<!-- Radar/Satellite Timeline Controls -->
<div class="map-timeline-wrap hidden" id="timeline-controls">
<div class="radar-controls">
<button id="timeline-play" class="radar-btn play-btn" title="Play/Pause">▶</button>
<div class="radar-timeline" id="timeline-slider"></div>
<span id="timeline-timestamp" class="radar-ts">--</span>
</div>
<div class="radar-legend">
<span class="legend-label">Light</span>
<div class="legend-bar"></div>
<span class="legend-label">Heavy</span>
</div>
</div>
<!-- Data Panel -->
<div class="map-data-panel hidden" id="data-panel">
<div class="map-bottom">
<div class="map-data-panel glass hidden" id="data-panel">
<div class="panel-location">
<span id="panel-location-name">--</span>
</div>
@@ -401,6 +386,20 @@
<span id="panel-cloud">--</span>
</div>
</div>
</div>
<div class="map-timeline-wrap glass hidden" id="timeline-controls">
<div class="radar-controls">
<button id="timeline-play" class="radar-btn play-btn" title="Play/Pause">▶</button>
<div class="radar-timeline" id="timeline-slider"></div>
<span id="timeline-timestamp" class="radar-ts">--</span>
</div>
<div class="radar-legend">
<span class="legend-label">Light</span>
<div class="legend-bar"></div>
<span class="legend-label">Heavy</span>
</div>
</div>
</div>
</div>
</div>
</div>