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

Fix persistent bottom nav by moving tabs outside sticky header

Browse Source
This commit is contained in:
Nate committed 2026-03-16 14:38:36 -04:00
1 parent cd45f0bf5e
commit 1786bc8985
2 files changed
+34 -22
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/public/index.html
+23 -22
View File
@@ -22,28 +22,6 @@
<header class="masthead">
<h1>Weather</h1>
<nav class="tabs">
<button class="tab active" data-tab="conditions" aria-label="Conditions">
<span class="tab-icon" aria-hidden="true">🌤</span>
<span class="tab-text">Now</span>
</button>
<button class="tab" data-tab="radar-full" aria-label="Radar">
<span class="tab-icon" aria-hidden="true">🛰</span>
<span class="tab-text">Radar</span>
</button>
<button class="tab" data-tab="maps" aria-label="Maps">
<span class="tab-icon" aria-hidden="true">🗺</span>
<span class="tab-text">Maps</span>
</button>
<button class="tab" data-tab="alerts" aria-label="Alerts">
<span class="tab-icon" aria-hidden="true">⚠️</span>
<span class="tab-text">Alerts</span>
</button>
<button class="tab" data-tab="settings" aria-label="Settings">
<span class="tab-icon" aria-hidden="true">⚙️</span>
<span class="tab-text">Settings</span>
</button>
</nav>
<span class="tagline">Open-Meteo · RainViewer</span>
</header>
@@ -290,6 +268,29 @@
</div>
</div>
<nav class="tabs" aria-label="Primary navigation">
<button class="tab active" data-tab="conditions" aria-label="Conditions">
<span class="tab-icon" aria-hidden="true">🌤</span>
<span class="tab-text">Now</span>
</button>
<button class="tab" data-tab="radar-full" aria-label="Radar">
<span class="tab-icon" aria-hidden="true">🛰</span>
<span class="tab-text">Radar</span>
</button>
<button class="tab" data-tab="maps" aria-label="Maps">
<span class="tab-icon" aria-hidden="true">🗺</span>
<span class="tab-text">Maps</span>
</button>
<button class="tab" data-tab="alerts" aria-label="Alerts">
<span class="tab-icon" aria-hidden="true">⚠️</span>
<span class="tab-text">Alerts</span>
</button>
<button class="tab" data-tab="settings" aria-label="Settings">
<span class="tab-icon" aria-hidden="true">⚙️</span>
<span class="tab-text">Settings</span>
</button>
</nav>
</div><!-- .app -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
app/public/style.css
+11
View File
@@ -105,6 +105,8 @@ a:hover { text-decoration: underline; }
left: 0;
right: 0;
bottom: 0;
width: 100vw;
max-width: 100vw;
z-index: 300;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
@@ -115,6 +117,13 @@ a:hover { text-decoration: underline; }
border-top: 1px solid rgba(121, 165, 191, 0.36);
}
@supports (bottom: env(safe-area-inset-bottom)) {
.tabs {
bottom: 0;
padding-bottom: calc(0.45rem + env(safe-area-inset-bottom));
}
}
.tab {
border: none;
border-radius: 12px;
@@ -791,6 +800,8 @@ body.high-contrast {
left: 0;
right: 0;
bottom: 0;
width: 100vw;
max-width: 100vw;
z-index: 300;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));