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

Coach header: back to dark ink, ice-blue only on the active switcher pill

Browse Source 
The previous turn's all-ice-blue header wasn't what the design doc actually
called for -- its own text is explicit: "the role switcher with Coach
active (bg-ice)", i.e. the accent belongs on the switcher's active segment,
not the header background. Reverted .coach-header to dark ink (matching
Member mode's own navy) and added .role-switcher-item-active-ice (bg-ice/
ice-ink) for just the Manager pill, leaving Member mode's own white/ink
active state untouched. All the header_extra text this touched (Attendance,
Line-up) reverts to white/on-dark to match.

Fixed the switcher jumping position between modes: both shells' top info
row now carries the same min-h-11 (previously only implicit in the member
header, via its bell button's own height), and the switcher sits directly
below that row in both -- the coach header's team-picker pill row (multi-
team accounts) now renders *after* the switcher instead of before it, so
its conditional presence can't shift the switcher down anymore.

Tab bar order swapped per feedback -- Today / Squad / Schedule / [+],
not Today / Squad / [+] / Schedule -- the "+" reads better as the last,
most prominent item than sandwiched in the middle.

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-21 23:28:23 +02:00
parent 1d159ca5de
commit 1d22a57208
7 changed files with 51 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
assets/mobile.css
View File

@@ -257,6 +257,13 @@
color: var(--color-ink); color: var(--color-ink);
} }
/* Coach mode's own active segment -- design doc: "the role switcher with
Coach active (bg-ice)", distinct from member mode's white/ink one above. */
.role-switcher-item-active-ice {
background: var(--color-ice);
color: var(--color-ice-ink);
}
/* Bottom tab bar -- design doc: "bg-white border-t border-line pt-2 pb-[26px] /* Bottom tab bar -- design doc: "bg-white border-t border-line pt-2 pb-[26px]
(member)... four equal items, 48px tall". pb uses the safe-area inset instead of (member)... four equal items, 48px tall". pb uses the safe-area inset instead of
the doc's fixed 26px, which was standing in for it. */ the doc's fixed 26px, which was standing in for it. */
@@ -447,15 +454,16 @@
} }
/* --- Coach mode shell (C1-C6) --------------------------------------------------- /* --- Coach mode shell (C1-C6) ---------------------------------------------------
Ice-blue header (never club-themed -- same --color-ice token the rest of Coach Dark ink header (never club-themed) with the role switcher's own active segment
mode already uses) is the mode's own signature, distinct at a glance from the in ice-blue (see .role-switcher-item-active-ice above) -- that's the mode's
member shell's club-themed navy header. .coach-sheet sits flush below it, edge to signature accent, not the header background itself. .coach-sheet sits flush
edge like the member shell's own header/body join -- no rounded overlap. */ below it, edge to edge like the member shell's own header/body join -- no
rounded overlap. */
.coach-header { .coach-header {
padding: max(env(safe-area-inset-top), 14px) 16px 14px; padding: max(env(safe-area-inset-top), 14px) 16px 14px;
background: var(--color-ice); background: var(--color-ink);
color: var(--color-ice-ink); color: #fff;
flex-shrink: 0; flex-shrink: 0;
} }

2
mobile/templates/mobile/base.html
View File

@@ -64,7 +64,7 @@
<body class="flex h-screen flex-col overflow-hidden bg-paper font-sans text-slate" hx-boost="true" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' data-vapid-public-key="{{ vapid_public_key }}" data-csrftoken="{{ csrf_token }}"> <body class="flex h-screen flex-col overflow-hidden bg-paper font-sans text-slate" hx-boost="true" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' data-vapid-public-key="{{ vapid_public_key }}" data-csrftoken="{{ csrf_token }}">
<header class="app-header"> <header class="app-header">
<div class="flex items-center gap-2.5"> <div class="flex min-h-11 items-center gap-2.5">
<a class="flex items-center gap-2.5" href="{% url "mobile:home" %}"> <a class="flex items-center gap-2.5" href="{% url "mobile:home" %}">
{% if club.logo %} {% if club.logo %}
<img class="app-crest" src="{{ club.logo.url }}" alt=""> <img class="app-crest" src="{{ club.logo.url }}" alt="">

6
mobile/templates/mobile/coach/attendance.html
View File

@@ -13,10 +13,10 @@
{% block header_extra %} {% block header_extra %}
<div class="mt-3"> <div class="mt-3">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="font-display text-xl leading-none font-extrabold text-ice-ink uppercase">{% trans "Attendance" %}</span> <span class="font-display text-xl leading-none font-extrabold text-white uppercase">{% trans "Attendance" %}</span>
<span class="font-mono text-sm text-ice-ink/70">{{ checked_in_count }}/{{ total_count }}</span> <span class="font-mono text-sm text-on-dark">{{ checked_in_count }}/{{ total_count }}</span>
</div> </div>
<div class="mt-1 text-xs text-ice-ink/65">{{ event.title }} &middot; {{ event.start|date:"D d M H:i" }}</div> <div class="mt-1 text-xs text-on-dark-dim">{{ event.title }} &middot; {{ event.start|date:"D d M H:i" }}</div>
<div class="mt-2 h-1.5 overflow-hidden rounded-full bg-steel"> <div class="mt-2 h-1.5 overflow-hidden rounded-full bg-steel">
<div class="h-full bg-ice" style="width: {% widthratio checked_in_count total_count|default:1 100 %}%"></div> <div class="h-full bg-ice" style="width: {% widthratio checked_in_count total_count|default:1 100 %}%"></div>
</div> </div>

48
mobile/templates/mobile/coach/base.html
View File

@@ -4,17 +4,24 @@
App shell for Coach mode (C1-C6) -- design_handoff_rosterchief_platform/README.md's App shell for Coach mode (C1-C6) -- design_handoff_rosterchief_platform/README.md's
"Coach mode (mobile, dark chrome)" section. Standalone from mobile/templates/mobile/ "Coach mode (mobile, dark chrome)" section. Standalone from mobile/templates/mobile/
base.html (Member mode's shell) rather than a shared parent: the two have almost no base.html (Member mode's shell) rather than a shared parent: the two have almost no
markup in common beyond the outer <html>/<body> skeleton -- an ice-blue header markup in common beyond the outer <html>/<body> skeleton -- dark ink header instead
(never club-themed, the mode's own signature colour, see assets/mobile.css's own of the member shell's club-themed navy, with the role switcher's own active segment
comment) instead of the member shell's club-themed navy, and a dark .coach-tab-bar in ice-blue (assets/mobile.css's .role-switcher-item-active-ice) as the mode's own
instead of the white one. accent -- and a dark .coach-tab-bar instead of the white one.
Reuses the SAME stylesheet (static/css/mobile.css) and the same mobile:manifest/ Reuses the SAME stylesheet (static/css/mobile.css) and the same mobile:manifest/
mobile:icon/mobile:service_worker PWA plumbing as Member mode -- one app, one mobile:icon/mobile:service_worker PWA plumbing as Member mode -- one app, one
manifest, two modes, not two separate PWAs. manifest, two modes, not two separate PWAs.
Tab bar: Today / Squad / Schedule, plus a raised "+" action in the middle that opens The top info row (crest + team name) carries the same min-h-11 as the member
a small popup menu (New event / New post / Add player) rather than committing to one header's own top row (implicitly 44px there, via its bell button) -- the role
switcher pill sits directly below that row in both shells, so switching modes never
shifts its position. The team-picker pill row (multi-team accounts only) renders
*after* the switcher for the same reason -- were it above, the switcher would jump
down whenever it appears.
Tab bar: Today / Squad / Schedule, plus a raised "+" action at the end that opens a
small popup menu (New event / New post / Add player) rather than committing to one
destination -- coach mode has three genuinely different "add" actions and picking a destination -- coach mode has three genuinely different "add" actions and picking a
single one for the button would just hide the other two. No Me tab here -- the single one for the button would just hide the other two. No Me tab here -- the
account's own settings live in Member mode's mobile:me, reached via the role account's own settings live in Member mode's mobile:me, reached via the role
@@ -31,7 +38,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="theme-color" content="#14b8e8"> <meta name="theme-color" content="#0b1220">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
@@ -61,33 +68,33 @@
<body class="flex h-screen flex-col overflow-hidden bg-ink font-sans text-slate" hx-boost="true" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' data-csrftoken="{{ csrf_token }}"> <body class="flex h-screen flex-col overflow-hidden bg-ink font-sans text-slate" hx-boost="true" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' data-csrftoken="{{ csrf_token }}">
<header class="coach-header"> <header class="coach-header">
<div class="flex items-center gap-2.5"> <div class="flex min-h-11 items-center gap-2.5">
{% if club.logo %} {% if club.logo %}
<img class="app-crest" src="{{ club.logo.url }}" alt=""> <img class="app-crest" src="{{ club.logo.url }}" alt="">
{% else %} {% else %}
<span class="app-crest app-crest-fallback">{{ club.initials }}</span> <span class="app-crest app-crest-fallback">{{ club.initials }}</span>
{% endif %} {% endif %}
<span class="min-w-0 flex-1"> <span class="min-w-0 flex-1">
<span class="block truncate font-display text-[19px] leading-none font-extrabold text-ice-ink uppercase">{{ active_team.name|default:club.name }}</span> <span class="block truncate font-display text-[19px] leading-none font-extrabold text-white uppercase">{{ active_team.name|default:club.name }}</span>
{% if me and active_team_role %}<span class="block font-mono text-xs text-ice-ink/70">{{ active_team_role }} &middot; {{ me.first_name }}</span>{% endif %} {% if me and active_team_role %}<span class="block font-mono text-xs text-on-dark">{{ active_team_role }} &middot; {{ me.first_name }}</span>{% endif %}
</span> </span>
</div> </div>
<div class="role-switcher">
<a class="role-switcher-item" href="{% url "mobile:home" %}" hx-boost="false">{% trans "Member" %}</a>
<a class="role-switcher-item role-switcher-item-active-ice" href="{% url "mobile:coach_today" %}">{% trans "Manager" %}</a>
</div>
{% if staffed_teams|length > 1 %} {% if staffed_teams|length > 1 %}
<div class="mt-3 flex gap-2 overflow-x-auto scrollbar-hide"> <div class="mt-3 flex gap-2 overflow-x-auto scrollbar-hide">
{% for team in staffed_teams %} {% for team in staffed_teams %}
<a class="shrink-0 rounded-full px-3 py-1.5 font-display text-xs font-extrabold tracking-wide uppercase {% if team == active_team %}bg-ink text-ice{% else %}bg-white/40 text-ice-ink{% endif %}" href="?team={{ team.pk }}"> <a class="shrink-0 rounded-full px-3 py-1.5 font-display text-xs font-extrabold tracking-wide uppercase {% if team == active_team %}bg-ice text-ice-ink{% else %}bg-steel text-on-dark{% endif %}" href="?team={{ team.pk }}">
{{ team.short_name }} {{ team.short_name }}
</a> </a>
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
<div class="role-switcher">
<a class="role-switcher-item" href="{% url "mobile:home" %}" hx-boost="false">{% trans "Member" %}</a>
<a class="role-switcher-item role-switcher-item-active" href="{% url "mobile:coach_today" %}">{% trans "Manager" %}</a>
</div>
{% block header_extra %}{% endblock header_extra %} {% block header_extra %}{% endblock header_extra %}
</header> </header>
@@ -114,6 +121,10 @@
{% lucide "users" size=21 %} {% lucide "users" size=21 %}
<span class="tab-bar-label">{% trans "Squad" %}</span> <span class="tab-bar-label">{% trans "Squad" %}</span>
</a> </a>
<a class="coach-tab-bar-item {% if active_tab == "coach_schedule" %}coach-tab-bar-item-active{% endif %}" href="{% url "mobile:coach_schedule" %}">
{% lucide "calendar" size=21 %}
<span class="tab-bar-label">{% trans "Schedule" %}</span>
</a>
{% if can_manage_active_team %} {% if can_manage_active_team %}
<div class="coach-tab-bar-add" x-data="{ open: false }"> <div class="coach-tab-bar-add" x-data="{ open: false }">
@@ -135,11 +146,6 @@
{% else %} {% else %}
<div class="coach-tab-bar-add"></div> <div class="coach-tab-bar-add"></div>
{% endif %} {% endif %}
<a class="coach-tab-bar-item {% if active_tab == "coach_schedule" %}coach-tab-bar-item-active{% endif %}" href="{% url "mobile:coach_schedule" %}">
{% lucide "calendar" size=21 %}
<span class="tab-bar-label">{% trans "Schedule" %}</span>
</a>
</nav> </nav>
<script src="{% static "js/mobile-app.js" %}" defer></script> <script src="{% static "js/mobile-app.js" %}" defer></script>

4
mobile/templates/mobile/coach/lineup.html
View File

@@ -15,10 +15,10 @@
{% block header_extra %} {% block header_extra %}
<div class="mt-3 flex items-center justify-between"> <div class="mt-3 flex items-center justify-between">
<span class="font-display text-xl leading-none font-extrabold text-ice-ink uppercase">{% trans "Line-up" %}</span> <span class="font-display text-xl leading-none font-extrabold text-white uppercase">{% trans "Line-up" %}</span>
{% if lineup.published_at %}<span class="pill pill-info">{% trans "Published" %}</span>{% endif %} {% if lineup.published_at %}<span class="pill pill-info">{% trans "Published" %}</span>{% endif %}
</div> </div>
<div class="mt-1 text-xs text-ice-ink/65">{{ event.title }} &middot; {{ event.start|date:"D d M H:i" }}</div> <div class="mt-1 text-xs text-on-dark-dim">{{ event.title }} &middot; {{ event.start|date:"D d M H:i" }}</div>
{% endblock header_extra %} {% endblock header_extra %}
{% block content %} {% block content %}

3
static/css/app.css
View File

@@ -4028,6 +4028,9 @@
.min-h-6 { .min-h-6 {
min-height: calc(var(--spacing) * 6); min-height: calc(var(--spacing) * 6);
} }
.min-h-11 {
min-height: calc(var(--spacing) * 11);
}
.min-h-screen { .min-h-screen {
min-height: 100vh; min-height: 100vh;
} }

2
static/css/mobile.css
View File

File diff suppressed because one or more lines are too long