Bernard Siebens
9f4a0ea687
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>
60 lines
3.1 KiB
HTML
60 lines
3.1 KiB
HTML
{% extends "_base.html" %}
|
|
|
|
{% comment %}
|
|
A club's skin, used on its subdomain. `club` comes from the branding context
|
|
processor, which reads the tenant resolved by ClubTenantMiddleware.
|
|
{% endcomment %}
|
|
|
|
{% block title %}
|
|
{% block head_title %}{% endblock head_title %} · {{ club.name }}
|
|
{% endblock title %}
|
|
|
|
{% block extra %}
|
|
{% if club.primary_color or club.secondary_color %}
|
|
{% comment %}
|
|
daisyUI declares its theme variables inside `@layer base`, and unlayered styles
|
|
beat every layered rule regardless of specificity -- so this plain :root wins
|
|
without any !important or selector games. primary_content_color / secondary_content_color
|
|
are computed from the club's colours so a pale brand doesn't end up with
|
|
white-on-yellow buttons or initials.
|
|
{% endcomment %}
|
|
<style>
|
|
:root {
|
|
{% if club.primary_color %}
|
|
--color-primary: {{ club.primary_color }};
|
|
--color-primary-content: {{ club.primary_content_color }};
|
|
{% endif %}
|
|
{% if club.secondary_color %}
|
|
--color-secondary: {{ club.secondary_color }};
|
|
--color-secondary-content: {{ club.secondary_content_color }};
|
|
{% endif %}
|
|
}
|
|
</style>
|
|
{% endif %}
|
|
{% endblock extra %}
|
|
|
|
{% block brand %}
|
|
{# 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 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 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 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 %}
|