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
+735 -638
View File
File diff suppressed because it is too large Load Diff
nextjs-app/components/SchoolDetailView.tsx
+9 -9
View File
@@ -515,14 +515,14 @@ export function SchoolDetailView({
{/* ── Primary / KS2 content ── */} {/* ── Primary / KS2 content ── */}
{hasKS2Results && ( {hasKS2Results && (
<> <>
<div className={styles.metricsGrid}> <div className={styles.rwmHeroGrid}>
{latestResults.rwm_expected_pct !== null && ( {latestResults.rwm_expected_pct !== null && (
<div className={styles.metricCard}> <div className={styles.rwmHeroCard}>
<div className={styles.metricLabel}> <div className={styles.rwmHeroLabel}>
Reading, Writing &amp; Maths combined Reading, Writing &amp; Maths combined
<MetricTooltip metricKey="rwm_expected_pct" /> <MetricTooltip metricKey="rwm_expected_pct" />
</div> </div>
<div className={styles.metricValue}> <div className={styles.rwmHeroValue}>
{formatPercentage(latestResults.rwm_expected_pct)} {formatPercentage(latestResults.rwm_expected_pct)}
{primaryAvg.rwm_expected_pct != null && ( {primaryAvg.rwm_expected_pct != null && (
<DeltaChip <DeltaChip
@@ -534,17 +534,17 @@ export function SchoolDetailView({
)} )}
</div> </div>
{primaryAvg.rwm_expected_pct != null && ( {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> </div>
)} )}
{latestResults.rwm_high_pct !== null && ( {latestResults.rwm_high_pct !== null && (
<div className={styles.metricCard}> <div className={styles.rwmHeroCard}>
<div className={styles.metricLabel}> <div className={styles.rwmHeroLabel}>
Exceeding expected level (Reading, Writing &amp; Maths) Exceeding expected level (Reading, Writing &amp; Maths)
<MetricTooltip metricKey="rwm_high_pct" /> <MetricTooltip metricKey="rwm_high_pct" />
</div> </div>
<div className={styles.metricValue}> <div className={styles.rwmHeroValue}>
{formatPercentage(latestResults.rwm_high_pct)} {formatPercentage(latestResults.rwm_high_pct)}
{primaryAvg.rwm_high_pct != null && ( {primaryAvg.rwm_high_pct != null && (
<DeltaChip <DeltaChip
@@ -556,7 +556,7 @@ export function SchoolDetailView({
)} )}
</div> </div>
{primaryAvg.rwm_high_pct != null && ( {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> </div>
)} )}