TudorandClaude Opus 5.5
4e4b30e812
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m14s
PR Checks / Backend Smoke (pull_request) Successful in 10s
PR Checks / Build Backend (no push) (pull_request) Successful in 19s
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 26s
The map view now follows option B of the results-controls mockups: - The list sits in a pane on the left, under the result count and sort, and the map fills the rest of the screen below the pinned toolbar. The toolbar's height is measured, so the split ends 1rem above the bottom of the screen however the controls wrap. - Pins are brand-teal dots and the selected one is coral. The search location is an ink dot, the search radius a dashed circle with its distance, and the view fits that circle. Tiles are muted and the zoom sits under the fullscreen button. - A school picked on the map or in the list opens a card on the map (View, + Compare, following the basket), and its list card is ringed and scrolled into view. Phones keep the bottom sheet. - The list cards show the full name, Ofsted and school type, the headline figure and pupils. The map cards now follow the list rows: no England benchmark for special schools, PRUs and AP, and no placeholder all-zero RWM (Greenmead showed "0% RWM -62 pts vs national"). That rule moves to a shared listRwmValue helper. A postcode search opens on the map for desktop browsers, chosen on the server from the user agent so the list never paints first. The client falls back to the list below 1024px, and follows the default through client-side navigation from the hero until the reader picks a view. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
247 lines
5.9 KiB
CSS
247 lines
5.9 KiB
CSS
.mapWrapper {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.mapWrapper.fullscreen {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
height: 100dvh;
|
||
}
|
||
|
||
/* Fallback fullscreen (iOS Safari — no Element.requestFullscreen): the API
|
||
can't promote the element, so pin it over the page ourselves. Above the
|
||
comparison toast (3000) and the bottom nav; below modals (9999+). */
|
||
.mapWrapper.fsFallback {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 5000;
|
||
}
|
||
|
||
.fullscreenBtn {
|
||
position: absolute;
|
||
top: 0.625rem;
|
||
right: 0.625rem;
|
||
z-index: 1000;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 34px;
|
||
height: 34px;
|
||
background: white;
|
||
border: 2px solid rgba(0, 0, 0, 0.2);
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
color: var(--text-primary);
|
||
transition: background 0.15s ease, color 0.15s ease;
|
||
}
|
||
|
||
.fullscreenBtn:hover {
|
||
background: var(--bg-secondary);
|
||
color: #000;
|
||
}
|
||
|
||
.mapLoading {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--bg-secondary);
|
||
border-radius: var(--radius-md);
|
||
gap: 1rem;
|
||
}
|
||
|
||
.spinner {
|
||
width: 2rem;
|
||
height: 2rem;
|
||
border: 3px solid rgba(var(--brand-rgb), 0.3);
|
||
border-radius: 50%;
|
||
border-top-color: var(--brand);
|
||
animation: spin 0.8s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.mapLoading p {
|
||
color: var(--text-secondary);
|
||
font-size: 0.9375rem;
|
||
margin: 0;
|
||
}
|
||
|
||
/* ── Results map skin ──────────────────────────────────────────────────────
|
||
Leaflet renders these outside React, so they are global class names, scoped
|
||
under .mapWrapper to keep this module pure. Pins are brand teal, the chosen
|
||
one coral; the search location is ink, ringed. */
|
||
|
||
/* Muted tiles so the pins, not the streets, carry the colour. */
|
||
.mapWrapper :global(.leaflet-tile-pane) {
|
||
filter: saturate(0.45);
|
||
}
|
||
|
||
/* The fullscreen button owns the top-right corner; zoom stacks under it. */
|
||
.mapWrapper :global(.leaflet-top.leaflet-right) {
|
||
top: 2.75rem;
|
||
}
|
||
|
||
.mapWrapper :global(.sc-pin) {
|
||
box-sizing: border-box;
|
||
border-radius: 50%;
|
||
background: var(--brand);
|
||
border: 2.5px solid var(--bg-card);
|
||
box-shadow: 0 2px 5px rgba(var(--shadow-rgb), 0.35);
|
||
transition: transform 0.12s ease;
|
||
}
|
||
|
||
.mapWrapper :global(.sc-pin:hover) {
|
||
transform: scale(1.15);
|
||
}
|
||
|
||
.mapWrapper :global(.sc-pin--selected) {
|
||
background: var(--action);
|
||
border-width: 3px;
|
||
}
|
||
|
||
.mapWrapper :global(.sc-pin:focus-visible) {
|
||
outline: 3px solid var(--text-primary);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.mapWrapper :global(.sc-home) {
|
||
border-radius: 50%;
|
||
background: var(--text-primary);
|
||
box-shadow: 0 0 0 6px rgba(var(--shadow-rgb), 0.18);
|
||
}
|
||
|
||
.mapWrapper :global(.sc-radius) {
|
||
stroke: var(--brand);
|
||
stroke-width: 2px;
|
||
stroke-dasharray: 6 6;
|
||
fill: var(--brand);
|
||
fill-opacity: 0.05;
|
||
}
|
||
|
||
.mapWrapper :global(.sc-radius-label) {
|
||
width: auto !important;
|
||
height: auto !important;
|
||
transform-origin: center;
|
||
translate: -50% -50%;
|
||
padding: 0.125rem 0.625rem;
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--brand);
|
||
border-radius: 999px;
|
||
font-family: var(--font-ui);
|
||
font-size: 0.75rem;
|
||
font-weight: 700;
|
||
color: var(--brand-strong);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* The selected school's card, drawn as a card rather than a speech bubble. */
|
||
.mapWrapper :global(.sc-popup .leaflet-popup-content-wrapper) {
|
||
border-radius: 14px;
|
||
box-shadow: 0 10px 28px rgba(var(--shadow-rgb), 0.22);
|
||
}
|
||
|
||
.mapWrapper :global(.sc-popup .leaflet-popup-content) {
|
||
margin: 0.875rem 1rem;
|
||
font-family: var(--font-ui);
|
||
}
|
||
|
||
.mapWrapper :global(.sc-card) {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.mapWrapper :global(.sc-card-head) {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
gap: 0.5rem;
|
||
padding-right: 1rem; /* clear of the popup's × */
|
||
}
|
||
|
||
.mapWrapper :global(.sc-card-name) {
|
||
font-family: var(--font-display);
|
||
font-size: 0.9375rem;
|
||
font-weight: 700;
|
||
line-height: 1.3;
|
||
color: var(--text-primary);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.mapWrapper :global(.sc-card-name:hover) {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.mapWrapper :global(.sc-dist) {
|
||
flex-shrink: 0;
|
||
padding: 0.125rem 0.375rem;
|
||
border-radius: 4px;
|
||
background: var(--brand);
|
||
color: var(--brand-on);
|
||
font-size: 0.75rem;
|
||
font-weight: 700;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.mapWrapper :global(.sc-card-tags) {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.375rem;
|
||
}
|
||
|
||
.mapWrapper :global(.sc-ofsted),
|
||
.mapWrapper :global(.sc-tag) {
|
||
padding: 0.125rem 0.4375rem;
|
||
border-radius: 4px;
|
||
font-size: 0.6875rem;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.mapWrapper :global(.sc-tag) {
|
||
background: var(--bg-secondary);
|
||
color: var(--text-secondary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.mapWrapper :global(.sc-ofsted1),
|
||
.mapWrapper :global(.sc-ofsted2) { background: var(--status-above-bg); color: var(--status-above); }
|
||
.mapWrapper :global(.sc-ofsted3) { background: var(--status-below-bg); color: var(--status-below); }
|
||
.mapWrapper :global(.sc-ofsted4) { background: var(--status-below); color: var(--text-inverse); }
|
||
.mapWrapper :global(.sc-ofstedRc) { background: var(--phase-secondary-text); color: var(--text-inverse); }
|
||
.mapWrapper :global(.sc-ofstedInspected) { background: var(--phase-primary-bg); color: var(--phase-primary-text); }
|
||
.mapWrapper :global(.sc-ofstedPending) { background: var(--border); color: var(--text-muted); }
|
||
|
||
.mapWrapper :global(.sc-card-metric) {
|
||
font-size: 0.8125rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.mapWrapper :global(.sc-card-metric strong) {
|
||
font-size: 0.9375rem;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.mapWrapper :global(.sc-up) { color: var(--status-above); font-weight: 600; }
|
||
.mapWrapper :global(.sc-down) { color: var(--status-below); font-weight: 600; }
|
||
|
||
.mapWrapper :global(.sc-card-actions) {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.mapWrapper :global(.sc-card-actions > *) {
|
||
flex: 1;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|