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

Merge the identity page's App/Website preview tabs and make Email functional

Browse Source 
App and Website were always shown together already, so giving them
separate tabs implied a toggle that didn't exist -- merged into one
"App & Website" tab. The Email tab now shows a real, colour-bound
sample (plain header with a secondary-coloured crest badge, a
primary-coloured button) matching the actual branded emails this app
already sends -- audited every mail-sending call site (claims.py,
the new invoicing service, and platform billing's club-facing
reminders) and the first two already use the branded shell; billing's
is intentionally unbranded since it's RosterChief invoicing the club,
not the club invoicing its own members.

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-20 21:33:07 +02:00
parent 94d6cbd4e9
commit 3159064e2a
4 changed files with 161 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
assets/management.css
View File

@@ -1804,9 +1804,10 @@
background: var(--color-paper);
}
/* Live preview tabs -- App is the only one with real content behind it
(Website/Email aren't built), so these are static labels, not a real
tab control. */
/* Live preview tabs -- a real (if minimal) tab control: click toggles which
.preview-panel is shown (club_settings.html's own inline script). App and
Website share one tab since the mobile app isn't built yet and the two
mocks were already always shown together underneath it. */
.preview-tab {
padding: 0.3125rem 0.625rem;
font-family: var(--font-display);
@@ -1815,6 +1816,7 @@
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-muted);
cursor: pointer;
}
.preview-tab-active {
@@ -2045,4 +2047,58 @@
.preview-brand-dot-neutral {
background: var(--color-dim);
}
/* The Email tab -- a generic sample, not any one real message. Shaped like
templates/email/_base.html's actual output (plain white header with a
coloured crest badge, a primary-coloured button in the body) rather than
the phone/website mocks' solid colour bar: that's genuinely how every
branded email (club/templates/club/email/*.html, members/.../claim_approved.html)
looks, so this preview is accurate, not another approximation. */
.preview-email {
overflow: hidden;
border: 1px solid var(--color-line);
border-radius: 0.625rem;
}
.preview-email-header {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 0.75rem;
background: #fff;
border-bottom: 1px solid var(--color-line);
}
.preview-email-crest {
transition: background-color 0.15s ease, color 0.15s ease;
}
.preview-email-name {
font-family: var(--font-display);
font-size: 0.8125rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-ink);
}
.preview-email-body {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.875rem 0.75rem;
}
.preview-email-button {
align-self: flex-start;
border-radius: 0.25rem;
padding: 0.3125rem 0.75rem;
margin: 0.125rem 0;
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: background-color 0.15s ease, color 0.15s ease;
}
}