Make the management app responsive on mobile
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:
@@ -53,26 +53,46 @@
|
||||
intrinsic width.
|
||||
{% endcomment %}
|
||||
<div class="navbar shrink-0 border-b border-base-300 bg-base-100 px-3 shadow-sm sm:px-6">
|
||||
<div class="my-4 min-w-0 flex-1">
|
||||
{% block brand %}{% endblock brand %}
|
||||
<div class="my-4 flex min-w-0 flex-1 items-center gap-1">
|
||||
{% comment %}
|
||||
Empty for pages with no menu (the auth screens) -- management/base.html
|
||||
and controlpanel/base.html are the only overriders, each pairing this
|
||||
with its own `{% block mobile_menu %}` dialog below in `main`.
|
||||
{% endcomment %}
|
||||
{% block nav_toggle %}{% endblock nav_toggle %}
|
||||
<div class="min-w-0">
|
||||
{% block brand %}{% endblock brand %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-ghost" type="button" data-theme-toggle aria-label="Theme">
|
||||
<span data-theme-icon="light" class="hidden items-center gap-4">{% lucide "sun" size=20 %} <span class="hidden sm:inline">light</span></span>
|
||||
<span data-theme-icon="dark" class="hidden items-center gap-4">{% lucide "moon" size=20 %} <span class="hidden sm:inline">dark</span></span>
|
||||
<span data-theme-icon="auto" class="hidden items-center gap-4">{% lucide "sun-moon" size=20 %} <span class="hidden sm:inline">auto</span></span>
|
||||
</button>
|
||||
{% comment %}
|
||||
Hidden below `lg` wherever a hamburger drawer exists to hold them instead
|
||||
(management/base.html, controlpanel/base.html override `nav_icons_class` to
|
||||
`hidden lg:flex` and duplicate these same three controls inside their
|
||||
{% block nav_toggle %} dialog) -- on a page with no such drawer (the auth
|
||||
screens, the public club site) the default keeps them in the navbar itself,
|
||||
since there'd be nowhere else for them to go.
|
||||
{% endcomment %}
|
||||
<div class="{% block nav_icons_class %}flex items-center{% endblock nav_icons_class %}">
|
||||
<button class="btn btn-ghost" type="button" data-theme-toggle aria-label="Theme">
|
||||
<span data-theme-icon="light" class="hidden items-center gap-4">{% lucide "sun" size=20 %} <span class="hidden sm:inline">light</span></span>
|
||||
<span data-theme-icon="dark" class="hidden items-center gap-4">{% lucide "moon" size=20 %} <span class="hidden sm:inline">dark</span></span>
|
||||
<span data-theme-icon="auto" class="hidden items-center gap-4">{% lucide "sun-moon" size=20 %} <span class="hidden sm:inline">auto</span></span>
|
||||
</button>
|
||||
|
||||
{% if user.is_authenticated %}
|
||||
{% if has_management_access %}
|
||||
{# Only ever true on a club subdomain -- see management.context_processors.management_link. #}
|
||||
<a class="btn btn-ghost gap-4" href="{% url "management:home" %}" aria-label="Management">{% lucide "layout-dashboard" %}<span class="hidden sm:inline">Management</span></a>
|
||||
{% endif %}
|
||||
|
||||
{% if user.is_superuser %}
|
||||
<a class="btn btn-ghost gap-4" href="{% url "admin:index" %}" aria-label="Django admin">{% lucide "shield-cog" %}<span class="hidden sm:inline">Django admin</span></a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if user.is_authenticated %}
|
||||
{% if has_management_access %}
|
||||
{# Only ever true on a club subdomain -- see management.context_processors.management_link. #}
|
||||
<a class="btn btn-ghost gap-4" href="{% url "management:home" %}" aria-label="Management">{% lucide "layout-dashboard" %}<span class="hidden sm:inline">Management</span></a>
|
||||
{% endif %}
|
||||
|
||||
{% if user.is_superuser %}
|
||||
<a class="btn btn-ghost gap-4" href="{% url "admin:index" %}" aria-label="Django admin">{% lucide "shield-cog" %}<span class="hidden sm:inline">Django admin</span></a>
|
||||
{% endif %}
|
||||
|
||||
<div class="dropdown dropdown-end">
|
||||
<div tabindex="0" role="button" class="btn btn-ghost gap-4" aria-label="Account">{% lucide "circle-user" %}<span class="hidden max-w-40 truncate sm:inline">{{ user.get_full_name }}</span></div>
|
||||
<ul tabindex="0" class="menu dropdown-content z-10 mt-2 w-60 rounded-box bg-base-100 p-2 shadow border border-base-content/20">
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -25,11 +25,11 @@
|
||||
{% endblock extra %}
|
||||
|
||||
{% block brand %}
|
||||
<a class="flex flex-row items-center gap-2" href="/">
|
||||
<span class="logo inline-block h-16 w-16" role="img" aria-label="RosterChief"></span>
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="font-roboto text-2xl font-bold tracking-wider">Roster<span class="text-sky-500">Chief</span></div>
|
||||
<div class="font-mono text-xs font-semibold text-base-content/50">Club & Team Management</div>
|
||||
<a class="flex min-w-0 flex-row items-center gap-2" href="/">
|
||||
<span class="logo inline-block h-10 w-10 shrink-0 sm:h-16 sm:w-16" role="img" aria-label="RosterChief"></span>
|
||||
<div class="flex min-w-0 flex-col gap-1">
|
||||
<div class="truncate font-roboto text-lg font-bold tracking-wider sm:text-2xl">Roster<span class="text-sky-500">Chief</span></div>
|
||||
<div class="hidden truncate font-mono text-xs font-semibold text-base-content/50 sm:block">Club & Team Management</div>
|
||||
</div>
|
||||
</a>
|
||||
{% endblock brand %}
|
||||
|
||||
Reference in New Issue
Block a user