TudorandClaude Opus 5
9a1f56c431
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m4s
PR Checks / Backend Smoke (pull_request) Successful in 9s
PR Checks / Build Backend (no push) (pull_request) Successful in 17s
PR Checks / Build Frontend (no push) (pull_request) Successful in 44s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 10s
PR Checks / AI Code Review (Claude) (pull_request) Successful in 2m44s
The location tables carried one column: a percentage. A parent shortlisting from a town page is asking a different question first — does it take my child's age, is it a faith school, does it have a nursery — and the page could not answer any of it. Primary tables gain Ages, Religious character, Nursery and Constituency; secondary tables the same minus Nursery, which is a question about a different intake. An all-through school renders in both groups, so its nursery shows under primary alone. The measure moves to the second column rather than the last. Six columns overflow a phone and .tableWrap turns that into a horizontal swipe; with the measure last, the one number the page exists for is the one scrolled off the screen. Cell rules are the ones the school page already uses, so the two surfaces cannot disagree about the same school: "Does not apply", "None" and "Not applicable" all read as no religious character, and the en-dash age normalisation moves into formatAgeSpan, which formatAgeRange now delegates to. Backend: nursery_provision and parliamentary_constituency were not in the place response. Both are optional GIAS mart columns that data_loader degrades to NULL, and the `in rows.columns` guard keeps a mart the pipeline has not rebuilt working. Also fixes a live bug on the same line: SCHOOL_COLUMNS already ends with latitude and longitude, and the endpoint concatenated them again, so pandas dropped one of every duplicated pair and warned "columns are not unique" on each request. Ordered de-duplication removes the warning and the silent drop. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FuPUioHpxtaiDNagQvjxyM
239 lines
5.3 KiB
CSS
239 lines
5.3 KiB
CSS
/* Tokens only — see globals.css. Follows RankingsView's conventions, and in
|
||
particular its link treatment: table links take --text-primary with no
|
||
underline and a brand-coloured hover, not the browser default. The first
|
||
cut used bare <Link> with no class at all, which rendered as default blue
|
||
underlined links and read as unstyled beside the rest of the site. */
|
||
.container {
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
.header {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.header h1 {
|
||
font-size: 2.25rem;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
margin-bottom: 0.5rem;
|
||
font-family: var(--font-display);
|
||
text-wrap: balance;
|
||
}
|
||
|
||
.summary {
|
||
font-size: 1rem;
|
||
color: var(--text-secondary);
|
||
margin: 0;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Links in running copy: brand colour, underline on hover only. */
|
||
.inlineLink {
|
||
color: var(--brand);
|
||
text-decoration: none;
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.inlineLink:hover {
|
||
color: var(--brand-strong);
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* Phase variants are separate indexable pages, so the bare place page has to
|
||
link them — a sitemap entry alone leaves them with no internal path in. */
|
||
.phaseLinks {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem 0.75rem;
|
||
margin: 0 0 1.25rem;
|
||
}
|
||
|
||
.phaseLink {
|
||
display: inline-block;
|
||
padding: 0.4rem 0.875rem;
|
||
border: 1px solid var(--border-strong);
|
||
border-radius: 999px;
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
color: var(--text-primary);
|
||
text-decoration: none;
|
||
transition: border-color 0.2s ease, color 0.2s ease;
|
||
}
|
||
|
||
.phaseLink:hover {
|
||
border-color: var(--brand);
|
||
color: var(--brand-strong);
|
||
}
|
||
|
||
/* The one number a list cannot give you, so it gets its own band. */
|
||
.compare {
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
padding: 0.875rem 1.125rem;
|
||
margin: 0 0 1.5rem;
|
||
color: var(--text-primary);
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.ofsted {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem 1.25rem;
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0 0 1.5rem;
|
||
font-size: 0.9375rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.group {
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.groupHeading {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 0.625rem;
|
||
font-size: 1.25rem;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
font-family: var(--font-display);
|
||
margin: 0 0 0.75rem;
|
||
}
|
||
|
||
.groupCount {
|
||
font-size: 0.8125rem;
|
||
font-weight: 500;
|
||
color: var(--text-secondary);
|
||
background: var(--bg-secondary);
|
||
border-radius: 999px;
|
||
padding: 0.125rem 0.5rem;
|
||
}
|
||
|
||
/* Wide content scrolls in its own container so the page body never does. */
|
||
.tableWrap {
|
||
overflow-x: auto;
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
background: var(--bg-card);
|
||
}
|
||
|
||
.table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 0.9375rem;
|
||
}
|
||
|
||
.table th,
|
||
.table td {
|
||
padding: 0.75rem 1rem;
|
||
text-align: left;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.table th {
|
||
background: var(--bg-secondary);
|
||
color: var(--text-secondary);
|
||
font-weight: 600;
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
.table tbody tr:last-child td {
|
||
border-bottom: none;
|
||
}
|
||
|
||
/*
|
||
* Header and value share one class and one rule, so they cannot drift apart.
|
||
*
|
||
* The first cut aligned them with two different selectors: `.table th:last-child`
|
||
* at (0,2,1) beat the element rule and went right, while `.num` at (0,1,0) lost
|
||
* to `.table td` at (0,1,1) and stayed left. The heading and its numbers sat on
|
||
* opposite edges of the column.
|
||
*
|
||
* width:1% with nowrap makes the measure column hug its content so the school
|
||
* name takes the remaining width — without it the two columns split evenly and
|
||
* the gap between heading and value reads as misalignment on a wide screen.
|
||
*/
|
||
.table th.num,
|
||
.table td.num {
|
||
text-align: right;
|
||
font-variant-numeric: tabular-nums;
|
||
width: 1%;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/*
|
||
* Attribute columns. Muted, because they qualify the row rather than compete
|
||
* with the measure for it, and hugging their content so the school name keeps
|
||
* the spare width — the same width:1% trick as .num, which is what stops six
|
||
* columns from splitting evenly and squeezing the names into two lines each.
|
||
*
|
||
* .attr never wraps: "4–11" and "Yes" broken across lines read as two values.
|
||
* .attrWide may — "Church of England" and some constituency names are long
|
||
* enough that forcing one line would push the measure off a phone screen.
|
||
*/
|
||
.table th.attr,
|
||
.table td.attr,
|
||
.table th.attrWide,
|
||
.table td.attrWide {
|
||
color: var(--text-secondary);
|
||
width: 1%;
|
||
}
|
||
|
||
.table th.attr,
|
||
.table td.attr {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.table th.attrWide,
|
||
.table td.attrWide {
|
||
min-width: 8rem;
|
||
}
|
||
|
||
/* The measure is spelled out; the tooltip carries the definition. */
|
||
.metricHead {
|
||
text-decoration: none;
|
||
cursor: help;
|
||
border-bottom: 1px dotted var(--border-strong);
|
||
}
|
||
|
||
/* Table links: site convention is body colour, brand on hover. */
|
||
.schoolLink {
|
||
color: var(--text-primary);
|
||
text-decoration: none;
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.schoolLink:hover {
|
||
color: var(--brand-strong);
|
||
}
|
||
|
||
/* "Not published" is a fact about the school, not an error. */
|
||
.noData {
|
||
color: var(--text-muted);
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
.neighbours {
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.neighbours h2 {
|
||
font-size: 1.125rem;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin: 0 0 0.75rem;
|
||
font-family: var(--font-display);
|
||
}
|
||
|
||
.neighbours ul {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem 1rem;
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|