TudorandClaude Opus 5
88c653215d
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m3s
PR Checks / Backend Smoke (pull_request) Successful in 7s
PR Checks / Build Backend (no push) (pull_request) Successful in 31s
PR Checks / Build Frontend (no push) (pull_request) Successful in 44s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 1m12s
PR Checks / AI Code Review (Claude) (pull_request) Failing after 2m7s
Adds the cut-off distance a parent actually asks about — "how close do we
need to live?" — end to end: a Singer tap, dbt staging and mart models, an
Airflow DAG, and a tile on both detail templates. 3,597 schools across 57
local authorities carry a figure; the rest are unchanged.
There is no national source for this. Each LA publishes its own cut-offs in
its own format, and the collected CSV is transcribed from PDFs, spreadsheets
and web pages — so most of the work here is deciding what is safe to show.
Data
* tap-uk-school-distance loads the CSV verbatim into raw. Keyed on
(urn, year, school_name), because school_name carries the admission
route: (urn, year) alone collides on 118 keys and a reload would have
silently dropped every band but one.
* stg_school_distance applies a 25 m – 25 km plausibility band. The source
contains 0.0-mile rows (published where a school filled on a higher
criterion), 1-metre cut-offs, and one reading 533 miles — ~4% of rows,
all of which would put a visibly wrong number on a live page.
* fact_admission_distance collapses routes to one row per school per year
using the furthest, and keeps route_count so the page can say the figure
is the widest of several bands rather than the one for a given child.
Serving
* Kept out of fact_admissions: that mart is EES-derived and near-complete
for England, this one covers 57 LAs, and the two refresh independently.
* Latest year only. Coverage is ragged — a school may have 2021 and 2026
and nothing between — so a history array would invite a trend line drawn
through gaps that are absences of publication, not of a cut-off.
* The Admissions section now renders on either source. 3% of the schools
that render have a cut-off and no EES admissions row, and gating on
admissions alone would have hidden the figure on those pages.
Interface
* The year travels with the figure everywhere it appears; a cut-off
detached from its admissions round is not a fact about anything.
* "Not a fixed catchment — it moves every year" sits under every instance,
because that is the inference a parent will otherwise draw.
* Replaces a hardcoded "Historical distance cut-off data is not available
for this school" that appeared on every secondary page, including the
ones whose council does publish it. The absence is now stated only when
it is real, and names the authority that would hold it.
The tint costs the muted tokens their AA margin: measured on the composited
backdrop (not the computed one, which reports the untinted card), --text-muted
falls to 4.09:1 in dark theme. The tile uses --text-secondary instead — 6.50:1
dark, 6.60:1 light.
The DAG is manual, like the other annual ones: councils publish on allocation
day, each on its own timetable, so there is no date worth scheduling against.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WDvkyqqHABm4bmth2kjAxE
592 lines
34 KiB
HTML
592 lines
34 KiB
HTML
<title>Last distance offered — detail page mockup</title>
|
||
<style>
|
||
:root{
|
||
--bg-primary:#faf7f2; --bg-secondary:#f3ede4; --bg-card:#fff;
|
||
--text-primary:#1a1612; --text-secondary:#5c564d; --text-muted:#6d685f;
|
||
--accent-coral:#e07256; --accent-coral-dark:#b04a2e;
|
||
--accent-teal:#296f6f; --accent-teal-light:#3a9e9e;
|
||
--accent-gold:#c9a227; --accent-gold-text:#7a6800;
|
||
--coral-bg:rgba(224,114,86,.12); --teal-bg:rgba(45,125,125,.12); --gold-bg:rgba(201,162,39,.12);
|
||
--border:#e5dfd5; --shadow:0 2px 8px rgba(26,22,18,.06); --shadow-md:0 4px 20px rgba(26,22,18,.1);
|
||
--radius-sm:4px; --radius-md:8px; --radius-lg:16px;
|
||
--serif:'Playfair Display',Georgia,'Iowan Old Style',serif;
|
||
--sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
|
||
}
|
||
/* Mockup is a fixed light artefact — it mirrors the live app, which is light-only. */
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
body{font-family:var(--sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;
|
||
padding:44px 20px 110px;font-variant-numeric:tabular-nums}
|
||
.wrap{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:0}
|
||
|
||
.pagehead h1{font-family:var(--serif);font-weight:600;font-size:clamp(26px,4vw,34px);letter-spacing:-.015em;text-wrap:balance}
|
||
.pagehead p{color:var(--text-secondary);margin-top:10px;font-size:15px;max-width:64ch}
|
||
.pagehead p + p{margin-top:8px}
|
||
|
||
.step{margin:60px 0 6px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
|
||
.step h2{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:-.01em}
|
||
.step .where{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-teal);
|
||
background:var(--teal-bg);padding:3px 9px;border-radius:999px}
|
||
.stepdesc{color:var(--text-muted);font-size:14px;margin-bottom:18px;max-width:66ch}
|
||
.stepdesc code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;background:var(--bg-secondary);padding:1px 5px;border-radius:var(--radius-sm)}
|
||
|
||
/* ---- card shell mirrors SchoolDetailView .card ---- */
|
||
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
|
||
box-shadow:var(--shadow);padding:26px 26px 24px}
|
||
.cardhead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
|
||
.sectionTitle{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:-.01em}
|
||
.sectionSub{color:var(--text-secondary);font-size:14px;margin-bottom:18px}
|
||
|
||
.seg{display:inline-flex;background:var(--bg-secondary);border-radius:999px;padding:3px;gap:2px;flex:none}
|
||
.seg button{appearance:none;border:none;background:none;cursor:pointer;font:inherit;font-size:13px;font-weight:600;
|
||
color:var(--text-muted);padding:6px 13px;border-radius:999px;white-space:nowrap;transition:background .15s,color .15s}
|
||
.seg button[aria-pressed="true"]{background:var(--bg-card);color:var(--text-primary);box-shadow:var(--shadow)}
|
||
.seg button:focus-visible{outline:2px solid var(--accent-teal);outline-offset:2px}
|
||
|
||
/* ---- tiles ---- */
|
||
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:10px;margin-top:4px}
|
||
.tile{background:var(--bg-secondary);border-radius:var(--radius-md);padding:14px 15px 13px}
|
||
.tile .num{font-family:var(--serif);font-size:27px;font-weight:600;line-height:1.15;letter-spacing:-.01em;display:block}
|
||
.tile .num .unit{font-family:var(--sans);font-size:15px;font-weight:600;margin-left:2px}
|
||
.tile .num .sub{display:block;font-family:var(--sans);font-size:12.5px;font-weight:400;color:var(--text-muted);margin-top:1px}
|
||
.tile .lbl{display:block;font-size:12.5px;color:var(--text-secondary);margin-top:5px;line-height:1.35}
|
||
.tile.accent{background:var(--coral-bg)}
|
||
.tile.accent .num{color:var(--accent-coral-dark)}
|
||
.tile.newtile{background:var(--coral-bg);box-shadow:inset 0 0 0 1.5px var(--accent-coral)}
|
||
.tile.newtile .num{color:var(--accent-coral-dark)}
|
||
.newflag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
|
||
color:var(--accent-coral-dark);background:rgba(224,114,86,.2);padding:1px 6px;border-radius:999px;margin-bottom:6px}
|
||
|
||
/* ---- verdict banner ---- */
|
||
.verdict{display:flex;gap:13px;align-items:flex-start;padding:15px 17px;border-radius:var(--radius-md);margin:2px 0 20px}
|
||
.verdict.hard{background:var(--coral-bg)}
|
||
.verdict .vic{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-top:1px;
|
||
background:var(--accent-coral-dark);color:#fff;font-size:12px;font-weight:700}
|
||
.verdict .vhead{font-weight:700;font-size:16.5px;letter-spacing:-.01em;color:var(--accent-coral-dark);text-wrap:balance}
|
||
.verdict .vsub{color:var(--text-secondary);font-size:13.5px;margin-top:3px}
|
||
|
||
/* ---- chart ---- */
|
||
.chartwrap{overflow-x:auto}
|
||
.chart{display:block;width:100%;min-width:460px;height:auto}
|
||
.axtxt{font-family:var(--sans);font-size:11px;fill:var(--text-muted)}
|
||
.ptlbl{font-family:var(--sans);font-size:12px;font-weight:700;fill:var(--accent-coral-dark)}
|
||
.keyrow{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:12.5px;color:var(--text-secondary)}
|
||
.keyrow span{display:inline-flex;align-items:center;gap:7px}
|
||
.kdot{width:11px;height:11px;border-radius:50%;flex:none}
|
||
.kdot.line{background:var(--accent-coral)}
|
||
.kdot.open{background:#fff;box-shadow:inset 0 0 0 2px var(--accent-teal)}
|
||
.kdot.gap{background:repeating-linear-gradient(90deg,var(--text-muted) 0 2px,transparent 2px 4px);border-radius:0;height:2px}
|
||
|
||
/* ---- table ---- */
|
||
.tblwrap{overflow-x:auto;margin-top:4px}
|
||
table{width:100%;border-collapse:collapse;font-size:14px;min-width:420px}
|
||
thead th{text-align:right;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
|
||
color:var(--text-muted);padding:0 10px 9px;border-bottom:1px solid var(--border)}
|
||
thead th:first-child{text-align:left}
|
||
tbody td{text-align:right;padding:11px 10px;border-bottom:1px solid var(--border)}
|
||
tbody td:first-child{text-align:left;font-weight:600}
|
||
tbody tr:last-child td{border-bottom:none}
|
||
tbody tr.now{background:var(--bg-secondary)}
|
||
td.miss{color:var(--text-muted);font-weight:400}
|
||
.pill{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap}
|
||
.pill.over{background:var(--coral-bg);color:var(--accent-coral-dark)}
|
||
.pill.ok{background:var(--teal-bg);color:var(--accent-teal)}
|
||
.pill.na{background:var(--bg-secondary);color:var(--text-muted)}
|
||
|
||
/* ---- map ---- */
|
||
.mapfig{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);background:#eef2ec}
|
||
.mapsvg{display:block;width:100%;height:auto}
|
||
.maplegend{display:flex;flex-wrap:wrap;gap:14px 20px;margin-top:12px;font-size:12.5px;color:var(--text-secondary)}
|
||
.maplegend span{display:inline-flex;align-items:center;gap:7px}
|
||
.swatch{width:14px;height:14px;border-radius:50%;flex:none}
|
||
.swatch.now{background:rgba(224,114,86,.18);box-shadow:inset 0 0 0 2px var(--accent-coral)}
|
||
.swatch.past{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(176,74,46,.4)}
|
||
.swatch.you{background:var(--accent-teal);border-radius:2px;transform:rotate(45deg);width:11px;height:11px}
|
||
|
||
/* ---- postcode check ---- */
|
||
.checkbox{margin-top:20px;border-top:1px solid var(--border);padding-top:18px}
|
||
.checkhead{font-weight:700;font-size:15px;margin-bottom:3px}
|
||
.checksub{font-size:13.5px;color:var(--text-muted);margin-bottom:12px}
|
||
.checkform{display:flex;gap:8px;flex-wrap:wrap}
|
||
.checkform input{font:inherit;font-size:15px;padding:10px 13px;border:1px solid var(--border);border-radius:var(--radius-md);
|
||
background:var(--bg-card);color:var(--text-primary);min-width:150px;flex:1 1 150px;text-transform:uppercase}
|
||
.checkform input:focus-visible{outline:2px solid var(--accent-teal);outline-offset:1px;border-color:var(--accent-teal)}
|
||
.checkform button{font:inherit;font-weight:600;font-size:15px;padding:10px 20px;border:none;border-radius:var(--radius-md);
|
||
background:var(--accent-coral-dark);color:#fff;cursor:pointer;transition:background .15s}
|
||
.checkform button:hover{background:#9c3f26}
|
||
.checkform button:focus-visible{outline:2px solid var(--accent-teal);outline-offset:2px}
|
||
.result{margin-top:14px;background:var(--teal-bg);border-radius:var(--radius-md);padding:15px 17px}
|
||
.result .rhead{font-weight:700;font-size:16px;color:var(--accent-teal);letter-spacing:-.01em;text-wrap:balance}
|
||
.result .rsub{font-size:13.5px;color:var(--text-secondary);margin-top:4px}
|
||
.yearstrip{display:flex;gap:4px;margin-top:12px;flex-wrap:wrap}
|
||
.yr{font-size:11px;font-weight:600;padding:3px 7px;border-radius:var(--radius-sm);white-space:nowrap}
|
||
.yr.in{background:rgba(45,125,125,.22);color:var(--accent-teal)}
|
||
.yr.out{background:var(--coral-bg);color:var(--accent-coral-dark)}
|
||
.yr.none{background:var(--bg-secondary);color:var(--text-muted)}
|
||
|
||
/* ---- notes / disclosure ---- */
|
||
.note{display:flex;gap:9px;margin-top:16px;font-size:13px;color:var(--text-muted);line-height:1.55}
|
||
.note .i{flex:none;width:17px;height:17px;border-radius:50%;background:var(--bg-secondary);color:var(--text-muted);
|
||
font-size:11px;font-weight:700;display:grid;place-items:center;margin-top:2px}
|
||
.disclosure{margin-top:16px;border-top:1px solid var(--border);padding-top:4px}
|
||
.disclosure>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 0;
|
||
font-weight:600;font-size:14px;color:var(--accent-teal)}
|
||
.disclosure>summary::-webkit-details-marker{display:none}
|
||
.disclosure>summary:focus-visible{outline:2px solid var(--accent-teal);outline-offset:2px;border-radius:var(--radius-sm)}
|
||
.disclosure .chev{transition:transform .2s ease}
|
||
.disclosure[open]>summary .chev{transform:rotate(90deg)}
|
||
.disclosure .body{padding:2px 0 10px;font-size:13.5px;color:var(--text-secondary);display:flex;flex-direction:column;gap:10px}
|
||
.disclosure .body b{color:var(--text-primary)}
|
||
|
||
/* ---- viewport stack (keeps card height stable across views) ---- */
|
||
.viewport{display:grid}
|
||
.viewport>.view{grid-area:1/1}
|
||
.viewport>.view[hidden]{display:block;visibility:hidden;pointer-events:none}
|
||
|
||
/* ---- edge cases ---- */
|
||
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
|
||
.case{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px 17px}
|
||
.case h3{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px}
|
||
.case .body{font-size:14px;color:var(--text-secondary);line-height:1.5}
|
||
.case .body strong{color:var(--text-primary)}
|
||
.emptybox{background:var(--bg-secondary);border-radius:var(--radius-md);padding:13px 15px;font-size:13.5px;color:var(--text-secondary)}
|
||
|
||
/* ---- phone ---- */
|
||
.phonerow{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
|
||
.phone{width:330px;max-width:100%;border:9px solid #1a1612;border-radius:34px;overflow:hidden;box-shadow:var(--shadow-md);background:var(--bg-primary)}
|
||
.phonebody{padding:14px 13px 20px;display:flex;flex-direction:column;gap:12px}
|
||
.phone .card{padding:17px 16px 16px;border-radius:var(--radius-md)}
|
||
.phone .sectionTitle{font-size:18px}
|
||
.phone .tiles{grid-template-columns:1fr 1fr;gap:8px}
|
||
.phone .tile{padding:11px 12px}
|
||
.phone .tile .num{font-size:22px}
|
||
.phone .chart{min-width:0}
|
||
.phone .chartwrap{overflow:visible}
|
||
.phonenote{font-size:13px;color:var(--text-muted);flex:1 1 240px;min-width:220px}
|
||
.phonenote h3{font-family:var(--serif);font-size:17px;color:var(--text-primary);margin-bottom:8px;font-weight:600}
|
||
.phonenote ul{padding-left:18px;display:flex;flex-direction:column;gap:7px}
|
||
|
||
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
|
||
</style>
|
||
|
||
<div class="wrap">
|
||
|
||
<div class="pagehead">
|
||
<h1>Last distance offered — school detail page</h1>
|
||
<p>Adds the final-offer cut-off distance to the existing <b>Admissions</b> card, plus a catchment
|
||
view on the map. Data covers one to ten years depending on the school and local authority, so every
|
||
screen here is built around partial coverage rather than assuming a full run.</p>
|
||
<p>Sample school: <b>Fairlawn Primary School</b>, Lewisham — 8 years of distance data out of 10 years of admissions data.</p>
|
||
</div>
|
||
|
||
<!-- ============ 1. ADMISSIONS CARD ============ -->
|
||
<div class="step">
|
||
<h2>1. A distance tile joins the admissions tiles</h2>
|
||
<span class="where">SchoolDetailView · #admissions</span>
|
||
</div>
|
||
<p class="stepdesc">No new section and no new nav entry — the number a parent actually asks for
|
||
("how close do we need to live?") sits with the rest of the intake story. The segmented control gains a
|
||
third view, <code>Distance</code>.</p>
|
||
|
||
<div class="card">
|
||
<div class="cardhead">
|
||
<h2 class="sectionTitle">Admissions</h2>
|
||
<div class="seg" role="group" aria-label="Admissions view">
|
||
<button type="button" aria-pressed="true" data-view="year">This year</button>
|
||
<button type="button" aria-pressed="false" data-view="trend">10-year trend</button>
|
||
<button type="button" aria-pressed="false" data-view="dist">Distance</button>
|
||
</div>
|
||
</div>
|
||
<p class="sectionSub">Reception entry, September 2025.</p>
|
||
|
||
<div class="viewport">
|
||
<!-- view: this year -->
|
||
<div class="view" id="v-year">
|
||
<dl class="tiles">
|
||
<div class="tile">
|
||
<dd class="num">60</dd><dt class="lbl">Places offered</dt>
|
||
</div>
|
||
<div class="tile">
|
||
<dd class="num">142</dd><dt class="lbl">Wanted it first</dt>
|
||
</div>
|
||
<div class="tile accent">
|
||
<dd class="num">54<span class="sub">of 142 · 38%</span></dd>
|
||
<dt class="lbl">Got their first choice</dt>
|
||
</div>
|
||
<div class="tile newtile">
|
||
<span class="newflag">New</span>
|
||
<dd class="num">0.31<span class="unit">mi</span><span class="sub">≈ 500 m · 6 min walk</span></dd>
|
||
<dt class="lbl">Last distance offered</dt>
|
||
</div>
|
||
</dl>
|
||
<div class="note">
|
||
<span class="i" aria-hidden="true">i</span>
|
||
<span>The furthest home offered a place once siblings, faith and EHCP priority were applied.
|
||
It is not a fixed catchment — it moves every year with the number of applications.</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- view: distance -->
|
||
<div class="view" id="v-dist" hidden>
|
||
<div class="verdict hard">
|
||
<span class="vic" aria-hidden="true">↓</span>
|
||
<div>
|
||
<div class="vhead">The catchment has halved in nine years</div>
|
||
<div class="vsub">0.62 mi in 2016 → 0.31 mi in 2025. Four of the last five years tightened.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chartwrap">
|
||
<svg class="chart" viewBox="0 0 700 250" role="img"
|
||
aria-label="Last distance offered by year: 0.62 miles in 2016, 0.55 in 2017, not published in 2018, 0.48 in 2019, 0.51 in 2020, 0.44 in 2021, no cut-off needed in 2022, 0.39 in 2023, 0.35 in 2024, 0.31 in 2025.">
|
||
<!-- grid -->
|
||
<g stroke="#e5dfd5" stroke-width="1">
|
||
<line x1="46" y1="30" x2="686" y2="30"/>
|
||
<line x1="46" y1="80" x2="686" y2="80"/>
|
||
<line x1="46" y1="130" x2="686" y2="130"/>
|
||
<line x1="46" y1="180" x2="686" y2="180"/>
|
||
</g>
|
||
<line x1="46" y1="206" x2="686" y2="206" stroke="#d8d0c3" stroke-width="1.5"/>
|
||
<g class="axtxt" text-anchor="end">
|
||
<text x="38" y="34">0.8</text><text x="38" y="84">0.6</text>
|
||
<text x="38" y="134">0.4</text><text x="38" y="184">0.2</text>
|
||
</g>
|
||
<text class="axtxt" x="46" y="16" text-anchor="start">miles</text>
|
||
|
||
<!-- gap segments (dashed = no figure published) -->
|
||
<g fill="none" stroke="#6d685f" stroke-width="1.5" stroke-dasharray="4 4" opacity=".55">
|
||
<path d="M114 92 L182 110"/>
|
||
<path d="M318 122 L386 132.5"/>
|
||
</g>
|
||
<!-- solid series -->
|
||
<polyline fill="none" stroke="#e07256" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"
|
||
points="46,75 114,92"/>
|
||
<polyline fill="none" stroke="#e07256" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"
|
||
points="182,110 250,102 318,122"/>
|
||
<polyline fill="none" stroke="#e07256" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"
|
||
points="386,132.5 454,142.5 522,152.5"/>
|
||
|
||
<!-- points -->
|
||
<g fill="#e07256" stroke="#fff" stroke-width="2">
|
||
<circle cx="46" cy="75" r="5"/><circle cx="114" cy="92" r="5"/>
|
||
<circle cx="182" cy="110" r="5"/><circle cx="250" cy="102" r="5"/>
|
||
<circle cx="318" cy="122" r="5"/><circle cx="386" cy="132.5" r="5"/>
|
||
<circle cx="454" cy="142.5" r="5"/>
|
||
</g>
|
||
<!-- latest, emphasised -->
|
||
<circle cx="522" cy="152.5" r="7.5" fill="#b04a2e" stroke="#fff" stroke-width="2.5"/>
|
||
|
||
<!-- "no cut-off needed" marker, 2022 -->
|
||
<circle cx="352" cy="46" r="6" fill="#fff" stroke="#296f6f" stroke-width="2.5"/>
|
||
<text class="axtxt" x="352" y="34" text-anchor="middle" fill="#296f6f" font-weight="600">all offered</text>
|
||
<line x1="352" y1="54" x2="352" y2="196" stroke="#296f6f" stroke-width="1.5" stroke-dasharray="3 4" opacity=".45"/>
|
||
|
||
<!-- endpoint labels -->
|
||
<text class="ptlbl" x="46" y="63" text-anchor="start">0.62</text>
|
||
<text class="ptlbl" x="530" y="157" text-anchor="start">0.31 mi</text>
|
||
|
||
<!-- year axis -->
|
||
<g class="axtxt" text-anchor="middle">
|
||
<text x="46" y="226">2016</text><text x="114" y="226">2017</text>
|
||
<text x="182" y="226">2019</text><text x="250" y="226">2020</text>
|
||
<text x="318" y="226">2021</text><text x="386" y="226">2023</text>
|
||
<text x="454" y="226">2024</text><text x="522" y="226">2025</text>
|
||
</g>
|
||
<text class="axtxt" x="148" y="243" text-anchor="middle" fill="#6d685f">2018 not published</text>
|
||
<text class="axtxt" x="352" y="243" text-anchor="middle" fill="#296f6f">2022 undersubscribed</text>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="keyrow">
|
||
<span><i class="kdot line" aria-hidden="true"></i>Distance of the last place offered</span>
|
||
<span><i class="kdot open" aria-hidden="true"></i>No cut-off needed — every applicant offered</span>
|
||
<span><i class="kdot gap" aria-hidden="true"></i>Not published by the local authority</span>
|
||
</div>
|
||
|
||
<div class="tblwrap" style="margin-top:22px">
|
||
<table>
|
||
<caption class="sr-only" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)">Last distance offered by year</caption>
|
||
<thead>
|
||
<tr><th scope="col">Year</th><th scope="col">Last distance</th><th scope="col">Places</th><th scope="col">Status</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="now"><td>2025</td><td>0.31 mi</td><td>60</td><td><span class="pill over">Oversubscribed</span></td></tr>
|
||
<tr><td>2024</td><td>0.35 mi</td><td>60</td><td><span class="pill over">Oversubscribed</span></td></tr>
|
||
<tr><td>2023</td><td>0.39 mi</td><td>60</td><td><span class="pill over">Oversubscribed</span></td></tr>
|
||
<tr><td>2022</td><td class="miss">No cut-off needed</td><td>60</td><td><span class="pill ok">All offered</span></td></tr>
|
||
<tr><td>2021</td><td>0.44 mi</td><td>60</td><td><span class="pill over">Oversubscribed</span></td></tr>
|
||
<tr><td>2020</td><td>0.51 mi</td><td>60</td><td><span class="pill over">Oversubscribed</span></td></tr>
|
||
<tr><td>2019</td><td>0.48 mi</td><td>60</td><td><span class="pill over">Oversubscribed</span></td></tr>
|
||
<tr><td>2018</td><td class="miss">—</td><td>60</td><td><span class="pill na">Not published</span></td></tr>
|
||
<tr><td>2017</td><td>0.55 mi</td><td>60</td><td><span class="pill over">Oversubscribed</span></td></tr>
|
||
<tr><td>2016</td><td>0.62 mi</td><td>60</td><td><span class="pill over">Oversubscribed</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<details class="disclosure">
|
||
<summary><span class="chev" aria-hidden="true">›</span>What this number does and doesn't tell you</summary>
|
||
<div class="body">
|
||
<span><b>It is a result, not a rule.</b> It records how far the last successful applicant lived
|
||
in a given year. Move one large sibling cohort and the figure shifts.</span>
|
||
<span><b>Distance is the final tiebreak.</b> Children in care, EHCP places, siblings and — at faith
|
||
schools — the faith criteria are ranked first. A family inside the distance can still miss out.</span>
|
||
<span><b>Lewisham measures straight-line distance</b> from home to the school's main gate. Other
|
||
authorities use walking routes, which are always longer for the same home.</span>
|
||
<span><b>Gaps are normal.</b> An authority may not publish a figure, or the school may not have
|
||
needed a distance cut-off that year. Both are shown here rather than hidden.</span>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ 2. MAP ============ -->
|
||
<div class="step">
|
||
<h2>2. The cut-off drawn on the map</h2>
|
||
<span class="where">SchoolHeroMap · catchment layer</span>
|
||
</div>
|
||
<p class="stepdesc">"0.31 miles" is abstract until you see it over your own streets. The latest year is a
|
||
filled ring; earlier years sit behind it as hairlines, so the tightening reads instantly as a set of
|
||
shrinking circles. Straight-line rings only — they're an illustration of the number, not a boundary.</p>
|
||
|
||
<div class="card">
|
||
<div class="cardhead" style="margin-bottom:14px">
|
||
<h2 class="sectionTitle">Where the last place went</h2>
|
||
<div class="seg" role="group" aria-label="Map years">
|
||
<button type="button" aria-pressed="true">2025 only</button>
|
||
<button type="button" aria-pressed="false">Last 5 years</button>
|
||
</div>
|
||
</div>
|
||
|
||
<figure class="mapfig">
|
||
<svg class="mapsvg" viewBox="0 0 700 400" role="img"
|
||
aria-label="Map showing concentric catchment rings around Fairlawn Primary School: 0.62 miles in 2016 shrinking to 0.31 miles in 2025, with a marker for a sample home 0.24 miles away, inside the current ring.">
|
||
<rect width="700" height="400" fill="#eef2ec"/>
|
||
<!-- park -->
|
||
<path d="M470 20 h230 v150 h-160 q-70 -20 -70 -80 z" fill="#dfe9dc"/>
|
||
<!-- water -->
|
||
<path d="M0 330 q120 -40 250 -10 t260 -20 l190 -30 v130 H0 z" fill="#dbe6ee"/>
|
||
<!-- street grid -->
|
||
<g stroke="#fff" stroke-width="7" stroke-linecap="round" opacity=".95">
|
||
<path d="M-10 90 H710"/><path d="M-10 200 H710"/><path d="M-10 300 H710"/>
|
||
<path d="M120 -10 V410"/><path d="M300 -10 V410"/><path d="M470 -10 V410"/><path d="M620 -10 V410"/>
|
||
</g>
|
||
<g stroke="#fff" stroke-width="3.5" opacity=".8">
|
||
<path d="M-10 145 H710"/><path d="M-10 250 H710"/><path d="M210 -10 V410"/><path d="M385 -10 V410"/><path d="M550 -10 V410"/>
|
||
</g>
|
||
<!-- building blocks -->
|
||
<g fill="#e4e2dc" opacity=".85">
|
||
<rect x="132" y="102" width="60" height="30" rx="2"/><rect x="222" y="102" width="64" height="30" rx="2"/>
|
||
<rect x="132" y="212" width="60" height="26" rx="2"/><rect x="222" y="212" width="64" height="26" rx="2"/>
|
||
<rect x="400" y="102" width="56" height="30" rx="2"/><rect x="400" y="212" width="56" height="26" rx="2"/>
|
||
</g>
|
||
|
||
<!-- historic rings (hairline) -->
|
||
<g fill="none" stroke="#b04a2e" opacity=".38" stroke-width="1.5">
|
||
<circle cx="300" cy="200" r="150"/>
|
||
<circle cx="300" cy="200" r="126"/>
|
||
<circle cx="300" cy="200" r="106"/>
|
||
<circle cx="300" cy="200" r="90"/>
|
||
</g>
|
||
<text class="axtxt" x="300" y="44" text-anchor="middle" fill="#b04a2e" font-weight="600">2016 · 0.62 mi</text>
|
||
<!-- current ring -->
|
||
<circle cx="300" cy="200" r="75" fill="rgba(224,114,86,.18)" stroke="#e07256" stroke-width="3"/>
|
||
<text class="axtxt" x="300" y="118" text-anchor="middle" fill="#b04a2e" font-weight="700" font-size="12.5">2025 · 0.31 mi</text>
|
||
|
||
<!-- school pin -->
|
||
<circle cx="300" cy="200" r="11" fill="#b04a2e" stroke="#fff" stroke-width="3"/>
|
||
<text class="axtxt" x="300" y="232" text-anchor="middle" fill="#1a1612" font-weight="700" font-size="12">Fairlawn Primary</text>
|
||
|
||
<!-- your home -->
|
||
<g transform="translate(246,158)">
|
||
<rect x="-7" y="-7" width="14" height="14" rx="2" fill="#296f6f" stroke="#fff" stroke-width="2.5" transform="rotate(45)"/>
|
||
</g>
|
||
<text class="axtxt" x="246" y="140" text-anchor="middle" fill="#296f6f" font-weight="700" font-size="12">Your home · 0.24 mi</text>
|
||
</svg>
|
||
</figure>
|
||
|
||
<div class="maplegend">
|
||
<span><i class="swatch now" aria-hidden="true"></i>2025 cut-off — 0.31 mi</span>
|
||
<span><i class="swatch past" aria-hidden="true"></i>Earlier years, 2016–2024</span>
|
||
<span><i class="swatch you" aria-hidden="true"></i>Your home</span>
|
||
</div>
|
||
|
||
<div class="checkbox">
|
||
<div class="checkhead">Would you have got in?</div>
|
||
<p class="checksub">We measure straight-line distance from your postcode, the same way Lewisham does.</p>
|
||
<form class="checkform" onsubmit="return false">
|
||
<label class="sr-only" for="pc" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)">Your postcode</label>
|
||
<input id="pc" type="text" value="SE23 3NA" autocomplete="postal-code" spellcheck="false">
|
||
<button type="submit">Check</button>
|
||
</form>
|
||
|
||
<div class="result">
|
||
<div class="rhead">0.24 miles away — inside the cut-off in all 8 years on record</div>
|
||
<div class="rsub">That's 0.07 miles of headroom on 2025, the tightest year so far. 2018 has no published
|
||
figure, and in 2022 every applicant was offered a place.</div>
|
||
<div class="yearstrip">
|
||
<span class="yr in">2016 ✓</span>
|
||
<span class="yr in">2017 ✓</span>
|
||
<span class="yr none">2018 –</span>
|
||
<span class="yr in">2019 ✓</span>
|
||
<span class="yr in">2020 ✓</span>
|
||
<span class="yr in">2021 ✓</span>
|
||
<span class="yr in">2022 ✓</span>
|
||
<span class="yr in">2023 ✓</span>
|
||
<span class="yr in">2024 ✓</span>
|
||
<span class="yr in">2025 ✓</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="note">
|
||
<span class="i" aria-hidden="true">!</span>
|
||
<span>An indication only. Distance is applied after siblings, faith and EHCP priority, and next year's
|
||
cut-off depends on next year's applicants. Always check the school's own admissions policy.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ 3. COVERAGE STATES ============ -->
|
||
<div class="step">
|
||
<h2>3. Coverage states</h2>
|
||
<span class="where">Partial data is the normal case</span>
|
||
</div>
|
||
<p class="stepdesc">Coverage runs from ten years to none. Each state says something true rather than
|
||
falling back on a generic "no data" — the reason a figure is absent is itself useful to a parent.</p>
|
||
|
||
<div class="cases">
|
||
<div class="case">
|
||
<h3>4+ years</h3>
|
||
<div class="body">Full treatment: verdict banner, chart, table, map rings. <strong>The verdict line only
|
||
appears with 4+ points</strong> — below that a two-year swing isn't a trend.</div>
|
||
</div>
|
||
<div class="case">
|
||
<h3>2–3 years</h3>
|
||
<div class="body">Tile and table, no verdict banner, single map ring for the latest year.
|
||
<strong>"Only 3 years available"</strong> sits under the table.</div>
|
||
</div>
|
||
<div class="case">
|
||
<h3>1 year</h3>
|
||
<div class="body">Tile plus one map ring. No <code>Distance</code> tab — the tile and its footnote are
|
||
the whole story.</div>
|
||
</div>
|
||
<div class="case">
|
||
<h3>Never oversubscribed</h3>
|
||
<div class="body" style="margin-bottom:10px">Not missing data — good news, and it should read that way.</div>
|
||
<div class="emptybox"><b style="color:var(--accent-teal)">Everyone who applied was offered a place</b>
|
||
in each of the last 6 years, so no distance cut-off was needed.</div>
|
||
</div>
|
||
<div class="case">
|
||
<h3>No data at all</h3>
|
||
<div class="body" style="margin-bottom:10px">Replaces the current placeholder text in
|
||
<code>SecondarySchoolDetailView.tsx:780</code>.</div>
|
||
<div class="emptybox">Lewisham hasn't published cut-off distances for this school.
|
||
<a href="#" style="color:var(--accent-teal);font-weight:600">The council's admissions page</a> may list them.</div>
|
||
</div>
|
||
<div class="case">
|
||
<h3>Not distance-ranked</h3>
|
||
<div class="body" style="margin-bottom:10px">Grammar and some faith schools rank on test score or faith
|
||
practice, so a distance figure would mislead.</div>
|
||
<div class="emptybox">Places here are ranked by the entrance test, not by distance.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ 4. MOBILE ============ -->
|
||
<div class="step">
|
||
<h2>4. Mobile</h2>
|
||
<span class="where">≤ 640 px</span>
|
||
</div>
|
||
<p class="stepdesc">Tiles fall to two columns and the distance tile takes the full width beneath them, so the
|
||
headline number survives the reflow. The chart drops its table on mobile behind a "See all years" disclosure.</p>
|
||
|
||
<div class="phonerow">
|
||
<div class="phone">
|
||
<div class="phonebody">
|
||
<div class="card">
|
||
<div class="cardhead" style="margin-bottom:6px">
|
||
<h2 class="sectionTitle">Admissions</h2>
|
||
</div>
|
||
<p class="sectionSub" style="font-size:13px;margin-bottom:12px">Reception, Sept 2025</p>
|
||
<div class="seg" style="margin-bottom:14px">
|
||
<button type="button" aria-pressed="true">Year</button>
|
||
<button type="button" aria-pressed="false">Trend</button>
|
||
<button type="button" aria-pressed="false">Distance</button>
|
||
</div>
|
||
<dl class="tiles">
|
||
<div class="tile"><dd class="num">60</dd><dt class="lbl">Places offered</dt></div>
|
||
<div class="tile"><dd class="num">142</dd><dt class="lbl">Wanted it first</dt></div>
|
||
</dl>
|
||
<div class="tile newtile" style="margin-top:8px">
|
||
<span class="newflag">New</span>
|
||
<dd class="num" style="font-size:26px">0.31<span class="unit">mi</span>
|
||
<span class="sub">≈ 500 m · 6 min walk</span></dd>
|
||
<dt class="lbl">Last distance offered, 2025</dt>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2 class="sectionTitle" style="margin-bottom:12px">Distance</h2>
|
||
<div class="verdict hard" style="padding:12px 13px;margin:0 0 14px">
|
||
<span class="vic" aria-hidden="true">↓</span>
|
||
<div><div class="vhead" style="font-size:15px">Halved in nine years</div>
|
||
<div class="vsub" style="font-size:12.5px">0.62 mi → 0.31 mi</div></div>
|
||
</div>
|
||
<div class="chartwrap">
|
||
<svg class="chart" viewBox="0 0 300 150" role="img" aria-label="Last distance offered falling from 0.62 miles in 2016 to 0.31 miles in 2025.">
|
||
<g stroke="#e5dfd5" stroke-width="1">
|
||
<line x1="26" y1="20" x2="292" y2="20"/><line x1="26" y1="62" x2="292" y2="62"/><line x1="26" y1="104" x2="292" y2="104"/>
|
||
</g>
|
||
<g class="axtxt" text-anchor="end" font-size="9">
|
||
<text x="21" y="23">0.8</text><text x="21" y="65">0.5</text><text x="21" y="107">0.2</text>
|
||
</g>
|
||
<path d="M26 55 L64 69" fill="none" stroke="#e07256" stroke-width="2.5" stroke-linecap="round"/>
|
||
<path d="M64 69 L102 84" fill="none" stroke="#6d685f" stroke-width="1.5" stroke-dasharray="3 3" opacity=".55"/>
|
||
<path d="M102 84 L140 78 L178 95" fill="none" stroke="#e07256" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"/>
|
||
<path d="M178 95 L216 109" fill="none" stroke="#6d685f" stroke-width="1.5" stroke-dasharray="3 3" opacity=".55"/>
|
||
<path d="M216 109 L254 116 L280 120" fill="none" stroke="#e07256" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"/>
|
||
<g fill="#e07256" stroke="#fff" stroke-width="1.8">
|
||
<circle cx="26" cy="55" r="4"/><circle cx="64" cy="69" r="4"/><circle cx="102" cy="84" r="4"/>
|
||
<circle cx="140" cy="78" r="4"/><circle cx="178" cy="95" r="4"/><circle cx="216" cy="109" r="4"/><circle cx="254" cy="116" r="4"/>
|
||
</g>
|
||
<circle cx="280" cy="120" r="6" fill="#b04a2e" stroke="#fff" stroke-width="2"/>
|
||
<circle cx="197" cy="30" r="4.5" fill="#fff" stroke="#296f6f" stroke-width="2"/>
|
||
<g class="axtxt" font-size="9" text-anchor="middle">
|
||
<text x="26" y="132">'16</text><text x="140" y="132">'20</text><text x="280" y="132">'25</text>
|
||
</g>
|
||
<text class="ptlbl" x="280" y="140" text-anchor="middle" font-size="11">0.31 mi</text>
|
||
</svg>
|
||
</div>
|
||
<details class="disclosure" style="margin-top:10px">
|
||
<summary style="font-size:13px"><span class="chev" aria-hidden="true">›</span>See all 10 years</summary>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phonenote">
|
||
<h3>Mobile decisions</h3>
|
||
<ul>
|
||
<li>Distance tile spans both columns — the number a parent came for shouldn't be a half-width cell.</li>
|
||
<li>Chart keeps every year but labels only first, middle and last; the endpoint stays labelled.</li>
|
||
<li>Year-by-year table collapses into a disclosure rather than forcing a horizontal scroll.</li>
|
||
<li>Map rings reuse the existing full-screen hero map sheet, opened from the tile.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
// Segmented control on the admissions card swaps the stacked views.
|
||
document.querySelectorAll('.seg button[data-view]').forEach(function (btn) {
|
||
btn.addEventListener('click', function () {
|
||
var group = btn.closest('.seg');
|
||
group.querySelectorAll('button').forEach(function (b) { b.setAttribute('aria-pressed', String(b === btn)); });
|
||
var target = btn.dataset.view === 'dist' ? 'v-dist' : 'v-year';
|
||
['v-year', 'v-dist'].forEach(function (id) {
|
||
document.getElementById(id).hidden = id !== target;
|
||
});
|
||
});
|
||
});
|
||
</script>
|