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

Rework the Live preview to match D9's actual screenshot

Browse Source 
Replaces the earlier sidebar+small-phone mock with D9's real layout: App/
Website/Email tabs (App is the only one with real content, so these are
static labels not a working control), a full-size phone mock, and a public-
site mock, plus the "Where the brand shows up" list. The phone's "Next up"
card now uses primary, not secondary -- it's a notice, not a call to action,
so it shouldn't compete visually with an actual accent-coloured button.

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 09:19:23 +02:00
parent 59d1fce674
commit 224a3fe4ed
4 changed files with 176 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
assets/management.css
View File

@@ -1804,30 +1804,29 @@
background: var(--color-paper);
}
.preview-frame {
display: flex;
height: 220px;
overflow: hidden;
border: 1px solid var(--color-line);
border-radius: var(--radius-box);
/* 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. */
.preview-tab {
padding: 0.3125rem 0.625rem;
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-muted);
}
.preview-sidebar {
display: flex;
width: 40%;
flex-shrink: 0;
flex-direction: column;
gap: 0.5rem;
padding: 0.75rem;
.preview-tab-active {
background: var(--color-ink);
color: #fff;
transition: background-color 0.15s ease, color 0.15s ease;
}
.preview-crest {
display: flex;
width: 1.5rem;
height: 1.5rem;
flex-shrink: 0;
align-items: center;
justify-content: center;
border-radius: 0.25rem;
@@ -1837,65 +1836,6 @@
font-weight: 800;
}
.preview-club-name {
margin-bottom: 0.25rem;
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: 0.9;
}
.preview-nav-item {
border-radius: 0.375rem;
padding: 0.375rem 0.5rem;
font-size: 0.6875rem;
opacity: 0.75;
}
.preview-nav-active {
opacity: 1;
font-weight: 700;
background: var(--color-club);
color: #fff;
transition: background-color 0.15s ease, color 0.15s ease;
}
.preview-panel {
display: flex;
flex: 1;
flex-direction: column;
gap: 0.625rem;
padding: 1rem;
background: var(--color-paper);
}
.preview-panel-heading {
font-family: var(--font-display);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-ink);
}
.preview-button {
align-self: flex-start;
border: none;
border-radius: var(--radius-box);
padding: 0.375rem 0.875rem;
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
background: var(--color-club);
color: #fff;
cursor: default;
transition: background-color 0.15s ease, color 0.15s ease;
}
.preview-skeleton-line {
height: 0.5rem;
border-radius: 999px;
@@ -1906,11 +1846,13 @@
width: 60%;
}
/* The mobile app mock -- not built yet, but its header/role-switcher take
the same primary/secondary colours the sidebar mock above does, so this
preview stays accurate once it exists rather than needing a rework. */
.preview-phone {
width: 11rem;
/* The mobile app mock -- not built yet, but its header/role-switcher/
"Next up" card take the same primary/secondary colours a real one
would, so this preview stays accurate once it exists. Sized closer to
an actual phone aspect ratio (tall, mostly-empty screen below the
first couple of cards) rather than a cropped sliver. */
.preview-phone-lg {
width: 12.5rem;
flex-shrink: 0;
overflow: hidden;
border: 5px solid var(--color-ink);
@@ -1918,6 +1860,10 @@
background: var(--color-paper);
}
.preview-phone-lg .preview-phone-body {
min-height: 15rem;
}
.preview-phone-header {
padding: 0.75rem 0.625rem 0.625rem;
background: var(--color-ink);
@@ -1985,7 +1931,7 @@
.preview-phone-card {
border-radius: 0.5rem;
padding: 0.5rem;
background: var(--color-club);
background: var(--color-ink);
color: #fff;
transition: background-color 0.15s ease, color 0.15s ease;
}
@@ -2021,4 +1967,82 @@
padding: 0.5rem;
background: #fff;
}
/* The public-site mock -- same "not built yet, but coloured accurately"
reasoning as the phone mock above. */
.preview-website {
overflow: hidden;
border: 1px solid var(--color-line);
border-radius: 0.625rem;
}
.preview-website-header {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 0.75rem;
background: var(--color-ink);
color: #fff;
transition: background-color 0.15s ease, color 0.15s ease;
}
.preview-website-name {
font-family: var(--font-display);
font-size: 0.8125rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.preview-website-nav {
margin-left: auto;
font-family: var(--font-display);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-on-dark);
}
.preview-website-join {
border-radius: 0.25rem;
padding: 0.1875rem 0.4375rem;
background: var(--color-club);
color: #fff;
font-family: var(--font-display);
font-size: 0.625rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: background-color 0.15s ease, color 0.15s ease;
}
.preview-website-hero {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.875rem 0.75rem;
background: var(--color-subhead);
}
.preview-website-headline {
font-family: var(--font-display);
font-size: 1.375rem;
line-height: 0.98;
font-weight: 800;
text-transform: uppercase;
color: var(--color-ink);
}
.preview-brand-dot {
width: 0.5rem;
height: 0.5rem;
flex-shrink: 0;
border-radius: 0.125rem;
background: var(--color-club);
}
.preview-brand-dot-neutral {
background: var(--color-dim);
}
}