feat(search): pin the results toolbar and float the map button on phones
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m12s
PR Checks / Backend Smoke (pull_request) Successful in 10s
PR Checks / Build Backend (no push) (pull_request) Successful in 33s
PR Checks / Build Frontend (no push) (pull_request) Successful in 1m19s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 1m16s
PR Checks / AI Code Review (Claude) (pull_request) Successful in 26s
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m12s
PR Checks / Backend Smoke (pull_request) Successful in 10s
PR Checks / Build Backend (no push) (pull_request) Successful in 33s
PR Checks / Build Frontend (no push) (pull_request) Successful in 1m19s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 1m16s
PR Checks / AI Code Review (Claude) (pull_request) Successful in 26s
The List/Map switch was a small grey control beside the results heading, and the filters were plain dropdowns labelled "All Phases" and "Advanced". Both scrolled away with the first result. Search, filters and the List/Map switch now share one card pinned under the header. Distance, phase and school type are pill controls in the row; "Advanced" becomes "More filters" and counts only what it hides. The switch is filled brand teal and says which view is on (aria-pressed). On phones the search folds to a one-line summary once made, the filter pills scroll sideways, and a floating Map/List button sits above the tab bar in place of the toolbar switch. The selected pin's card now stacks under that button instead of covering the tab bar. Switching view from far down the list scrolls back to the top of the results, and each switch is tracked as results_view_changed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
TudorandClaude Opus 5.5 committed
1 parent
b34feb8e98
commit
983a581555
8 files changed
+716
-214
No files matched your search
@@ -4,8 +4,10 @@
|
||||
* hero a single white pill on the Sand hero panel, carrying the one
|
||||
* coral action the page exists for. No card of its own: the panel
|
||||
* behind it belongs to the page, so the pill reads as the object.
|
||||
* compact the filter rail above the results — a white card of quiet
|
||||
* controls, brand for what is active, sage for what is selected.
|
||||
* compact the results toolbar — search, then a row of pill controls. The
|
||||
* card around it belongs to HomeView, which pins it under the
|
||||
* header and puts the List/Map switch beside it, so the compact
|
||||
* bar draws no card of its own.
|
||||
*
|
||||
* Colour comes from the token layer only; the disclosure arrows are drawn
|
||||
* from currentColor rather than a background image so they follow the theme.
|
||||
@@ -38,6 +40,31 @@
|
||||
margin: 0 auto 1.5rem;
|
||||
}
|
||||
|
||||
/* One row where it fits: the search takes what the controls leave, and the
|
||||
"More filters" panel breaks onto its own line below both. */
|
||||
.filterBar:not(.heroMode) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: none;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.filterBar:not(.heroMode) .searchSection {
|
||||
flex: 1 1 320px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Only phones fold the form away; see the 640px block. */
|
||||
.searchSummary {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ── Search ───────────────────────────────────────────────────────── */
|
||||
|
||||
.searchSection {
|
||||
@@ -115,8 +142,13 @@
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.filterBar:not(.heroMode) .omniInput {
|
||||
min-height: 2.75rem;
|
||||
}
|
||||
|
||||
.searchButton {
|
||||
flex: 0 0 auto;
|
||||
min-height: 2.75rem;
|
||||
padding: 0.6875rem 1.25rem;
|
||||
font-size: var(--step--1);
|
||||
border-radius: var(--radius-sm);
|
||||
@@ -217,34 +249,13 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ── Controls row (radius + phase + advanced toggle) ──────────────── */
|
||||
/* ── Controls row (distance, phase, type, more filters) ───────────── */
|
||||
|
||||
.controlsRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 0.875rem;
|
||||
padding-top: 0.875rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.controlsRow .advancedToggle {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.radiusControl {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.radiusLabel {
|
||||
font-size: var(--step--2);
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ── Selects ──────────────────────────────────────────────────────── */
|
||||
@@ -302,11 +313,24 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* A pill, 44px tall: these are the page's main controls now, not fine print,
|
||||
and a phone needs the full touch target. */
|
||||
.controlSelect {
|
||||
padding: 0.4375rem 1.875rem 0.4375rem 0.75rem;
|
||||
min-height: 2.75rem;
|
||||
padding: 0 2.25rem 0 1rem;
|
||||
border-color: var(--border-strong);
|
||||
border-radius: 999px;
|
||||
font-size: var(--step--1);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
/* A select is as wide as its longest option, and a school type can run to
|
||||
"Academy special sponsor led". Cap it; the chosen value truncates. */
|
||||
max-width: 14rem;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.selectShell:has(.controlSelect) .selectChevron {
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.filterSelect:hover:not(:disabled),
|
||||
@@ -336,10 +360,11 @@
|
||||
}
|
||||
|
||||
.filters {
|
||||
flex-basis: 100%;
|
||||
display: flex;
|
||||
gap: 0.625rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 0.75rem;
|
||||
margin-top: 0.25rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
@@ -350,15 +375,16 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.4375rem 0.75rem;
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
min-height: 2.75rem;
|
||||
padding: 0 1rem;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--text-secondary);
|
||||
border-radius: 999px;
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--step--1);
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: border-color var(--transition), background-color var(--transition),
|
||||
@@ -387,7 +413,8 @@
|
||||
}
|
||||
|
||||
.clearButton {
|
||||
padding: 0.4375rem 0.875rem;
|
||||
min-height: 2.75rem;
|
||||
padding: 0 1rem;
|
||||
font-size: var(--step--1);
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-sm);
|
||||
@@ -413,31 +440,6 @@
|
||||
/* ── Narrow ───────────────────────────────────────────────────────── */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
/*
|
||||
* Scoped, like the two rules below it.
|
||||
*
|
||||
* The results filter bar is a card — background, border, shadow — and needs
|
||||
* inner padding. The hero's search is not a card: .heroMode zeroes the
|
||||
* padding, border and background so the search sits directly on the panel.
|
||||
* Unscoped, this rule put 14px back, which indented the search box, the hint
|
||||
* and the location link 14px past the headline they sit under, and cost the
|
||||
* search field 28px of width on a 390px screen.
|
||||
*/
|
||||
.filterBar:not(.heroMode) {
|
||||
padding: 0.875rem;
|
||||
}
|
||||
|
||||
/* The hero pill stays a pill at every width — stacking it would lose the
|
||||
one shape the page is built around. Only the results bar stacks. */
|
||||
.filterBar:not(.heroMode) .omniBoxContainer {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.filterBar:not(.heroMode) .searchButton {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filters {
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -446,19 +448,6 @@
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.controlsRow {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.controlsRow .advancedToggle {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.controlSelect {
|
||||
flex: 1;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.searchHint {
|
||||
text-align: left;
|
||||
}
|
||||
@@ -518,3 +507,93 @@
|
||||
padding: 0.75rem 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Phones: the results toolbar is pinned, so it is held to two short lines.
|
||||
*
|
||||
* After a search the form folds into a one-line summary ("SW196AR · within
|
||||
* 1 mile Edit") and the controls become a single row that scrolls sideways.
|
||||
* "More filters" leads the row there: it is the one control that opens
|
||||
* everything else, so it must never be the chip scrolled out of sight.
|
||||
*/
|
||||
@media (max-width: 640px) {
|
||||
.filterBar:not(.heroMode) {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.filterBar:not(.heroMode) .searchSection {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.searchSummary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
min-height: 2.75rem;
|
||||
padding: 0 0.875rem;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: var(--radius-md);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--step--1);
|
||||
color: var(--text-muted);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.summaryText {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.summaryText strong {
|
||||
color: var(--text-primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.summaryEdit {
|
||||
flex-shrink: 0;
|
||||
font-weight: 600;
|
||||
color: var(--brand);
|
||||
}
|
||||
|
||||
.searchFolded {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Bleeds to the screen edge so a chip scrolls out from under it, rather than
|
||||
being cut off at the toolbar's padding. The toolbar's inline padding is
|
||||
1rem at this width (HomeView.module.css, .resultsToolbar). */
|
||||
.controlsRow {
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
margin-inline: -1rem;
|
||||
padding-inline: 1rem;
|
||||
scrollbar-width: none;
|
||||
mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
|
||||
}
|
||||
|
||||
.controlsRow::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.controlsRow > * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.controlsRow .advancedToggle {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
/* An open panel scrolls inside the pinned toolbar instead of pushing the
|
||||
results off a short screen. */
|
||||
.filters {
|
||||
max-height: 50dvh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
@@ -128,10 +128,11 @@ export function FilterBar({
|
||||
const currentAdmissionsPolicy = searchParams.get("admissions_policy") || "";
|
||||
const currentHasSixthForm = searchParams.get("has_sixth_form") || "";
|
||||
|
||||
// Count active dropdown filters (not search/postcode, not phase since it's always visible)
|
||||
// Count the filters behind "More filters". Search, postcode, distance, phase
|
||||
// and school type each have their own control in the toolbar, so they are
|
||||
// visible without opening anything and are not counted here.
|
||||
const activeDropdownFilters = [
|
||||
currentLA,
|
||||
currentType,
|
||||
currentGender,
|
||||
currentAdmissionsPolicy,
|
||||
currentHasSixthForm,
|
||||
@@ -144,6 +145,21 @@ export function FilterBar({
|
||||
if (hasActiveDropdownFilters) setFiltersOpen(true);
|
||||
}, [hasActiveDropdownFilters]);
|
||||
|
||||
/*
|
||||
* On phones the results toolbar is pinned, so it has to stay short. Once a
|
||||
* search has been made the form folds into a one-line summary of it, and
|
||||
* tapping the summary unfolds the form again. Desktop never folds: the
|
||||
* summary is hidden there by CSS and the form is always shown.
|
||||
*/
|
||||
const currentQuery = currentPostcode || currentSearch;
|
||||
const canFold = !isHero && !!currentQuery;
|
||||
const [searchOpen, setSearchOpen] = useState(false);
|
||||
const openSearch = () => {
|
||||
setSearchOpen(true);
|
||||
// After the form is displayed, or focus() lands on a hidden input.
|
||||
requestAnimationFrame(() => inputRef.current?.focus());
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (
|
||||
@@ -186,6 +202,7 @@ export function FilterBar({
|
||||
// The search has been made; the suggestions that led to it are spent.
|
||||
setHasTyped(false);
|
||||
close();
|
||||
setSearchOpen(false);
|
||||
if (!omniValue.trim()) {
|
||||
updateURL({ search: "", postcode: "", radius: "" });
|
||||
return;
|
||||
@@ -261,11 +278,43 @@ export function FilterBar({
|
||||
// only ever additive, so the control's behaviour is untouched.
|
||||
const activeIf = (value: string) => (value ? ` ${styles.selectActive}` : "");
|
||||
|
||||
const radiusLabel = `${currentRadius} mile${currentRadius === "1" ? "" : "s"}`;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${styles.filterBar} ${isPending ? styles.isLoading : ""} ${isHero ? styles.heroMode : ""}`}
|
||||
>
|
||||
<form onSubmit={handleSearchSubmit} className={styles.searchSection}>
|
||||
{canFold && !searchOpen && (
|
||||
<button
|
||||
type="button"
|
||||
className={styles.searchSummary}
|
||||
onClick={openSearch}
|
||||
aria-label={`Edit search: ${currentQuery}${currentPostcode ? `, within ${radiusLabel}` : ""}`}
|
||||
>
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx="11" cy="11" r="7" />
|
||||
<path d="m20 20-3.5-3.5" />
|
||||
</svg>
|
||||
<span className={styles.summaryText}>
|
||||
<strong>{currentQuery}</strong>
|
||||
{currentPostcode && <span> · within {radiusLabel}</span>}
|
||||
</span>
|
||||
<span className={styles.summaryEdit} aria-hidden="true">Edit</span>
|
||||
</button>
|
||||
)}
|
||||
<form
|
||||
onSubmit={handleSearchSubmit}
|
||||
className={`${styles.searchSection}${canFold && !searchOpen ? ` ${styles.searchFolded}` : ""}`}
|
||||
>
|
||||
<div className={styles.omniBoxContainer}>
|
||||
{isHero && (
|
||||
<span className={styles.omniIcon} aria-hidden="true">
|
||||
@@ -292,6 +341,7 @@ export function FilterBar({
|
||||
onKeyDown={handleOmniKeyDown}
|
||||
onBlur={close}
|
||||
placeholder="School name or postcode"
|
||||
aria-label="School name or postcode"
|
||||
className={styles.omniInput}
|
||||
{...(autosuggest ? {
|
||||
role: "combobox",
|
||||
@@ -370,24 +420,25 @@ export function FilterBar({
|
||||
|
||||
{!isHero && (
|
||||
<>
|
||||
<div className={styles.controlsRow}>
|
||||
{/* Every control here is a real <select> or <button>, drawn as a
|
||||
pill. On phones the row scrolls sideways rather than wrapping, so
|
||||
the pinned toolbar stays two lines tall. */}
|
||||
<div className={styles.controlsRow} role="group" aria-label="Filters">
|
||||
{currentPostcode && (
|
||||
<div className={styles.radiusControl}>
|
||||
<label className={styles.radiusLabel}>Within:</label>
|
||||
<SelectShell>
|
||||
<select
|
||||
value={currentRadius}
|
||||
onChange={(e) => updateURL({ radius: e.target.value })}
|
||||
className={styles.controlSelect}
|
||||
disabled={isPending}
|
||||
>
|
||||
<option value="0.5">0.5 miles</option>
|
||||
<option value="1">1 mile</option>
|
||||
<option value="3">3 miles</option>
|
||||
<option value="5">5 miles</option>
|
||||
</select>
|
||||
</SelectShell>
|
||||
</div>
|
||||
<SelectShell>
|
||||
<select
|
||||
value={currentRadius}
|
||||
onChange={(e) => updateURL({ radius: e.target.value })}
|
||||
className={`${styles.controlSelect} ${styles.selectActive}`}
|
||||
aria-label="Distance"
|
||||
disabled={isPending}
|
||||
>
|
||||
<option value="0.5">Within 0.5 miles</option>
|
||||
<option value="1">Within 1 mile</option>
|
||||
<option value="3">Within 3 miles</option>
|
||||
<option value="5">Within 5 miles</option>
|
||||
</select>
|
||||
</SelectShell>
|
||||
)}
|
||||
|
||||
{phaseOptions.length > 0 && (
|
||||
@@ -396,9 +447,10 @@ export function FilterBar({
|
||||
value={currentPhase}
|
||||
onChange={(e) => handleFilterChange("phase", e.target.value)}
|
||||
className={`${styles.controlSelect}${activeIf(currentPhase)}`}
|
||||
aria-label="Phase"
|
||||
disabled={isPending}
|
||||
>
|
||||
<option value="">All Phases</option>
|
||||
<option value="">Any phase</option>
|
||||
{phaseOptions.map((p) => (
|
||||
<option key={p} value={p.toLowerCase()}>
|
||||
{p}
|
||||
@@ -408,13 +460,47 @@ export function FilterBar({
|
||||
</SelectShell>
|
||||
)}
|
||||
|
||||
<SelectShell>
|
||||
<select
|
||||
value={currentType}
|
||||
onChange={(e) =>
|
||||
handleFilterChange("school_type", e.target.value)
|
||||
}
|
||||
className={`${styles.controlSelect}${activeIf(currentType)}`}
|
||||
aria-label="School type"
|
||||
disabled={isPending}
|
||||
>
|
||||
<option value="">Any school type</option>
|
||||
{typeOptions.map((type) => (
|
||||
<option key={type} value={type}>
|
||||
{type}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</SelectShell>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className={`${styles.advancedToggle}${hasActiveDropdownFilters ? ` ${styles.advancedToggleActive}` : ''}`}
|
||||
onClick={() => setFiltersOpen((v) => !v)}
|
||||
aria-expanded={filtersOpen}
|
||||
>
|
||||
{hasActiveDropdownFilters ? 'Filters' : 'Advanced'}
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12" />
|
||||
<circle cx="16" cy="6" r="2" />
|
||||
<circle cx="10" cy="12" r="2" />
|
||||
<circle cx="18" cy="18" r="2" />
|
||||
</svg>
|
||||
More filters
|
||||
{hasActiveDropdownFilters
|
||||
? ` (${activeDropdownFilters.length})`
|
||||
: ""}
|
||||
@@ -444,6 +530,7 @@ export function FilterBar({
|
||||
handleFilterChange("local_authority", e.target.value)
|
||||
}
|
||||
className={`${styles.filterSelect}${activeIf(currentLA)}`}
|
||||
aria-label="Local authority"
|
||||
disabled={isPending}
|
||||
>
|
||||
<option value="">All Local Authorities</option>
|
||||
@@ -455,24 +542,6 @@ export function FilterBar({
|
||||
</select>
|
||||
</SelectShell>
|
||||
|
||||
<SelectShell wide>
|
||||
<select
|
||||
value={currentType}
|
||||
onChange={(e) =>
|
||||
handleFilterChange("school_type", e.target.value)
|
||||
}
|
||||
className={`${styles.filterSelect}${activeIf(currentType)}`}
|
||||
disabled={isPending}
|
||||
>
|
||||
<option value="">All School Types</option>
|
||||
{typeOptions.map((type) => (
|
||||
<option key={type} value={type}>
|
||||
{type}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</SelectShell>
|
||||
|
||||
{isSecondaryMode && (
|
||||
<>
|
||||
{genderOptions.length > 0 && (
|
||||
|
||||
@@ -484,42 +484,84 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* View Toggle */
|
||||
.viewToggle {
|
||||
/* ── Results toolbar ───────────────────────────────────────────────────────
|
||||
Search, filters and the List/Map switch in one card, pinned under the
|
||||
header. It sits above Leaflet's controls (z-index 1000), which scroll up
|
||||
beneath it, and below the comparison toast and the map's own fullscreen
|
||||
overlay. */
|
||||
.resultsToolbar {
|
||||
position: sticky;
|
||||
top: calc(64px + 0.5rem);
|
||||
z-index: 1001;
|
||||
display: flex;
|
||||
gap: 0.2rem;
|
||||
background: var(--bg-secondary);
|
||||
padding: 0.2rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.viewToggleBtn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.375rem 0.625rem;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
color: var(--text-secondary);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.viewToggleBtn:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.viewToggleBtn.active {
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.25rem;
|
||||
padding: 0.875rem 1rem;
|
||||
background: var(--bg-card);
|
||||
color: var(--brand-strong);
|
||||
box-shadow: 0 2px 4px rgba(var(--shadow-rgb), 0.08);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.viewToggleBtn svg {
|
||||
.resultsToolbar > :first-child {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* The one filled control in the toolbar: which view you are in is the first
|
||||
thing a results page should answer. */
|
||||
.viewSwitch {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
padding: 1px;
|
||||
background: var(--bg-card);
|
||||
border: 1.5px solid var(--brand);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.viewSwitchBtn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
min-height: 2.5rem;
|
||||
padding: 0 1.125rem;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: calc(var(--radius-md) - 3px);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--step--1);
|
||||
font-weight: 700;
|
||||
color: var(--brand-strong);
|
||||
cursor: pointer;
|
||||
transition: background-color var(--transition), color var(--transition);
|
||||
}
|
||||
|
||||
.viewSwitchBtn:hover {
|
||||
background: var(--brand-bg);
|
||||
}
|
||||
|
||||
.viewSwitchBtn[aria-pressed='true'] {
|
||||
background: var(--brand);
|
||||
color: var(--brand-on);
|
||||
}
|
||||
|
||||
/* Phones: a full-bleed band flush under the header, and the switch gives way
|
||||
to the floating button in .mobileDock. */
|
||||
@media (max-width: 640px) {
|
||||
.resultsToolbar {
|
||||
top: 56px;
|
||||
margin: -1rem -1rem 1rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border-width: 0 0 1px;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.06);
|
||||
}
|
||||
|
||||
.viewSwitch {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.results {
|
||||
@@ -744,11 +786,6 @@
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.viewToggle {
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* The sort <select> sizes to its widest option ("Highest Reading, Writing
|
||||
& Maths %"), which overflows a phone viewport — beside the view toggle it
|
||||
ran off the right edge. Let it flex into the remaining space and shrink;
|
||||
@@ -801,24 +838,38 @@
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
/* Mobile Bottom Sheet */
|
||||
.bottomSheetWrapper {
|
||||
/* ── Mobile dock ───────────────────────────────────────────────────────────
|
||||
The floating List/Map button (phones only) above the selected pin's card.
|
||||
A column, so the button always clears the card instead of covering it. */
|
||||
.mobileDock {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.viewFab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.bottomSheetWrapper {
|
||||
display: block;
|
||||
.mobileDock {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
z-index: 1002;
|
||||
padding: 1rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mobileDock > * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.bottomSheet {
|
||||
align-self: stretch;
|
||||
position: relative;
|
||||
background: var(--bg-card);
|
||||
border-radius: 12px;
|
||||
@@ -883,6 +934,38 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Above the tab bar, and riding with it when iOS Chrome's URL bar hides
|
||||
(MOBILE.md, check 4). */
|
||||
@media (max-width: 640px) {
|
||||
.mobileDock {
|
||||
bottom: calc(56px + env(safe-area-inset-bottom, 0px));
|
||||
padding: 0.75rem;
|
||||
transform: translate3d(0, var(--mobile-bar-offset, 0px), 0);
|
||||
}
|
||||
|
||||
.viewFab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
min-height: 3rem;
|
||||
padding: 0 1.375rem;
|
||||
background: var(--text-primary);
|
||||
color: var(--bg-primary);
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
box-shadow: 0 8px 20px rgba(var(--shadow-rgb), 0.32);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--step--1);
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Room under the last card so the floating button never sits on it. */
|
||||
.hasViewFab {
|
||||
padding-bottom: 4.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.quickSearches {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -135,6 +135,27 @@ function CalendarIcon() {
|
||||
);
|
||||
}
|
||||
|
||||
/* List / Map glyphs for the results view switch and its floating twin. */
|
||||
function ListIcon() {
|
||||
return (
|
||||
<svg {...ICON_PROPS} width={18} height={18}>
|
||||
<path d="M9 6h11M9 12h11M9 18h11" />
|
||||
<circle cx="4.5" cy="6" r="1" />
|
||||
<circle cx="4.5" cy="12" r="1" />
|
||||
<circle cx="4.5" cy="18" r="1" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function MapIcon() {
|
||||
return (
|
||||
<svg {...ICON_PROPS} width={18} height={18}>
|
||||
<path d="M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2Z" />
|
||||
<path d="M9 4v14M15 6v14" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
interface ValueProp {
|
||||
icon: React.ReactNode;
|
||||
tintClass: string;
|
||||
@@ -213,6 +234,8 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
|
||||
const [mapSchools, setMapSchools] = useState<School[]>([]);
|
||||
const [isLoadingMap, setIsLoadingMap] = useState(false);
|
||||
const prevSearchParamsRef = useRef(searchParams.toString());
|
||||
const toolbarRef = useRef<HTMLDivElement>(null);
|
||||
const resultsRef = useRef<HTMLElement>(null);
|
||||
const mapParamsRef = useRef<string>('');
|
||||
const loadMoreController = useRef<AbortController | null>(null);
|
||||
// Identity changes even for A → B → A, so an old A response stays stale.
|
||||
@@ -449,6 +472,30 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
|
||||
});
|
||||
}, [addSchool, selectedSchools.length]);
|
||||
|
||||
const hasViewSwitch = isLocationSearch && initialSchools.schools.length > 0;
|
||||
|
||||
/*
|
||||
* Switching view from far down the list would otherwise leave the reader
|
||||
* looking at whatever now sits at that scroll offset, usually the footer,
|
||||
* because the map layout is much shorter than a long list. Bring the top of
|
||||
* the results back to just under the pinned toolbar instead.
|
||||
*/
|
||||
const changeView = (view: 'list' | 'map', via: 'toolbar' | 'floating') => {
|
||||
if (view === resultsView) return;
|
||||
setResultsView(view);
|
||||
track('results_view_changed', { view, via });
|
||||
requestAnimationFrame(() => {
|
||||
const results = resultsRef.current;
|
||||
const toolbar = toolbarRef.current;
|
||||
if (!results || !toolbar) return;
|
||||
const toolbarBottom = toolbar.getBoundingClientRect().bottom;
|
||||
const resultsTop = results.getBoundingClientRect().top;
|
||||
if (resultsTop < toolbarBottom) {
|
||||
window.scrollTo({ top: window.scrollY + resultsTop - toolbarBottom - 12 });
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
/* The landing arrangement owns its own vertical rhythm (one gap, set in
|
||||
CSS); the search arrangement is a filter bar directly above its results
|
||||
@@ -523,15 +570,41 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
|
||||
</ul>
|
||||
</div>
|
||||
) : (
|
||||
<FilterBar
|
||||
filters={filters}
|
||||
isHero={false}
|
||||
resultFilters={initialSchools.result_filters}
|
||||
onNearMe={handleNearMe}
|
||||
geoState={geoState}
|
||||
geoError={geoError}
|
||||
autosuggest={autosuggest}
|
||||
/>
|
||||
/* Pinned under the header, so the search, the filters and the List/Map
|
||||
switch stay in reach however far down the results a reader is. */
|
||||
<div ref={toolbarRef} className={styles.resultsToolbar}>
|
||||
<FilterBar
|
||||
filters={filters}
|
||||
isHero={false}
|
||||
resultFilters={initialSchools.result_filters}
|
||||
onNearMe={handleNearMe}
|
||||
geoState={geoState}
|
||||
geoError={geoError}
|
||||
autosuggest={autosuggest}
|
||||
/>
|
||||
{hasViewSwitch && (
|
||||
<div className={styles.viewSwitch} role="group" aria-label="Results view">
|
||||
<button
|
||||
type="button"
|
||||
className={styles.viewSwitchBtn}
|
||||
aria-pressed={resultsView === 'list'}
|
||||
onClick={() => changeView('list', 'toolbar')}
|
||||
>
|
||||
<ListIcon />
|
||||
List
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.viewSwitchBtn}
|
||||
aria-pressed={resultsView === 'map'}
|
||||
onClick={() => changeView('map', 'toolbar')}
|
||||
>
|
||||
<MapIcon />
|
||||
Map
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Next admissions deadline — one bar, not four cards. */}
|
||||
@@ -583,7 +656,10 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
|
||||
nothing to list — an empty <section> is still a flex child, so it was
|
||||
contributing a full section gap of blank space above the footer. */}
|
||||
{(isSearchActive || initialSchools.schools.length > 0) && (
|
||||
<section className={`${styles.results} ${resultsView === 'map' && isLocationSearch ? styles.mapViewResults : ''}`}>
|
||||
<section
|
||||
ref={resultsRef}
|
||||
className={`${styles.results} ${resultsView === 'map' && isLocationSearch ? styles.mapViewResults : ''} ${hasViewSwitch ? styles.hasViewFab : ''}`}
|
||||
>
|
||||
{!hasSearch && initialSchools.schools.length > 0 && (
|
||||
<div className={styles.sectionHeader}>
|
||||
<h2>Featured Schools</h2>
|
||||
@@ -602,34 +678,6 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
|
||||
}
|
||||
</h2>
|
||||
<div className={styles.resultsHeaderActions}>
|
||||
{isLocationSearch && initialSchools.schools.length > 0 && (
|
||||
<div className={styles.viewToggle}>
|
||||
<button
|
||||
className={`${styles.viewToggleBtn} ${resultsView === 'list' ? styles.active : ''}`}
|
||||
onClick={() => setResultsView('list')}
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="16" height="16">
|
||||
<line x1="8" y1="6" x2="21" y2="6"/>
|
||||
<line x1="8" y1="12" x2="21" y2="12"/>
|
||||
<line x1="8" y1="18" x2="21" y2="18"/>
|
||||
<line x1="3" y1="6" x2="3.01" y2="6"/>
|
||||
<line x1="3" y1="12" x2="3.01" y2="12"/>
|
||||
<line x1="3" y1="18" x2="3.01" y2="18"/>
|
||||
</svg>
|
||||
List
|
||||
</button>
|
||||
<button
|
||||
className={`${styles.viewToggleBtn} ${resultsView === 'map' ? styles.active : ''}`}
|
||||
onClick={() => setResultsView('map')}
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="16" height="16">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||||
<circle cx="12" cy="10" r="3"/>
|
||||
</svg>
|
||||
Map
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{resultsView === 'list' && (
|
||||
<select
|
||||
value={sortOrder}
|
||||
@@ -705,20 +753,6 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Mobile Bottom Sheet for Selected Map Pin */}
|
||||
{selectedMapSchool && (
|
||||
<div className={styles.bottomSheetWrapper}>
|
||||
<div className={styles.bottomSheet}>
|
||||
<button className={styles.closeSheetBtn} onClick={() => setSelectedMapSchool(null)}>×</button>
|
||||
<CompactSchoolItem
|
||||
school={selectedMapSchool}
|
||||
onAddToCompare={addSchoolFromSearch}
|
||||
isInCompare={selectedSchools.some(s => s.urn === selectedMapSchool.urn)}
|
||||
nationalAvgRwm={nationalAvgRwm}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
/* List View Layout */
|
||||
@@ -769,6 +803,39 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Phones and small tablets: the selected pin's card, and on phones the
|
||||
floating List/Map button, stacked above the bottom tab bar. The
|
||||
toolbar's switch is hidden at phone width, where this replaces it. */}
|
||||
{hasViewSwitch && (
|
||||
<div className={styles.mobileDock}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.viewFab}
|
||||
aria-label={resultsView === 'list' ? 'Show map' : 'Show list'}
|
||||
onClick={() => changeView(resultsView === 'list' ? 'map' : 'list', 'floating')}
|
||||
>
|
||||
{resultsView === 'list' ? <><MapIcon />Map</> : <><ListIcon />List</>}
|
||||
</button>
|
||||
{resultsView === 'map' && selectedMapSchool && (
|
||||
<div className={styles.bottomSheet}>
|
||||
<button
|
||||
className={styles.closeSheetBtn}
|
||||
onClick={() => setSelectedMapSchool(null)}
|
||||
aria-label="Close"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<CompactSchoolItem
|
||||
school={selectedMapSchool}
|
||||
onAddToCompare={addSchoolFromSearch}
|
||||
isInCompare={selectedSchools.some(s => s.urn === selectedMapSchool.urn)}
|
||||
nationalAvgRwm={nationalAvgRwm}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user