From 3079408ed99c2786649c78d309d1bd0db5cae659 Mon Sep 17 00:00:00 2001 From: Sean Halpin Date: Wed, 7 Oct 2026 10:53:52 -0400 Subject: [PATCH 1/9] feat(ui): phone layout and screen wake lock (ROADMAP 3.19, 3.12) Add viewport meta so phones get a real layout instead of a scaled-down desktop page. Under 480px: full-height hero, bottom-docked presets and Pause/End, 44px+ targets, header controls behind a menu button, history as cards. Add a web app manifest for full-screen home-screen launch, pressed states for buttons (Bootstrap's default went transparent), and a native screen wake lock on the active screen. Co-Authored-By: Claude --- CHANGELOG.md | 7 + ROADMAP.md | 24 +-- static/manifest.json | 11 ++ templates/active_session.html | 57 ++++--- templates/base.html | 278 +++++++++++++++++++++++++++++++--- templates/paused_session.html | 26 ++-- templates/start_session.html | 18 +-- tests/test_routes.py | 7 + 8 files changed, 348 insertions(+), 80 deletions(-) create mode 100644 static/manifest.json diff --git a/CHANGELOG.md b/CHANGELOG.md index 8eb42e4..49d6aa6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,8 +4,15 @@ All notable changes to WalkingDad will be documented in this file. ## [Unreleased] +### Added + +- **Add to Home Screen opens WalkingDad full-screen** (ROADMAP 3.19), like an app, without the browser's address and tool bars. +- **The screen stays on during an active session** (ROADMAP 3.12), and returns to normal on Pause or End. Browsers only allow this on `localhost` or HTTPS, so it works on the computer running WalkingDad but not on a phone connecting over your network. + ### Changed +- **WalkingDad now has a real phone layout** (ROADMAP 3.19). Phones previously showed a shrunken desktop page. Now the speed reading fills the screen, the preset and Pause/End buttons sit full-width at the bottom within thumb reach, every button is large enough to tap while walking, the header controls fold into one menu button, and Recent Sessions shows as cards instead of a wide table. The desktop layout is unchanged. +- **Buttons show a pressed state when clicked or tapped**, instead of fading to transparent while held. - **`/reconnect` is now POST-only**, like the belt-control routes. The Connect and Try Again buttons on the connecting screen look and work the same. ### Fixed diff --git a/ROADMAP.md b/ROADMAP.md index ded586d..f8198b1 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -402,12 +402,12 @@ Active, Paused, and Start screens redesigned to read like the WalkingPad's own o --- -### 3.12 Screen Wake Lock During Active Session -- **Status:** Planned -- **Priority:** Medium -- **Problem:** Nothing actively touches the page while walking, so the browser can dim or lock the screen mid-session, right when a quick glance at speed/distance is most likely. -- **Solution:** Request a screen wake lock while `belt_running` is true, and release it on pause/end. -- **Implementation:** The native [Wake Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API) (`navigator.wakeLock.request('screen')`), no dependency needed. Re-request on `visibilitychange` since the browser releases the lock automatically when the tab is hidden. +### ✅ 3.12 Screen Wake Lock During Active Session +**Status:** ✅ Complete +**Priority:** Medium +**Files Modified:** `templates/active_session.html` + +The Active screen requests a native screen wake lock (`navigator.wakeLock`) and re-requests it when the tab becomes visible again; leaving the page (Pause/End) releases it. The API only exists in a secure context, so it works on `localhost` and HTTPS but not on a phone loading the app over LAN HTTP. See `CHANGELOG.md` `[Unreleased]`. --- @@ -470,12 +470,12 @@ Active, Paused, and Start screens redesigned to read like the WalkingPad's own o --- -### 3.19 Phone Layout -- **Status:** Planned -- **Priority:** Medium -- **Problem:** `base.html` has no ``, so iOS Safari renders the desktop layout at ~980px and scales it down: tiny text, small tap targets (±, presets, Pause/End), and most of the screen empty. The existing `@media (max-width: 480px)` rules have never applied on a phone for the same reason. Confirmed on an iPhone over the LAN (2026-10-07). -- **Solution:** Add ``, then tune the 480px block for walking-while-tapping use: tap targets of at least 44px, Pause/End and presets full-width, the stats strip as a 2x2 grid, and the speed readout using the freed vertical space. Desktop layout unchanged. -- **Implementation:** `templates/base.html` (meta tag and the 480px block); check active, paused, start, connecting, and settings screens on a real phone, since the 480px rules are untested. Do before 3.6, since the QR code is what brings phones in. 3.7 (swipe gestures) and 3.17 (tablet breakpoint) build on a working phone baseline. +### ✅ 3.19 Phone Layout +**Status:** ✅ Complete +**Priority:** Medium +**Files Modified:** `templates/base.html`, `templates/active_session.html`, `templates/paused_session.html`, `templates/start_session.html`, `static/manifest.json` + +Added the missing viewport meta, so phones get a real phone layout instead of a scaled-down desktop page. Under 480px: the reading fills the screen with preset and Pause/End rows docked at the bottom in thumb reach, 44px+ tap targets, a single menu button for the header controls, and session history as stacked cards. A web app manifest lets Add to Home Screen launch full-screen. Desktop layout is unchanged. See `CHANGELOG.md` `[Unreleased]`. --- diff --git a/static/manifest.json b/static/manifest.json new file mode 100644 index 0000000..c01beb2 --- /dev/null +++ b/static/manifest.json @@ -0,0 +1,11 @@ +{ + "name": "WalkingDad", + "short_name": "WalkingDad", + "start_url": "/", + "display": "standalone", + "background_color": "#f8fafc", + "theme_color": "#f8fafc", + "icons": [ + { "src": "/static/apple-touch-icon.png", "sizes": "436x467", "type": "image/png" } + ] +} diff --git a/templates/active_session.html b/templates/active_session.html index 05bb93d..5dfd4aa 100644 --- a/templates/active_session.html +++ b/templates/active_session.html @@ -1,6 +1,6 @@ {% extends "base.html" %} {% block content %} -
+

Active Session

Speed @@ -40,28 +40,30 @@

Active Session

-
-
- -
-
- -
-
- -
-
-
-
- -
-
- -
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
@@ -74,6 +76,15 @@

Active Session

var actionButtons = document.querySelectorAll('button[type="submit"]'); disableButtonsOnSubmit('transitioning-hint', actionButtons); + // Native only: needs a secure context (localhost/HTTPS), so a phone on LAN HTTP skips it. + if ('wakeLock' in navigator) { + var requestWakeLock = function() { navigator.wakeLock.request('screen').catch(function() {}); }; + requestWakeLock(); + document.addEventListener('visibilitychange', function() { + if (document.visibilityState === 'visible') requestWakeLock(); + }); + } + startStatsStream(function(data) { setTransitioning('transitioning-hint', actionButtons, data.belt_transitioning === true); // Check if the server has auto-paused the session diff --git a/templates/base.html b/templates/base.html index 60f7534..ee14a3f 100644 --- a/templates/base.html +++ b/templates/base.html @@ -2,6 +2,7 @@ +