tudor/school_compare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(sats): restyle RWM hero cards to match approved mockup
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 13s
Details
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 48s
Details
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 13s
Details
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s
Details

Browse Source 
Top two combined cards now use a teal-tinted background with a
2.1rem Playfair serif teal value and a compact uppercase label —
consistent with the hero treatment shown in the design mockup.
Scoped via new .rwmHero* classes so other metric cards on the page
keep their existing style.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Tudor Sitaru
2026-04-14 14:01:45 +01:00
parent a27b9abd9f
commit 34cd8ad26e
2 changed files with 744 additions and 647 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nextjs-app/components/SchoolDetailView.module.css
+123 -26
View File
@@ -32,7 +32,7 @@
margin-bottom: 0.5rem;
line-height: 1.1;
letter-spacing: -0.01em;
font-family: var(--font-playfair), 'Playfair Display', serif;
font-family: var(--font-playfair), "Playfair Display", serif;
}
.meta {
@@ -125,7 +125,7 @@
/* ── Sticky Section Navigation ──────────────────────── */
.sectionNav {
position: sticky;
top: 3.5rem;
top: 4rem;
z-index: 10;
background: var(--bg-card, white);
border: 1px solid var(--border-color, #e5dfd5);
@@ -228,7 +228,7 @@
margin-bottom: 0.875rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--border-color, #e5dfd5);
font-family: var(--font-playfair), 'Playfair Display', serif;
font-family: var(--font-playfair), "Playfair Display", serif;
display: flex;
align-items: center;
gap: 0.375rem;
@@ -236,7 +236,7 @@
}
.sectionTitle::before {
content: '';
content: "";
display: inline-block;
width: 3px;
height: 1em;
@@ -323,6 +323,67 @@
font-style: italic;
}
/* ── RWM hero cards (combined + exceeding) ── */
.rwmHeroGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
margin-bottom: 0.25rem;
}
.rwmHeroCard {
background: var(--accent-teal-bg, rgba(45, 125, 125, 0.12));
border: 1px solid rgba(45, 125, 125, 0.2);
border-radius: 12px;
padding: 1rem 1.1rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
text-align: left;
}
.rwmHeroLabel {
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted, #6d685f);
display: flex;
align-items: center;
gap: 0.3rem;
line-height: 1.3;
}
.rwmHeroValue {
font-family: var(--font-playfair), "Playfair Display", Georgia, serif;
font-size: 2.1rem;
font-weight: 700;
line-height: 1;
color: var(--accent-teal, #2d7d7d);
display: flex;
align-items: baseline;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: flex-start;
}
.rwmHeroHint {
font-size: 0.7rem;
color: var(--text-muted, #6d685f);
font-style: normal;
margin-top: 0;
}
@media (max-width: 480px) {
.rwmHeroGrid {
grid-template-columns: 1fr;
}
.rwmHeroValue {
font-size: 1.85rem;
}
}
/* Progress score colour coding */
.progressPositive {
color: var(--accent-teal, #2d7d7d);
@@ -491,17 +552,44 @@
white-space: nowrap;
}
.ofstedGrade1 { background: var(--accent-teal-bg); color: var(--accent-teal, #2d7d7d); }
.ofstedGrade2 { background: rgba(60, 140, 60, 0.12); color: #3c8c3c; }
.ofstedGrade3 { background: var(--accent-gold-bg); color: #b8920e; }
.ofstedGrade4 { background: var(--accent-coral-bg); color: var(--accent-coral, #e07256); }
.ofstedGrade1 {
background: var(--accent-teal-bg);
color: var(--accent-teal, #2d7d7d);
}
.ofstedGrade2 {
background: rgba(60, 140, 60, 0.12);
color: #3c8c3c;
}
.ofstedGrade3 {
background: var(--accent-gold-bg);
color: #b8920e;
}
.ofstedGrade4 {
background: var(--accent-coral-bg);
color: var(--accent-coral, #e07256);
}
/* Report Card grade colours (5-level scale, lower = better) */
.rcGrade1 { background: var(--accent-teal-bg); color: var(--accent-teal, #2d7d7d); } /* Exceptional */
.rcGrade2 { background: rgba(60, 140, 60, 0.12); color: #3c8c3c; } /* Strong */
.rcGrade3 { background: var(--accent-gold-bg); color: #b8920e; } /* Expected standard */
.rcGrade4 { background: rgba(249, 115, 22, 0.12); color: #c2410c; } /* Needs attention */
.rcGrade5 { background: var(--accent-coral-bg); color: var(--accent-coral, #e07256); } /* Urgent improvement */
.rcGrade1 {
background: var(--accent-teal-bg);
color: var(--accent-teal, #2d7d7d);
} /* Exceptional */
.rcGrade2 {
background: rgba(60, 140, 60, 0.12);
color: #3c8c3c;
} /* Strong */
.rcGrade3 {
background: var(--accent-gold-bg);
color: #b8920e;
} /* Expected standard */
.rcGrade4 {
background: rgba(249, 115, 22, 0.12);
color: #c2410c;
} /* Needs attention */
.rcGrade5 {
background: var(--accent-coral-bg);
color: var(--accent-coral, #e07256);
} /* Urgent improvement */
/* Safeguarding value (used inside a standard metricCard) */
.safeguardingMet {
@@ -664,7 +752,6 @@
font-style: italic;
}
/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
.headerContent {
@@ -786,11 +873,21 @@
/* Hero tone scheme — independent of the .ofstedGrade{N} / .rcGrade{N} badges
so the same tone class can be applied to a chip (background tint + border)
or a serif number (colour only) without one bleeding into the other. */
.tone-teal { --hero-tone: var(--accent-teal, #2d7d7d); }
.tone-green { --hero-tone: #3c8c3c; }
.tone-gold { --hero-tone: var(--accent-gold, #c9a227); }
.tone-coral { --hero-tone: var(--accent-coral, #e07256); }
.tone-neutral { --hero-tone: var(--text-muted, #8a847a); }
.tone-teal {
--hero-tone: var(--accent-teal, #2d7d7d);
}
.tone-green {
--hero-tone: #3c8c3c;
}
.tone-gold {
--hero-tone: var(--accent-gold, #c9a227);
}
.tone-coral {
--hero-tone: var(--accent-coral, #e07256);
}
.tone-neutral {
--hero-tone: var(--text-muted, #8a847a);
}
.heroChip.tone-teal,
.heroChip.tone-green,
@@ -825,7 +922,7 @@
.heroStatNumber,
.heroStatNumberSerif {
font-family: var(--font-playfair), 'Playfair Display', serif;
font-family: var(--font-playfair), "Playfair Display", serif;
font-weight: 700;
line-height: 1;
color: var(--text-primary, #1a1612);
@@ -918,7 +1015,7 @@
justify-content: center;
font-weight: 700;
font-size: 0.8rem;
font-family: var(--font-playfair), 'Playfair Display', Georgia, serif;
font-family: var(--font-playfair), "Playfair Display", Georgia, serif;
margin-top: 0.05rem;
}
@@ -943,7 +1040,7 @@
gap: 0.35rem;
margin-top: 0.35rem;
flex-wrap: wrap;
font-family: var(--font-playfair), 'Playfair Display', Georgia, serif;
font-family: var(--font-playfair), "Playfair Display", Georgia, serif;
color: var(--text-muted, #6d685f);
font-size: 0.78rem;
font-style: italic;
@@ -1025,7 +1122,7 @@
}
.admissionsQaAnswer {
font-family: var(--font-playfair), 'Playfair Display', Georgia, serif;
font-family: var(--font-playfair), "Playfair Display", Georgia, serif;
font-size: 1.4rem;
font-weight: 700;
color: var(--text-primary, #1a1612);
@@ -1041,7 +1138,7 @@
font-weight: 500;
color: var(--text-muted, #6d685f);
margin-left: 0.35rem;
font-family: var(--font-dm-sans), 'DM Sans', sans-serif;
font-family: var(--font-dm-sans), "DM Sans", sans-serif;
}
.admissionsVerdict {
@@ -1050,7 +1147,7 @@
}
.admissionsVerdictHeadline {
font-family: var(--font-playfair), 'Playfair Display', Georgia, serif;
font-family: var(--font-playfair), "Playfair Display", Georgia, serif;
font-size: 1.35rem;
font-weight: 700;
line-height: 1.2;
@@ -1107,7 +1204,7 @@
}
.historyToggle::before {
content: '▸';
content: "▸";
display: inline-block;
transition: transform 0.2s ease;
font-size: 0.7rem;
nextjs-app/components/SchoolDetailView.tsx
+9 -9
View File
@@ -515,14 +515,14 @@ export function SchoolDetailView({
{/* ── Primary / KS2 content ── */}
{hasKS2Results && (
<>
<div className={styles.metricsGrid}>
<div className={styles.rwmHeroGrid}>
{latestResults.rwm_expected_pct !== null && (
<div className={styles.metricCard}>
<div className={styles.metricLabel}>
<div className={styles.rwmHeroCard}>
<div className={styles.rwmHeroLabel}>
Reading, Writing &amp; Maths combined
<MetricTooltip metricKey="rwm_expected_pct" />
</div>
<div className={styles.metricValue}>
<div className={styles.rwmHeroValue}>
{formatPercentage(latestResults.rwm_expected_pct)}
{primaryAvg.rwm_expected_pct != null && (
<DeltaChip
@@ -534,17 +534,17 @@ export function SchoolDetailView({
)}
</div>
{primaryAvg.rwm_expected_pct != null && (
<div className={styles.metricHint}>National avg: {primaryAvg.rwm_expected_pct.toFixed(0)}%</div>
<div className={styles.rwmHeroHint}>National avg: {primaryAvg.rwm_expected_pct.toFixed(0)}%</div>
)}
</div>
)}
{latestResults.rwm_high_pct !== null && (
<div className={styles.metricCard}>
<div className={styles.metricLabel}>
<div className={styles.rwmHeroCard}>
<div className={styles.rwmHeroLabel}>
Exceeding expected level (Reading, Writing &amp; Maths)
<MetricTooltip metricKey="rwm_high_pct" />
</div>
<div className={styles.metricValue}>
<div className={styles.rwmHeroValue}>
{formatPercentage(latestResults.rwm_high_pct)}
{primaryAvg.rwm_high_pct != null && (
<DeltaChip
@@ -556,7 +556,7 @@ export function SchoolDetailView({
)}
</div>
{primaryAvg.rwm_high_pct != null && (
<div className={styles.metricHint}>National avg: {primaryAvg.rwm_high_pct.toFixed(0)}%</div>
<div className={styles.rwmHeroHint}>National avg: {primaryAvg.rwm_high_pct.toFixed(0)}%</div>
)}
</div>
)}