From e349fbbf033e8773cc11d27fd7f5c1d96fd523a1 Mon Sep 17 00:00:00 2001 From: Bernard Siebens Date: Sat, 22 Aug 2026 18:08:17 +0200 Subject: [PATCH] Make the whole page scroll, show referee sign-up on the event page too The app shell now scrolls as one page (body/document) instead of boxing content inside an inner overflow-auto
under a fixed header/tab bar -- header and tab bar are sticky instead, which reads as a single intuitive scroll (most noticeable on Calendar's long agenda) and, as a side effect, means htmx's boosted-navigation scroll-to-top actually resets what the user sees. The inner "This week"/"Today" sticky sub-headers are no longer sticky themselves, since they'd otherwise collide with the now-sticky app header. Event detail also shows the same referee Accept/Decline card the Calendar row offers, for a signed-in account with a pending or accepted sign-up on that game -- not just on the Calendar. Both the calendar row's and the event page's Accept/Decline forms are now htmx-boosted (no hx-boost="false") since neither is Alpine-toggled, so a response no longer forces a full page reload. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9 --- .../mobile/_calendar_referee_row.html | 12 +++-- mobile/templates/mobile/base.html | 16 +++++-- mobile/templates/mobile/calendar.html | 6 +-- mobile/templates/mobile/event_detail.html | 30 +++++++++++- mobile/templates/mobile/notifications.html | 6 +-- mobile/tests.py | 47 ++++++++++++++++++- mobile/views.py | 37 ++++++++++++--- static/css/app.css | 3 ++ static/css/mobile.css | 2 +- 9 files changed, 133 insertions(+), 26 deletions(-) diff --git a/mobile/templates/mobile/_calendar_referee_row.html b/mobile/templates/mobile/_calendar_referee_row.html index 1decaf9..34b2b3b 100644 --- a/mobile/templates/mobile/_calendar_referee_row.html +++ b/mobile/templates/mobile/_calendar_referee_row.html @@ -10,9 +10,11 @@ on their own behalf, not something a parent does for a child. Expects ``row`` ({event, referee_signup}) in scope. Accept/Decline are - two small forms, not a single multi-button one, so hx-boost="false" can - sit on each without a formaction/htmx-boost mismatch (see event_detail. - html's own top-of-file comment for that failure mode). + two small forms, not a single multi-button one -- and, unlike this + app's RSVP forms, boosted (no hx-boost="false"): nothing here is + Alpine-owned/toggled, so there's no htmx/Alpine conflict to dodge, and a + boosted POST avoids the jarring full-page reload a plain form submit + would cause on a page the user is mid-scroll on. {% endcomment %}
@@ -35,12 +37,12 @@ {% trans "Confirmed" %} {% else %}
-
+ {% csrf_token %}
-
+ {% csrf_token %} diff --git a/mobile/templates/mobile/base.html b/mobile/templates/mobile/base.html index f6511ff..4b7379f 100644 --- a/mobile/templates/mobile/base.html +++ b/mobile/templates/mobile/base.html @@ -23,6 +23,14 @@ the OLD shell's class/attributes in place under the NEW shell's content. See coach/base.html's own comment for the same rule mirrored the other direction. + + The page itself scrolls (body/document), not a boxed-in
-- header + and tab bar are sticky (top-0/bottom-0) rather than the earlier fixed- + height-shell-with-an-inner-overflow-auto-region approach, which read as + two separate scrollable areas nested inside each other (most noticeable + on Calendar's long agenda). A side benefit: htmx's boosted navigation + scrolls the window back to top by default, which now actually resets + what the user sees -- with the old inner
scroll it didn't. {% endcomment %} @@ -62,8 +70,8 @@ {% block extra_head %}{% endblock extra_head %} - -
+ +
{% if club.logo %} @@ -95,7 +103,7 @@ {% block header_extra %}{% endblock header_extra %}
-
+
{% if messages %}
@@ -109,7 +117,7 @@
-