Files
RosterChief/templates/_platform_base.html
Bernard Siebens 9f4a0ea687 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>
2026-08-16 09:55:08 +02:00

36 lines
1.4 KiB
HTML

{% extends "_base.html" %}
{% load static %}
{% comment %}
RosterChief's own skin: the platform control panel, Django-admin-adjacent pages,
and every auth screen served on the base domain.
{% endcomment %}
{% block title %}
{% block head_title %}{% endblock head_title %} · RosterChief
{% endblock title %}
{% block extra %}
{% comment %}
Named after the logo's own ink, not the theme it is used on: the white logo goes
on dark backgrounds and vice versa. They live here rather than in app.css because
only Django knows the {% static %} URL.
{% endcomment %}
<style>
:root {
--logo-light: url("{% static 'images/rosterchief-white.svg' %}");
--logo-dark: url("{% static 'images/rosterchief-dark.svg' %}");
}
</style>
{% endblock extra %}
{% block brand %}
<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 &amp; Team Management</div>
</div>
</a>
{% endblock brand %}