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
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 49s
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 11s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s
All checks were successful
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 12s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 49s
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 11s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s
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:
@@ -11,7 +11,7 @@
|
||||
'use client';
|
||||
|
||||
import type { School } from '@/lib/types';
|
||||
import { schoolUrl } from '@/lib/utils';
|
||||
import { getPhaseStyle, schoolUrl } from '@/lib/utils';
|
||||
import styles from './SecondarySchoolRow.module.css';
|
||||
|
||||
const OFSTED_LABELS: Record<number, string> = {
|
||||
@@ -58,6 +58,7 @@ export function SecondarySchoolRow({
|
||||
}
|
||||
};
|
||||
|
||||
const phase = getPhaseStyle(school.phase);
|
||||
const att8 = school.attainment_8_score ?? null;
|
||||
const laDelta =
|
||||
att8 != null && laAvgAttainment8 != null ? att8 - laAvgAttainment8 : null;
|
||||
@@ -67,7 +68,7 @@ export function SecondarySchoolRow({
|
||||
const showGender = school.gender && school.gender.toLowerCase() !== 'mixed';
|
||||
|
||||
return (
|
||||
<div className={`${styles.row} ${isInCompare ? styles.rowInCompare : ''}`}>
|
||||
<div className={`${styles.row} ${phase.key ? styles[`phase${phase.key}`] : ''} ${isInCompare ? styles.rowInCompare : ''}`}>
|
||||
{/* Left: four content lines */}
|
||||
<div className={styles.rowContent}>
|
||||
|
||||
@@ -90,6 +91,11 @@ export function SecondarySchoolRow({
|
||||
|
||||
{/* Line 2: Context tags */}
|
||||
<div className={styles.line2}>
|
||||
{phase.label && (
|
||||
<span className={`${styles.phaseLabel} ${styles[`phaseLabel${phase.key}`]}`}>
|
||||
{phase.label}
|
||||
</span>
|
||||
)}
|
||||
{school.school_type && <span>{school.school_type}</span>}
|
||||
{school.age_range && <span>{school.age_range}</span>}
|
||||
{showGender && (
|
||||
|
||||
Reference in New Issue
Block a user