TudorandClaude Opus 4.8
ce2bfea91b
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 13s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 54s
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 12s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s
A school inspected under the OEIF framework after September 2024 has an inspection on record (ofsted_date set) but no overall_effectiveness grade, since Ofsted no longer issues an overall judgement. buildOfstedListBadge had no branch for this and fell through to "Not yet inspected", while the detail page's hero chip correctly reported it as inspected — so the same school read two contradictory ways. Add an "Inspected · YYYY" branch that fires when an inspection is on record (date or framework present) but no grade and not a Report Card, mirroring the hero chip's fallback. Genuinely un-inspected schools (all Ofsted fields null) still show "Not yet inspected". Add an .ofstedInspected badge style (neutral slate) distinct from the grey pending state, and cover both cases with tests. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
251 lines
6.1 KiB
CSS
251 lines
6.1 KiB
CSS
.row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
background: var(--bg-card, white);
|
||
border: 1px solid var(--border-color, #e5dfd5);
|
||
border-left: 3px solid transparent;
|
||
border-radius: 8px;
|
||
padding: 1rem 1.25rem;
|
||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||
animation: rowFadeIn 0.3s ease-out both;
|
||
}
|
||
|
||
.row:hover {
|
||
box-shadow: 0 2px 8px rgba(26, 22, 18, 0.06);
|
||
}
|
||
|
||
/* Phase border colours */
|
||
.phasePrimary { border-left-color: var(--phase-primary, #5b8cbf); }
|
||
.phaseAllThrough { border-left-color: var(--phase-all-through, #7a9a6d); }
|
||
.phaseNursery { border-left-color: var(--phase-nursery, #e0a0b0); }
|
||
|
||
.rowInCompare {
|
||
border-left-color: var(--accent-teal, #2d7d7d);
|
||
background: var(--bg-secondary, #f3ede4);
|
||
}
|
||
|
||
@keyframes rowFadeIn {
|
||
from { opacity: 0; transform: translateY(6px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
/* ── Left content column ─────────────────────────────── */
|
||
.rowContent {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.35rem;
|
||
}
|
||
|
||
/* Line 1: name + ofsted */
|
||
.line1 {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 0.625rem;
|
||
min-width: 0;
|
||
}
|
||
|
||
.schoolName {
|
||
font-size: 0.9375rem;
|
||
font-weight: 600;
|
||
color: var(--text-primary, #1a1612);
|
||
text-decoration: none;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
flex-shrink: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.schoolName:hover {
|
||
color: var(--accent-coral, #e07256);
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
|
||
.phaseLabelPrimary { background: var(--phase-primary-bg); color: var(--phase-primary-text); }
|
||
.phaseLabelAllThrough { background: var(--phase-all-through-bg); color: var(--phase-all-through-text); }
|
||
.phaseLabelNursery { background: var(--phase-nursery-bg); color: var(--phase-nursery-text); }
|
||
|
||
/* Line 2: context tags */
|
||
.line2 {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 0;
|
||
font-size: 0.8rem;
|
||
color: var(--text-muted, #8a847a);
|
||
}
|
||
|
||
.line2 span:not(:last-child)::after {
|
||
content: '·';
|
||
margin: 0 0.4rem;
|
||
color: var(--border-color, #e5dfd5);
|
||
}
|
||
|
||
/* Line 3: stats */
|
||
.line3 {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 0 1.25rem;
|
||
}
|
||
|
||
.stat {
|
||
display: inline-flex;
|
||
align-items: baseline;
|
||
gap: 0.3rem;
|
||
}
|
||
|
||
.statValue {
|
||
font-size: 0.9375rem;
|
||
font-weight: 700;
|
||
color: var(--text-primary, #1a1612);
|
||
font-family: var(--font-playfair), 'Playfair Display', serif;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.2rem;
|
||
}
|
||
|
||
.statLabel {
|
||
font-size: 0.75rem;
|
||
color: var(--text-muted, #8a847a);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* Trend arrows */
|
||
.trend {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
margin-left: 1px;
|
||
}
|
||
|
||
.trendUp { color: var(--accent-teal, #2d7d7d); }
|
||
.trendDown { color: var(--accent-coral, #e07256); }
|
||
.trendStable { color: var(--text-muted, #8a847a); }
|
||
|
||
/* Line 4: location */
|
||
.line4 {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 0;
|
||
font-size: 0.8rem;
|
||
color: var(--text-muted, #8a847a);
|
||
}
|
||
|
||
.line4 span:not(:last-child)::after {
|
||
content: '·';
|
||
margin: 0 0.4rem;
|
||
color: var(--border-color, #e5dfd5);
|
||
}
|
||
|
||
.distanceBadge {
|
||
display: inline-block;
|
||
padding: 0.0625rem 0.375rem;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
background: var(--accent-teal, #2d7d7d);
|
||
color: white;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
/* ── Right actions column ────────────────────────────── */
|
||
.rowActions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Equalise <a> and <button> */
|
||
.rowActions > * {
|
||
height: 2rem;
|
||
line-height: 1;
|
||
font-family: inherit;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* ── Ofsted badge ────────────────────────────────────── */
|
||
.ofstedBadge {
|
||
display: inline-block;
|
||
padding: 0.0625rem 0.375rem;
|
||
font-size: 0.6875rem;
|
||
font-weight: 600;
|
||
border-radius: 3px;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.ofstedDate {
|
||
font-weight: 400;
|
||
}
|
||
|
||
.ofsted1 { background: var(--accent-teal-bg); color: var(--accent-teal, #2d7d7d); }
|
||
.ofsted2 { background: rgba(60, 140, 60, 0.12); color: #3c8c3c; }
|
||
.ofsted3 { background: var(--accent-gold-bg); color: #b8920e; }
|
||
.ofsted4 { background: var(--accent-coral-bg); color: var(--accent-coral, #e07256); }
|
||
|
||
/* ── Ofsted badge variants ──────────────────────────────────────────────── */
|
||
/* ofsted1–4 already defined above; these cover the two new framework states */
|
||
.ofstedRc { background: #5a3a6e; color: #fff; }
|
||
/* Inspected but with no overall grade (OEIF post-Sept-2024) — neutral slate,
|
||
distinct from the grey "Not yet inspected" pending state. */
|
||
.ofstedInspected { background: #e6ecf2; color: #45586b; }
|
||
.ofstedPending { background: #e0e0e0; color: #666; }
|
||
|
||
/* ── vs-national delta line (under RWM metric) ──────────────────────────── */
|
||
.vsNational { font-size: 0.7rem; color: var(--accent-teal, #2d7d7d); font-weight: 600; }
|
||
.vsNationalNeg { font-size: 0.7rem; color: var(--accent-coral, #e07256); font-weight: 600; }
|
||
.vsNationalFlat { font-size: 0.7rem; color: var(--text-muted, #8a847a); }
|
||
|
||
/* ── Mobile ──────────────────────────────────────────── */
|
||
@media (max-width: 640px) {
|
||
.row {
|
||
flex-wrap: wrap;
|
||
padding: 0.875rem;
|
||
gap: 0.625rem;
|
||
}
|
||
|
||
.rowContent {
|
||
flex-basis: 100%;
|
||
}
|
||
|
||
.schoolName {
|
||
white-space: normal;
|
||
}
|
||
|
||
/* Promote the headline metric onto its own line; secondary stats
|
||
(delta vs LA, pupils) wrap below with a visible row gap. */
|
||
.line3 {
|
||
row-gap: 0.25rem;
|
||
column-gap: 1rem;
|
||
}
|
||
.line3 > .stat:first-child {
|
||
flex-basis: 100%;
|
||
}
|
||
|
||
.rowActions {
|
||
width: 100%;
|
||
gap: 0.375rem;
|
||
}
|
||
|
||
.rowActions > * {
|
||
flex: 1;
|
||
justify-content: center;
|
||
}
|
||
}
|