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

feat(ui): add phase indicators to school list rows
All checks were successful
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 49s
Details
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 11s
Details
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s
Details

Browse Source 
Add coloured left-border and phase label pill to visually differentiate
school phases (Primary, Secondary, All-through, Post-16, Nursery) in
search result lists. Colours are accessible (WCAG AA) and don't clash
with existing Ofsted/trend semantic colours.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Tudor Sitaru
2026-04-01 15:47:51 +01:00
parent cacbeeb068
commit 4db36b9099
6 changed files with 92 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
nextjs-app/components/SecondarySchoolRow.module.css
View File

@@ -12,10 +12,14 @@
}
.row:hover {
border-left-color: var(--accent-coral, #e07256);
box-shadow: 0 2px 8px rgba(26, 22, 18, 0.06);
}
/* Phase border colours */
.phaseSecondary { border-left-color: var(--phase-secondary, #9b6bb0); }
.phaseAllThrough { border-left-color: var(--phase-all-through, #7a9a6d); }
.phasePost16 { border-left-color: var(--phase-post16, #c4915e); }
.rowInCompare {
border-left-color: var(--accent-teal, #2d7d7d);
background: var(--bg-secondary, #f3ede4);
@@ -144,6 +148,21 @@
border-radius: 3px;
}
/* Phase label pill */
.phaseLabel {
display: inline-block;
padding: 0.0625rem 0.375rem;
font-size: 0.6875rem;
font-weight: 600;
border-radius: 3px;
white-space: nowrap;
margin-right: 0.25rem;
}
.phaseLabelSecondary { background: var(--phase-secondary-bg); color: var(--phase-secondary-text); }
.phaseLabelAllThrough { background: var(--phase-all-through-bg); color: var(--phase-all-through-text); }
.phaseLabelPost16 { background: var(--phase-post16-bg); color: var(--phase-post16-text); }
.provisionTag {
display: inline-block;
padding: 0.0625rem 0.375rem;