diff --git a/index.html b/index.html index 2dcbb98..0643f49 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - Ealing Schools Intake + Ealing secondary school places diff --git a/src/App.vue b/src/App.vue index b0e8e40..79e228e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,13 +3,26 @@
-
-

Ealing secondary schools

-

How far away did each school stop offering places on distance? See where your home lands.

+
+ +
+

Ealing secondary school places

+

How close did you need to live to get a place? Cut-off distances for every school, 2019–2026.

+
-
@@ -26,8 +39,8 @@ -

{{ finePrint }}

-

+

{{ finePrint }}

+

{{ sourceLine }} Questions or corrections: matt@roxburghm.com · Build {{ buildDateTime }}

@@ -70,15 +83,16 @@
-

Ealing schools

- -
-
+ +
@@ -113,8 +119,8 @@

{{ home ? 'Best chances first, from your address.' : 'Add your address to rank schools by your chances.' }}

-

{{ finePrint }}

-

+

{{ finePrint }}

+

{{ sourceLine }} Questions or corrections: matt@roxburghm.com · Build {{ buildDateTime }}

@@ -140,6 +146,9 @@ {{ selected.shortName }}
+
+ +
- + + - + @@ -177,6 +187,7 @@ import SchoolTable from './components/SchoolTable.vue'; import NameFilter from './components/NameFilter.vue'; import MapLegend from './components/MapLegend.vue'; import MiniSpark from './components/MiniSpark.vue'; +import SchoolIcon from './components/SchoolIcon.vue'; import Help from './Help.vue'; // Below this width the two columns don't fit: switch to the List / Map tabs. @@ -192,7 +203,7 @@ function readStored(key) { export default { name: 'App', - components: {SchoolsMap, HomePicker, RankedList, YearTimeline, SchoolDetail, SchoolTable, NameFilter, MapLegend, MiniSpark, Help}, + components: {SchoolsMap, HomePicker, RankedList, YearTimeline, SchoolDetail, SchoolTable, NameFilter, MapLegend, MiniSpark, SchoolIcon, Help}, data() { return { YEARS, @@ -387,8 +398,8 @@ export default { ((x.a.dist ?? 0) - (y.a.dist ?? 0)) || x.school.shortName.localeCompare(y.school.shortName)); }, - yearsNewestFirst() { - return [...YEARS].reverse(); + dialogMaxHeight() { + return this.narrow ? undefined : 'min(760px, calc(100vh - 128px))'; }, listHeading() { return this.home ? `Your chances from ${this.homeName}` : 'Schools'; @@ -485,18 +496,9 @@ export default { } .fine-print { margin: 0; font-size: 12px; color: var(--ink-3); line-height: 1.5; } - -.text-btn { - min-height: 40px; - padding: 0 12px; - border: 0; - border-radius: 8px; - background: transparent; - color: var(--ink-2); - font: 600 13px var(--font); - cursor: pointer; -} -.text-btn:hover { background: #F0F2F5; } +/* Notes under the school list use the cards' inset, so they line up with the + coloured dots: 2px border + 14px padding, both sides */ +.list-note { padding: 0 16px; } .icon-btn { flex: none; @@ -532,15 +534,43 @@ export default { justify-content: space-between; gap: 8px 32px; } -.app-header h1 { +.brand { display: flex; align-items: center; gap: 12px; min-width: 0; } +.brand h1 { margin: 0; font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -0.01em; + line-height: 1.2; } -.app-header p { margin: 2px 0 0; font-size: 14px; color: var(--ink-3); } -.app-header__links { display: flex; gap: 4px; flex-wrap: wrap; } +.brand p { margin: 2px 0 0; font-size: 14px; color: var(--ink-3); } +.brand__mark { + flex: none; + width: 38px; + height: 38px; + padding: 8px; + box-sizing: border-box; + border-radius: 11px; + background: var(--accent); + color: #fff; +} +.brand__mark--small { width: 30px; height: 30px; padding: 6px; border-radius: 9px; } +.header-actions { display: flex; gap: 8px; flex-wrap: wrap; } +.header-btn { + display: inline-flex; + align-items: center; + gap: 8px; + min-height: 40px; + padding: 0 14px; + border: 1px solid var(--line-strong); + border-radius: 10px; + background: #fff; + color: var(--ink); + font: 600 14px var(--font); + cursor: pointer; +} +.header-btn svg { color: var(--ink-3); } +.header-btn:hover { background: var(--ground); } .d-main { flex: 1; @@ -627,13 +657,14 @@ export default { .m-bar__top { display: flex; align-items: center; gap: 2px; } .m-bar__top h1 { flex: 1; - margin: 0 0 0 4px; + margin: 0 0 0 10px; font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; } .m-bar__controls { display: flex; gap: 8px; } +.m-bar__years { margin: -2px 2px -6px; } .segmented { flex: 1; @@ -659,20 +690,6 @@ export default { box-shadow: 0 1px 2px rgba(22, 24, 29, .12), 0 1px 4px rgba(22, 24, 29, .06); } -.year-select { position: relative; flex: none; display: flex; align-items: center; } -.year-select select { - height: 44px; - padding: 0 34px 0 14px; - border: 1px solid #D5D9E0; - border-radius: 12px; - background: #fff; - font: 600 16px var(--font); - font-variant-numeric: tabular-nums; - color: var(--ink); - appearance: none; - -webkit-appearance: none; -} -.year-select svg { position: absolute; right: 12px; pointer-events: none; color: var(--ink-3); } .m-content { flex: 1; min-height: 0; position: relative; } .m-content--list { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } @@ -702,6 +719,8 @@ export default { border-bottom: 1px solid var(--line); } .m-page__title { font-family: var(--font-display); font-size: 18px; font-weight: 700; } +.m-page__bar + .m-page__years { margin-top: -1px; } +.m-page__years { flex: none; padding: 0 14px 2px; border-bottom: 1px solid var(--line); background: #fff; } .m-page__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .m-page__body .map { border-radius: 0 !important; } diff --git a/src/Help.vue b/src/Help.vue index b816d8f..627c6f0 100644 --- a/src/Help.vue +++ b/src/Help.vue @@ -1,115 +1,130 @@ diff --git a/src/components/SchoolTable.vue b/src/components/SchoolTable.vue index 0403f49..adf34b6 100644 --- a/src/components/SchoolTable.vue +++ b/src/components/SchoolTable.vue @@ -3,58 +3,63 @@

Compare schools

-

Distance of the last place offered each year, in miles. Shading shows whether your home was inside it.

+

+ The furthest distance a place was offered each year, in miles. + Green: your home was inside it. Red: outside. Amber: too close to call. +

- +
- -
- - - - - - - - - - - - - - - - - -
SchoolOfstedTrend{{ y }}
- - walking - - {{ ofsted(school).label }} - - - - {{ formatDist(school.intakeDist[y]) }} -
-
+ +
+ + + + + + + + + + + + + + + + + +
SchoolOfstedTrend{{ y }}
+ + walk + {{ ofsted(school).label }} + + + {{ formatDist(school.intakeDist[y]) }} +

- "All" means everyone who applied was offered a place. "–" means no places were offered on distance. + “All” means everyone who applied was offered a place. “–” means no places were offered on distance. + Figures are estimates; Ealing Council makes all admissions decisions.

- +