bernard/RosterChief
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make the management app's page scroll as one, not a boxed-in inner panel

Browse Source 
Same fix as mobile/templates/mobile/base.html earlier this session: sidebar
and topbar are sticky instead of the page being a fixed-height shell around
an inner overflow-y-auto <main> -- that read as two separate scrollable
areas nested inside each other, most noticeable on a tall page like the
week calendar (event_list.html's own .cal-week-body, routinely taller than
a screenful of hours).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9
This commit is contained in:
Bernard Siebens
2026-08-22 18:57:57 +02:00
parent e13b17707c
commit ae8e4c411d
2 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
management/templates/management/base.html
View File

@@ -9,6 +9,13 @@
assets/management.css's --color-club/--color-club-dark tokens, set per request
from Club.secondary_color. Desktop only, matching the design's own scope for this
surface -- no mobile nav here, unlike the club-facing chrome this replaces.
The page itself scrolls (body/document), not a boxed-in <main> under a fixed-
height shell -- the sidebar and topbar are sticky (top-0) instead, same reasoning
(and same fix) as mobile/templates/mobile/base.html's own shell: a fixed shell
with an inner overflow-y-auto <main> reads as two separate scrollable areas
nested inside each other, most noticeable on a tall page like the week calendar
(event_list.html's own .cal-week-body, sized well past a screenful of hours).
{% endcomment %}
<!DOCTYPE html>
<html lang="en">
@@ -47,9 +54,9 @@
{% block extra_head %}{% endblock extra_head %}
</head>
<body class="flex h-screen flex-col overflow-hidden bg-paper font-sans text-slate">
<div class="flex flex-1 overflow-hidden">
<aside class="flex w-[236px] shrink-0 flex-col bg-sidebar-bg py-5">
<body class="flex min-h-screen flex-col bg-paper font-sans text-slate">
<div class="flex flex-1">
<aside class="sticky top-0 flex h-screen w-[236px] shrink-0 flex-col overflow-y-auto bg-sidebar-bg py-5">
<a class="flex items-center gap-2.5 px-[18px] pb-[22px]" href="{% url 'management:home' %}">
{% if club.logo %}
<img class="crest h-[30px] w-7 shrink-0 object-cover" src="{{ club.logo.url }}" alt="">
@@ -99,7 +106,7 @@
</aside>
<div class="flex min-w-0 flex-1 flex-col">
<header class="flex h-16 shrink-0 items-center gap-4 border-b border-line bg-white px-7">
<header class="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-4 border-b border-line bg-white px-7">
<span class="font-display text-2xl font-extrabold text-ink uppercase">{% block heading %}{% block topbar_title %}Management{% endblock topbar_title %}{% endblock heading %}</span>
{% block topbar_context %}{% endblock topbar_context %}
<div class="flex-1"></div>
@@ -144,7 +151,7 @@
{% block filter_strip %}{% endblock filter_strip %}
<main class="flex-1 overflow-y-auto">
<main class="flex-1">
<div class="flex flex-col gap-4 px-7 py-6">
{% if billing_notice.is_urgent and nav != "home" %}
{% include "management/_billing_notice.html" %}

2
static/css/management.css
View File

File diff suppressed because one or more lines are too long