From 40b685e6d0315e30bee25d08e6a49fa5973b85c6 Mon Sep 17 00:00:00 2001 From: Ryan Chen Date: Fri, 28 Aug 2026 10:52:21 -0400 Subject: [PATCH] Add mobile-friendly tab layout with bottom nav Three-panel desktop layout becomes a tab-based single-panel view on mobile with Rides/Map/Details bottom nav. Tapping a ride auto-navigates to the map. Co-Authored-By: Claude Sonnet 4.6 --- static/index.html | 72 ++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 71 insertions(+), 1 deletion(-) diff --git a/static/index.html b/static/index.html index 431aae8..4d9e30a 100644 --- a/static/index.html +++ b/static/index.html @@ -2,7 +2,7 @@ - + bikeslop @@ -143,6 +143,50 @@ .blinking { display: inline-block; width: 2px; height: 12px; background: var(--accent); animation: blink 0.8s step-end infinite; margin-left: 2px; vertical-align: middle; } @keyframes blink { 50% { opacity: 0; } } .no-ride-msg { color: var(--muted); font-size: 12px; text-align: center; padding: 24px 16px; } + + /* Mobile */ + #mobile-nav { display: none; } + @media (max-width: 768px) { + #sidebar, #main, #details { + position: fixed; + top: 0; left: 0; right: 0; + bottom: calc(48px + env(safe-area-inset-bottom)); + width: 100%; + display: none; + } + #sidebar.mobile-active, #main.mobile-active, #details.mobile-active { display: flex; } + #sidebar { border-right: none; } + #details { border-left: none; } + #mobile-nav { + display: flex; + position: fixed; + bottom: 0; left: 0; right: 0; + height: calc(48px + env(safe-area-inset-bottom)); + padding-bottom: env(safe-area-inset-bottom); + background: var(--surface); + border-top: 1px solid var(--border); + z-index: 100; + } + .mobile-nav-btn { + flex: 1; + background: none; + border: none; + color: var(--muted); + font-size: 10px; + font-family: inherit; + cursor: pointer; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 3px; + transition: color 0.15s; + padding: 0; + -webkit-tap-highlight-color: transparent; + } + .mobile-nav-btn.active { color: var(--accent); } + .mobile-nav-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } + } @@ -251,6 +295,21 @@ + +