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

Redesign the Coach mode shell: ice-blue header, flat sheet, Squad/Schedule tabs

Browse Source 
Reworks the coach shell per feedback that the previous dark-ink header
didn't read as visually distinct from Member mode's own navy header, and
that the rounded "sheet overlaps header" treatment wasn't landing:

- .coach-header is now solid ice-blue (--color-ice, never club-themed --
  Coach mode's own signature colour) with --color-ice-ink foreground text,
  instead of dark ink with white text. Every header_extra block across the
  coach templates (attendance, lineup) is recoloured to match.
- .coach-sheet drops the 20px rounded-top/negative-margin overlap -- flush
  edge-to-edge below the header now, same join the member shell already uses.
- The header's "Head coach" label was hardcoded regardless of the account's
  actual role -- CoachScopeMixin now resolves active_team_role from the
  person's own current-season StaffAssignment.position on the active team,
  so a team manager or physio sees their real title, not someone else's.

Tab bar is now Today / Squad / [+] / Schedule -- no Me tab (the account's
own settings already live in Member mode via the role switcher, no need
for a second one). Squad (CoachSquadView) is a new roster+staff screen for
the active team; Schedule (CoachScheduleView) is a new full upcoming-events
list for the team, each row routed straight to the coach-relevant action
(Attendance for a practice, Line-up for a game) rather than the Member-
shell RSVP page. The "+" is a raised ice-blue circle opening a small popup
with New event/New post/Add player -- three genuinely different actions,
so the button opens a menu rather than committing to one destination.
Today's own inline New event/New post/Add player buttons are gone now that
the tab bar covers the same ground.

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:21:27 +02:00
parent 64d0fec547
commit 1d159ca5de
13 changed files with 421 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
assets/mobile.css
View File

@@ -447,29 +447,27 @@
}
/* --- Coach mode shell (C1-C6) ---------------------------------------------------
Dark-chrome mirror of the member .app-header/.tab-bar pair above. .coach-sheet is
the mode's signature: a light body that overlaps the ink header by 20px via a
matching negative margin, so the header appears to sit "behind" a rounded sheet
rather than the two stacking edge-to-edge like the member shell's navy header does. */
Ice-blue header (never club-themed -- same --color-ice token the rest of Coach
mode already uses) is the mode's own signature, distinct at a glance from the
member shell's club-themed navy header. .coach-sheet sits flush below it, edge to
edge like the member shell's own header/body join -- no rounded overlap. */
.coach-header {
padding: max(env(safe-area-inset-top), 14px) 16px 14px;
background: var(--color-ink);
color: #fff;
background: var(--color-ice);
color: var(--color-ice-ink);
flex-shrink: 0;
}
.coach-sheet {
background: var(--color-paper);
border-radius: 20px 20px 0 0;
margin-top: -20px;
position: relative;
flex: 1;
overflow-y: auto;
}
.coach-tab-bar {
flex-shrink: 0;
position: relative; /* anchors the "+" action's popup menu */
background: var(--color-ink);
border-top: 1px solid var(--color-hairline);
padding: 8px 8px max(env(safe-area-inset-bottom), 26px);
@@ -490,4 +488,28 @@
.coach-tab-bar-item-active {
color: var(--color-ice);
}
/* The tab bar's own "+" action -- raised above the bar line in a solid ice
circle so it reads as the one prominent action among otherwise-equal nav
items, same idea as a FAB parked inside a bottom bar. */
.coach-tab-bar-add {
flex: 1;
display: flex;
align-items: flex-start;
justify-content: center;
}
.coach-tab-bar-add-button {
width: 48px;
height: 48px;
margin-top: -20px;
border-radius: 999px;
background: var(--color-ice);
color: var(--color-ice-ink);
display: flex;
align-items: center;
justify-content: center;
border: 4px solid var(--color-ink);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
}