diff --git a/assets/management.css b/assets/management.css index 395207b..1bdd183 100644 --- a/assets/management.css +++ b/assets/management.css @@ -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; + } } diff --git a/management/templates/management/club_settings.html b/management/templates/management/club_settings.html index 581cbd1..9291bbb 100644 --- a/management/templates/management/club_settings.html +++ b/management/templates/management/club_settings.html @@ -9,14 +9,16 @@ closely for the Colours card (merged swatch+hex row, side-by-side contrast-check boxes) and the Logo card (dashed drop zone) -- markup pulled straight from the design canvas (RosterChief Platform.dc.html), - not the prose summary. The live preview is scoped to surfaces that are - (or will genuinely be) this app rather than D9's aspirational App/ - Website/Email tabs: the sidebar mock is what primary_color/secondary_color - affect today (base.html's --tenant-* custom properties); the phone mock - is the same colours applied ahead of the mobile app being built. The - colour math (content colour, contrast ratio) mirrors - Club._content_color_for exactly, so what's shown is the real number the - server computes on save, not an approximation. + not the prose summary. The live preview has two tabs rather than D9's + three: App and Website are merged into one (they were always shown + together anyway, and the mobile app isn't built yet -- the phone mock + is the same colours applied ahead of it existing); Email is real and + functional, a generic sample shaped like the actual branded emails this + app sends (club/templates/club/email/*.html, members/.../claim_approved.html), + not a preview of any one specific message. The colour math (content + colour, contrast ratio) mirrors Club._content_color_for exactly, so + what's shown is the real number the server computes on save, not an + approximation. {% endcomment %} {% block panel_title %}{% trans "Club identity" %}{% endblock panel_title %} @@ -118,61 +120,76 @@