refactor(detail): render sections on the server behind a client shell
page.tsx now composes the sections and passes them through SchoolDetailShell
as children, so ~1,300 lines of static markup stop shipping as client
JavaScript. The shell keeps what is genuinely interactive: back link, header
reveal, hero map, compare CTA, sticky nav and scroll-spy.
The scroll-spy already located sections via document.getElementById, so it
works unchanged against server-rendered children.
Charts needed a client wrapper: next/dynamic with ssr:false is illegal in a
Server Component, so components/school/charts.tsx is the boundary that keeps
Chart.js (64 KB gz) lazy and browser-only.
Measured on this build:
- school route client chunk: 8 KB gz (33 KB raw)
- total static JS across all chunks: 380.6 -> 350.7 KB gz
- section markup is absent from every client chunk ("Got their first choice",
"Ofsted reports", "Most deprived" etc. all return 0 hits); shell strings
still present, as expected
- shared baseline unchanged at 172 KB gz -- out of scope, as designed
The 14 characterization tests pass byte-identical to the commit that
introduced them. Only the render helper changed.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Tudor
@@ -0,0 +1,669 @@
|
||||
/* Styles for SchoolDetailShell — the interactive chrome of a detail page.
|
||||
Derived from the classes the shell's JSX references; the section styles
|
||||
live in components/school/schoolSections.module.css. Classes used by both
|
||||
appear in both files, which is correct: CSS Modules hash them per-file. */
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* Standalone back link, sits above the header card on the page background. */
|
||||
.topBack {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
margin: 0 0 0.75rem;
|
||||
padding: 0.25rem 0;
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 600;
|
||||
color: var(--accent-coral-dark, #b04a2e);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
line-height: 1.2;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
|
||||
.topBack:hover {
|
||||
color: var(--accent-coral-dark, #c85a3e);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
|
||||
/* Header Section */
|
||||
.header {
|
||||
position: relative;
|
||||
background: var(--bg-card, white);
|
||||
border: 1px solid var(--border-color, #e5dfd5);
|
||||
border-radius: 10px;
|
||||
/* Padding lives on .headerContent so the map band can bleed to the edges. */
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
box-shadow: var(--shadow-soft);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.headerContent {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 1.5rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
/* With a map band above, slide the title up under the fade so map and title
|
||||
read as one object; the Compare button floats glassy over the map. */
|
||||
.headerHasMap .headerContent {
|
||||
padding-top: 0;
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
|
||||
|
||||
/* The title (not the whole content row) rises above the map fade. Keeping
|
||||
.headerContent unpositioned matters: .actions must anchor to .header so it
|
||||
floats over the map band, not over the title. */
|
||||
.headerHasMap .titleSection {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
|
||||
.headerHasMap .actions {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
z-index: 6;
|
||||
margin: 0;
|
||||
/* Beat the mobile `.actions { width: 100% }` rule — a floating button
|
||||
must never stretch across the title. */
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
||||
.headerHasMap .actions .btnAdd {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: var(--accent-coral-dark, #b04a2e);
|
||||
border-color: transparent;
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
backdrop-filter: blur(6px);
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
|
||||
.headerHasMap .actions .btnAdd:hover {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
|
||||
/* Full label by default; phones over the map get an icon-only button
|
||||
(same compact treatment as the section-nav compare icon). */
|
||||
.btnCompareGlyph {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* Inline "View on map ↗" trigger next to the address. */
|
||||
.mapLink {
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
color: var(--accent-coral-dark, #b04a2e);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
.mapLink:hover {
|
||||
color: var(--accent-coral-dark, #c45a3f);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
|
||||
.titleSection {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
||||
.schoolName {
|
||||
font-size: clamp(2rem, 5vw, 3.25rem);
|
||||
font-weight: 700;
|
||||
color: var(--text-primary, #1a1612);
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.01em;
|
||||
font-family: var(--font-playfair), "Playfair Display", serif;
|
||||
}
|
||||
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
.metaItem {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-secondary, #5c564d);
|
||||
padding: 0.125rem 0.5rem;
|
||||
background: var(--bg-secondary, #f3ede4);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
||||
.address {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-muted, #8a847a);
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
/* Expanded header details (headteacher, website, trust, pupils) */
|
||||
.headerDetails {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem 1.25rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
.headerDetail {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-secondary, #5c564d);
|
||||
}
|
||||
|
||||
|
||||
.headerDetail strong {
|
||||
color: var(--text-primary, #1a1612);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
.headerDetail a {
|
||||
color: var(--accent-teal, #2d7d7d);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
.headerDetail a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
/* "Show all details" reveal — only rendered on mobile/tablet, where the
|
||||
header details block is collapsed below the fold. Hidden on desktop. */
|
||||
.detailsToggle {
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: var(--accent-teal, #2d7d7d);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
|
||||
.btnAdd,
|
||||
.btnRemove {
|
||||
padding: 0.75rem 1.25rem;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
box-shadow: var(--shadow-soft, 0 2px 8px rgba(26, 22, 18, 0.08));
|
||||
}
|
||||
|
||||
|
||||
.btnAdd {
|
||||
background: var(--accent-coral-dark, #b04a2e);
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.btnAdd:hover {
|
||||
background: var(--accent-coral-darker, #9c3f26);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
|
||||
.btnRemove {
|
||||
background: var(--accent-teal, #2d7d7d);
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.btnRemove:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
|
||||
/* ── Sticky Section Navigation ──────────────────────── */
|
||||
/* Docks directly under the global header; Back and "All" stay pinned while
|
||||
only the section links scroll. */
|
||||
.sectionNav {
|
||||
position: sticky;
|
||||
top: 64px; /* global header height on desktop */
|
||||
z-index: 10;
|
||||
background: var(--bg-card, white);
|
||||
border: 1px solid var(--border-color, #e5dfd5);
|
||||
border-top: none;
|
||||
border-radius: 0 0 10px 10px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
.sectionNavBack {
|
||||
flex: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
padding: 0.3rem 0.625rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--accent-coral-dark, #b04a2e);
|
||||
background: none;
|
||||
border: 1px solid var(--border-color, #e5dfd5);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
|
||||
.sectionNavBack:hover {
|
||||
background: var(--bg-secondary, #f3ede4);
|
||||
border-color: var(--accent-coral, #e07256);
|
||||
}
|
||||
|
||||
|
||||
/* The scrolling middle: section links only. */
|
||||
.sectionNavLinks {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
scroll-snap-type: x proximity;
|
||||
scroll-padding-inline: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
.sectionNavLinks::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.sectionNavLink {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.3rem 0.625rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary, #5c564d);
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
transition: all 0.15s ease;
|
||||
white-space: nowrap;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
|
||||
|
||||
.sectionNavLink:hover {
|
||||
background: var(--bg-secondary, #f3ede4);
|
||||
color: var(--text-primary, #1a1612);
|
||||
}
|
||||
|
||||
|
||||
.sectionNavLinkActive {
|
||||
background: var(--accent-coral-dark, #b04a2e);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
.sectionNavLinkActive:hover {
|
||||
background: var(--accent-coral-dark, #c45a3f);
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
/* ── Mobile: the scrolling links collapse into one "section" menu button ──
|
||||
(hidden on desktop, where the links fit). */
|
||||
.sectionNavMenu {
|
||||
display: none; /* shown only ≤640px */
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
min-height: 38px;
|
||||
padding: 0.34rem 0.7rem;
|
||||
background: var(--bg-secondary, #f3ede4);
|
||||
border: 1px solid var(--border-color, #e5dfd5);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-family: var(--font-dm-sans), "DM Sans", sans-serif;
|
||||
color: var(--text-primary, #1a1612);
|
||||
}
|
||||
|
||||
|
||||
.sectionNavMenuCur {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
|
||||
.sectionNavMenuEyebrow {
|
||||
flex: none;
|
||||
font-size: 0.64rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted, #6d685f);
|
||||
}
|
||||
|
||||
|
||||
.sectionNavMenuNow {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
|
||||
.sectionNavMenuChev {
|
||||
flex: none;
|
||||
color: var(--text-muted, #6d685f);
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
|
||||
/* Compact icon version of the Compare CTA, used on mobile. */
|
||||
.sectionNavCompareIcon {
|
||||
display: none; /* shown only ≤640px */
|
||||
position: relative;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 9px;
|
||||
border: 1px solid var(--accent-coral-dark, #b04a2e);
|
||||
background: var(--accent-coral-dark, #b04a2e);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
|
||||
.sectionNavCompareIcon svg {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
|
||||
.sectionNavCompareBadge {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: var(--bg-card, white);
|
||||
color: var(--accent-coral-dark, #c45a3f);
|
||||
border: 1.5px solid var(--accent-coral, #e07256);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
||||
.sectionNavCompareIconIn {
|
||||
background: var(--bg-card, white);
|
||||
border-color: var(--accent-teal, #2d7d7d);
|
||||
color: var(--accent-teal, #2d7d7d);
|
||||
}
|
||||
|
||||
|
||||
/* Compare CTA carried into the bar once the hero's button scrolls away. */
|
||||
.sectionNavCompare {
|
||||
flex: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.34rem 0.7rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
background: var(--accent-coral-dark, #b04a2e);
|
||||
border: 1px solid var(--accent-coral-dark, #b04a2e);
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
|
||||
.sectionNavCompare:hover {
|
||||
background: var(--accent-coral-darker, #9c3f26);
|
||||
border-color: var(--accent-coral-darker, #9c3f26);
|
||||
}
|
||||
|
||||
|
||||
.sectionNavCompareIn {
|
||||
background: var(--bg-card, white);
|
||||
color: var(--accent-teal, #2d7d7d);
|
||||
border-color: var(--accent-teal, #2d7d7d);
|
||||
}
|
||||
|
||||
|
||||
.sectionNavCompareIn:hover {
|
||||
background: var(--bg-secondary, #f3ede4);
|
||||
border-color: var(--accent-teal, #2d7d7d);
|
||||
}
|
||||
|
||||
|
||||
/* "All ▾" jump menu (desktop). */
|
||||
.sectionNavAll {
|
||||
flex: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.34rem 0.65rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary, #1a1612);
|
||||
background: var(--bg-secondary, #f3ede4);
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
|
||||
.sectionNavAll:hover {
|
||||
background: var(--border-color, #e5dfd5);
|
||||
}
|
||||
|
||||
|
||||
.sectionsBackdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1500;
|
||||
background: rgba(26, 22, 18, 0.28);
|
||||
}
|
||||
|
||||
|
||||
.sectionsPanel {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
right: 0;
|
||||
z-index: 1600;
|
||||
width: 230px;
|
||||
max-height: min(70vh, 460px);
|
||||
overflow-y: auto;
|
||||
background: var(--bg-card, white);
|
||||
border: 1px solid var(--border-color, #e5dfd5);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 18px 44px rgba(26, 22, 18, 0.2);
|
||||
padding: 0.35rem;
|
||||
}
|
||||
|
||||
|
||||
.sectionsPanelHead {
|
||||
font-family: var(--font-playfair), "Playfair Display", Georgia, serif;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary, #1a1612);
|
||||
padding: 0.4rem 0.6rem 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
.sectionsItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
padding: 0.55rem 0.6rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary, #5c564d);
|
||||
text-decoration: none;
|
||||
transition: background 0.12s ease;
|
||||
}
|
||||
|
||||
|
||||
.sectionsItem:hover {
|
||||
background: var(--bg-secondary, #f3ede4);
|
||||
color: var(--text-primary, #1a1612);
|
||||
}
|
||||
|
||||
|
||||
.sectionsItemActive {
|
||||
background: var(--accent-coral-bg, rgba(224, 114, 86, 0.12));
|
||||
color: var(--accent-coral-dark, #c45a3f);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
.sectionsTick {
|
||||
color: var(--accent-coral-dark, #b04a2e);
|
||||
}
|
||||
|
||||
|
||||
/* GIAS "Open, but proposed to close" notice strip */
|
||||
.closingStrip {
|
||||
background: #fdf6e3;
|
||||
border-left: 4px solid #e2c96f;
|
||||
border-radius: 0 6px 6px 0;
|
||||
padding: 0.55rem 0.9rem;
|
||||
margin: 0.5rem 0;
|
||||
font-size: 0.88rem;
|
||||
color: #6e5a00;
|
||||
max-width: 68ch;
|
||||
}
|
||||
|
||||
.closingStrip strong {
|
||||
color: #8a6200;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
|
||||
.headerHasMap .actions .btnCompareLabel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.headerHasMap .actions .btnCompareGlyph {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
.headerHasMap .actions .btnAdd,
|
||||
.headerHasMap .actions .btnRemove {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
border-radius: 999px;
|
||||
font-size: 1.375rem;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
|
||||
.sectionNav {
|
||||
top: 56px; /* global header is shorter on mobile */
|
||||
padding: 0.4rem 0.6rem;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
|
||||
.sectionNavLink,
|
||||
.sectionNavBack {
|
||||
min-height: 36px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
|
||||
.sectionNavCompare {
|
||||
min-height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
|
||||
.sectionNavAll {
|
||||
min-height: 36px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user