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

Make the management app responsive on mobile

Browse Source 
Replace the mobile nav's horizontal scroll strip (which wrapped into
an unreadable jumble because daisyUI's .menu sets flex-wrap: wrap and
.menu-horizontal never resets it) with a hamburger button that opens
a proper left-side drawer, mirrored in controlpanel for the same bug.
Move the theme toggle, "Management", and "Django admin" controls into
that drawer below `lg`, leaving only the account icon in the navbar,
so the club name has room to render in full instead of truncating to
initials.

Add a reusable `.table-cards` CSS pattern (app.css) that turns a list
table into a stack of labelled cards below `md`, and apply it to every
list/detail table in the management app -- members, families, teams,
memberships, events, groups, locations, opponents, positions, referee
levels/list, roles, sponsors, news, parent claims, team roster/staff,
and the shared family-members table. Tables revert to normal desktop
layout at `md` and up.

Member list gets extra passes: search submits icon-only below `sm` so
it fits next to the input, the Members/Guardians/Both tabs go
full-width, and last/first name merge into one column. Action-button
rows across every page stack full-width on mobile instead of wrapping
mid-button (shared fix in base.html). Home dashboard's upcoming-events
and news mini-tables become simple lists instead of overflowing
tables. Also: brand truncates instead of overflowing on a long club
name, a stray invalid xmlns attribute removed, a wrapping UUID badge
hidden below `sm` on team detail.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Bernard Siebens
2026-08-16 09:55:08 +02:00
parent 5d3dbebd77
commit 9f4a0ea687
35 changed files with 674 additions and 699 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
templates/_club_base.html
View File

@@ -34,25 +34,26 @@
{% endblock extra %}
{% block brand %}
<a class="flex flex-row items-center gap-3" href="/">
{# min-w-0 on both the link and the text column: without it a flex child's default min-width:auto refuses to shrink past the club name's intrinsic width, so `truncate` never gets the chance to kick in and the name pushes the header wider than the viewport instead of ellipsizing. The avatar and tagline shrink/hide below `sm` for the same reason -- a long club name at full size has nowhere left to give. #}
<a class="flex min-w-0 flex-row items-center gap-2 sm:gap-3" href="/">
{% if club.logo %}
{# The ring is the club's own primary colour -- a plain frame around whatever crest they uploaded. #}
<div class="avatar">
<div class="w-16 rounded-full bg-base-100 ring-2 ring-primary ring-offset-2 ring-offset-base-100">
<div class="avatar shrink-0">
<div class="w-10 rounded-full bg-base-100 ring-2 ring-primary ring-offset-2 ring-offset-base-100 sm:w-16">
<img class="club-logo object-contain" src="{{ club.logo.url }}" alt="{{ club.name }}">
</div>
</div>
{% else %}
{# Never the RosterChief mark: that would pass our branding off as the club's own. #}
<div class="avatar avatar-placeholder">
<div class="w-16 rounded-full bg-secondary text-secondary-content">
<span class="font-roboto text-xl font-bold">{{ club.initials }}</span>
<div class="avatar avatar-placeholder shrink-0">
<div class="w-10 rounded-full bg-secondary text-secondary-content sm:w-16">
<span class="font-roboto text-sm font-bold sm:text-xl">{{ club.initials }}</span>
</div>
</div>
{% endif %}
<div class="flex flex-col gap-1">
<div class="font-roboto text-2xl font-bold tracking-wider">{{ club.name }}</div>
<div class="font-mono text-xs font-semibold text-base-content/50">Powered by RosterChief</div>
<div class="flex min-w-0 flex-col gap-1">
<div class="truncate font-roboto text-lg font-bold tracking-wider sm:text-2xl">{{ club.name }}</div>
<div class="hidden truncate font-mono text-xs font-semibold text-base-content/50 sm:block">Powered by RosterChief</div>
</div>
</a>
{% endblock brand %}