TudorandClaude Opus 5.5
dff3e210ab
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m12s
PR Checks / Backend Smoke (pull_request) Successful in 10s
PR Checks / Build Backend (no push) (pull_request) Successful in 17s
PR Checks / Build Frontend (no push) (pull_request) Successful in 1m20s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 11s
PR Checks / AI Code Review (Claude) (pull_request) Successful in 20s
The list beside the map used its own cut-down card, so it showed less than the list view (no phase, age range, denomination, trend, local authority) and looked different. It now renders the list view's SchoolRow / SecondarySchoolRow, through one renderRow shared by the list view, the map pane and the phone's bottom sheet, which also gains Remove from compare. CompactSchoolItem and its styles are gone. The rows switched to their stacked layout on a max-width: 640px media query, which never fires in a ~430px pane on a desktop screen. It is now a container query on the list the row sits in (`results`, set on the list view, the map pane and the bottom sheet). 600px of list is a 632px screen less padding, so phones lay out as before. Clicking a row, outside its links and buttons, still picks its pin, and the selected row is outlined. The pane widens to 360–460px for the taller rows. The bottom sheet's close button was a 30px target; it is now 44px with the same 30px circle (MOBILE.md), and the phone journey checks it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
273 lines
6.9 KiB
CSS
273 lines
6.9 KiB
CSS
.row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
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(var(--shadow-rgb), 0.06);
|
||
}
|
||
|
||
/* Phase border colours */
|
||
.phasePrimary { border-left-color: var(--phase-primary); }
|
||
.phaseAllThrough { border-left-color: var(--phase-all-through); }
|
||
.phaseNursery { border-left-color: var(--phase-nursery); }
|
||
|
||
.rowInCompare {
|
||
border-left-color: var(--brand);
|
||
background: var(--bg-secondary);
|
||
}
|
||
|
||
@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);
|
||
text-decoration: none;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
flex-shrink: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.schoolName:hover {
|
||
color: var(--brand);
|
||
}
|
||
|
||
/* Phase label pill */
|
||
.phaseLabel {
|
||
display: inline-block;
|
||
padding: 0.0625rem 0.4rem;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
line-height: 1.4;
|
||
border-radius: 4px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.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.35rem;
|
||
}
|
||
|
||
/* Quiet chip — one shared size/weight for every attribute (Ages, faith, etc.);
|
||
the phase pill keeps its colour but matches this sizing. */
|
||
.attr {
|
||
display: inline-block;
|
||
padding: 0.0625rem 0.4rem;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
line-height: 1.4;
|
||
border-radius: 4px;
|
||
white-space: nowrap;
|
||
background: rgba(var(--shadow-rgb), 0.05);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* 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-variant-numeric: tabular-nums;
|
||
font-size: 0.9375rem;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
font-family: var(--font-display);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.2rem;
|
||
}
|
||
|
||
.statLabel {
|
||
font-size: 0.75rem;
|
||
color: var(--text-muted);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* Trend arrows */
|
||
.trend {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
margin-left: 1px;
|
||
}
|
||
|
||
.trendUp { color: var(--status-above); }
|
||
.trendDown { color: var(--status-below); }
|
||
.trendStable { color: var(--text-muted); }
|
||
|
||
/* Line 4: location */
|
||
.line4 {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 0;
|
||
font-size: 0.8rem;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.line4 span:not(:last-child)::after {
|
||
content: '·';
|
||
margin: 0 0.4rem;
|
||
color: var(--border);
|
||
}
|
||
|
||
.distanceBadge {
|
||
display: inline-block;
|
||
padding: 0.0625rem 0.375rem;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
background: var(--brand);
|
||
color: var(--brand-on);
|
||
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(--status-above-bg); color: var(--status-above); }
|
||
.ofsted2 { background: rgba(var(--status-above-rgb), 0.12); color: var(--status-above); }
|
||
.ofsted3 { background: var(--status-below-bg); color: var(--status-below); }
|
||
.ofsted4 { background: var(--status-below); color: var(--text-inverse); }
|
||
|
||
/* ── Ofsted badge variants ──────────────────────────────────────────────── */
|
||
/* ofsted1–4 already defined above; these cover the two new framework states */
|
||
.ofstedRc { background: var(--phase-secondary-text); color: var(--text-inverse); }
|
||
/* Inspected but with no overall grade (OEIF post-Sept-2024) — neutral slate,
|
||
distinct from the grey "Not yet inspected" pending state. */
|
||
.ofstedInspected { background: var(--phase-primary-bg); color: var(--phase-primary-text); }
|
||
.ofstedPending { background: var(--border); color: var(--text-muted); }
|
||
|
||
/* ── vs-national delta line (under RWM metric) ──────────────────────────── */
|
||
.vsNational { font-size: 0.7rem; color: var(--status-above); font-weight: 600; }
|
||
.vsNationalNeg { font-size: 0.7rem; color: var(--brand); font-weight: 600; }
|
||
.vsNationalFlat { font-size: 0.7rem; color: var(--text-muted); }
|
||
|
||
/* ── Mobile ──────────────────────────────────────────── */
|
||
/*
|
||
* Narrow: content full width, actions in a row beneath. Keyed to the list the
|
||
* row sits in, not the screen, because the same row fills the phone list and
|
||
* the ~400px list beside the map on desktop. HomeView makes both lists a
|
||
* `results` container; outside one, the row keeps its wide layout.
|
||
* 600px of list is a 632px screen less the page's padding, so phones behave
|
||
* as they did under the old max-width: 640px media query.
|
||
*/
|
||
@container results (max-width: 600px) {
|
||
.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;
|
||
}
|
||
}
|
||
|
||
/* GIAS "Open, but proposed to close" marker */
|
||
.attrClosing {
|
||
background: var(--status-below-bg);
|
||
color: var(--status-below);
|
||
border: 1px solid var(--status-below-bg);
|
||
}
|