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

refactor(primary): move gender split out of header into Pupils & Inclusion
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 12s
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 12s
Details
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s
Details

Browse Source 
Header "Pupils" line reverts to plain inline text matching Headteacher
and website weight. Gender split lives in Pupils & Inclusion as a card
alongside pupil premium / EAL / SEN support — peers of similar weight.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Tudor Sitaru
2026-04-17 22:52:59 +01:00
parent 675601869b
commit 1fb4b3ec5e
2 changed files with 72 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nextjs-app/components/SchoolDetailView.module.css
+26 -63
View File
@@ -83,95 +83,58 @@
text-decoration: underline;
}
/* Pupils block — the "Pupils: N" inline text is upgraded to a richer
display whenever we have census gender data and the school is Mixed. */
.pupilsBlock {
display: inline-flex;
align-items: center;
gap: 0.7rem;
padding: 0.3rem 0.65rem 0.3rem 0.4rem;
background: rgba(243, 237, 228, 0.5);
border-radius: 10px;
}
.pupilsFigure {
font-family: var(--font-playfair), 'Playfair Display', serif;
font-size: 1.6rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.01em;
color: var(--text-primary, #1a1612);
}
.pupilsInfo {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 140px;
}
.pupilsLegend {
font-size: 0.72rem;
color: var(--text-muted, #6d685f);
font-weight: 500;
line-height: 1;
}
.pupilsCapacity {
color: var(--text-muted, #6d685f);
}
.pupilsSplitRow {
/* Gender split card — sits in the Pupils & Inclusion heroStatGrid */
.genderSplitValue {
display: flex;
align-items: baseline;
gap: 0.35rem;
font-size: 0.75rem;
font-weight: 600;
gap: 0.3rem;
font-family: var(--font-playfair), "Playfair Display", Georgia, serif;
font-size: 1.55rem;
font-weight: 700;
line-height: 1;
flex-wrap: wrap;
}
.pupilsSplitGirls {
.genderSplitGirls {
color: #b45778;
}
.pupilsSplitBoys {
.genderSplitBoys {
color: var(--accent-teal, #2d7d7d);
}
.pupilsSplitSep {
color: var(--border-color, #e5dfd5);
font-weight: 400;
.genderSplitLabel {
font-family: var(--font-body, inherit);
font-size: 0.78rem;
font-weight: 500;
color: var(--text-muted, #6d685f);
letter-spacing: 0;
}
.pupilsBar {
.genderSplitSep {
color: var(--border-color, #c8beb0);
font-weight: 400;
font-size: 1.2rem;
padding: 0 0.1rem;
}
.genderBar {
display: flex;
height: 4px;
height: 6px;
border-radius: 999px;
overflow: hidden;
background: var(--border-color, #e5dfd5);
width: 100%;
min-width: 140px;
}
.pupilsBarGirls {
.genderBarGirls {
background: #b45778;
}
.pupilsBarBoys {
.genderBarBoys {
background: var(--accent-teal, #2d7d7d);
}
@media (max-width: 640px) {
.pupilsBlock {
display: flex;
width: 100%;
}
.pupilsInfo {
flex: 1;
min-width: 0;
}
}
.actions {
display: flex;
gap: 0.5rem;