diff --git a/nextjs-app/components/FilterBar.module.css b/nextjs-app/components/FilterBar.module.css index ef33a2e..ffa79e4 100644 --- a/nextjs-app/components/FilterBar.module.css +++ b/nextjs-app/components/FilterBar.module.css @@ -134,6 +134,19 @@ .filterSelect { min-width: 100%; } + + .controlsRow { + gap: 0.5rem; + } + + .controlsRow .advancedToggle { + margin-left: 0; + } + + .controlSelect { + flex: 1; + min-width: 140px; + } } .radiusWrapper { @@ -159,33 +172,44 @@ cursor: pointer; } -/* ── Phase filter (always visible) ──────────────────── */ -.phaseFilterRow { +/* ── Controls row (radius + phase + advanced toggle) ─── */ +.controlsRow { + display: flex; + align-items: center; + gap: 0.75rem; + flex-wrap: wrap; margin-top: 0.75rem; + padding-top: 0.75rem; + border-top: 1px solid var(--border-color, #e5dfd5); } -.phaseSelect { - padding: 0.5rem 0.875rem; - font-size: 0.9rem; +.controlsRow .advancedToggle { + margin-left: auto; +} + +.radiusControl { + display: flex; + align-items: center; + gap: 0.375rem; + flex-shrink: 0; +} + +.controlSelect { + padding: 0.375rem 0.75rem; + font-size: 0.875rem; border: 1px solid var(--border-color, #e5dfd5); border-radius: 6px; background: var(--bg-card, white); + color: var(--text-primary, #1a1612); cursor: pointer; outline: none; - color: var(--text-primary, #1a1612); - min-width: 160px; } -.phaseSelect:focus { +.controlSelect:focus { border-color: var(--accent-coral, #e07256); } /* ── Advanced filters toggle ─────────────────────────── */ -.advancedSection { - margin-top: 0.75rem; - border-top: 1px solid var(--border-color, #e5dfd5); - padding-top: 0.5rem; -} .advancedToggle { display: inline-flex; diff --git a/nextjs-app/components/FilterBar.tsx b/nextjs-app/components/FilterBar.tsx index 539006f..01c320b 100644 --- a/nextjs-app/components/FilterBar.tsx +++ b/nextjs-app/components/FilterBar.tsx @@ -127,34 +127,34 @@ export function FilterBar({ filters, isHero, resultFilters }: FilterBarProps) { {isPending ?
: 'Search'} - {currentPostcode && ( -
- - -
- )} {!isHero && ( <> - {/* Phase filter — always visible on results page */} - {phaseOptions.length > 0 && ( -
+
+ {currentPostcode && ( +
+ + +
+ )} + + {phaseOptions.length > 0 && ( -
- )} + )} -
- + + + {hasActiveFilters && ( + + )} +
{filtersOpen && (
@@ -243,15 +248,8 @@ export function FilterBar({ filters, isHero, resultFilters }: FilterBarProps) { )} )} - - {hasActiveFilters && ( - - )}
)} -
)} diff --git a/nextjs-app/components/HomeView.module.css b/nextjs-app/components/HomeView.module.css index b8cf4cd..01e0670 100644 --- a/nextjs-app/components/HomeView.module.css +++ b/nextjs-app/components/HomeView.module.css @@ -33,33 +33,6 @@ } } -.locationBannerWrapper { - display: flex; - align-items: center; - justify-content: space-between; - gap: 0.75rem; - margin-bottom: 1rem; - flex-wrap: wrap; -} - -.locationBanner { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 1rem; - background: var(--accent-teal-bg); - border: 1px solid rgba(45, 125, 125, 0.25); - border-radius: 8px; - font-size: 0.875rem; - color: var(--accent-teal, #2d7d7d); - font-weight: 500; -} - -.locationIcon { - font-size: 1.25rem; - color: var(--accent-teal, #2d7d7d); -} - /* View Toggle */ .viewToggle { display: flex; @@ -308,16 +281,14 @@ } @media (max-width: 768px) { - .locationBannerWrapper { + .resultsHeader { flex-direction: column; - align-items: stretch; - margin-bottom: 0.75rem; + align-items: flex-start; } - .locationBanner { - padding: 0.5rem 0.75rem; - font-size: 0.8125rem; - border-radius: 6px; + .resultsHeaderActions { + width: 100%; + justify-content: space-between; } .viewToggle { @@ -509,6 +480,13 @@ padding: 0 0 1rem; } +.resultsHeaderActions { + display: flex; + align-items: center; + gap: 0.75rem; + flex-shrink: 0; +} + .sortSelect { padding: 0.375rem 0.75rem; border: 1px solid var(--border-color, #e0ddd8); diff --git a/nextjs-app/components/HomeView.tsx b/nextjs-app/components/HomeView.tsx index e3d1618..95cc375 100644 --- a/nextjs-app/components/HomeView.tsx +++ b/nextjs-app/components/HomeView.tsx @@ -126,46 +126,6 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp )} - {/* Location Info Banner with View Toggle */} - {isLocationSearch && initialSchools.location_info && ( -
-
- - Showing schools within {(initialSchools.location_info.radius / 1.60934).toFixed(1)} miles of{' '} - {initialSchools.location_info.postcode} - -
- {initialSchools.schools.length > 0 && ( -
- - -
- )} -
- )} - {/* Results Section */}
{!hasSearch && initialSchools.schools.length > 0 && ( @@ -177,21 +137,55 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp )} - {hasSearch && resultsView === 'list' && ( + {hasSearch && (

- {initialSchools.total.toLocaleString()} school - {initialSchools.total !== 1 ? 's' : ''} found + {isLocationSearch && initialSchools.location_info + ? `${initialSchools.total.toLocaleString()} school${initialSchools.total !== 1 ? 's' : ''} within ${(initialSchools.location_info.radius / 1.60934).toFixed(1)} miles of ${initialSchools.location_info.postcode}` + : `${initialSchools.total.toLocaleString()} school${initialSchools.total !== 1 ? 's' : ''} found` + }

- +
+ {isLocationSearch && initialSchools.schools.length > 0 && ( +
+ + +
+ )} + {resultsView === 'list' && ( + + )} +
)} @@ -200,7 +194,6 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp {searchParams.get('search') && Search: {searchParams.get('search')} { e.preventDefault(); }}>×} {searchParams.get('local_authority') && {searchParams.get('local_authority')}} {searchParams.get('school_type') && {searchParams.get('school_type')}} - {searchParams.get('postcode') && Near {searchParams.get('postcode')} ({parseFloat(searchParams.get('radius') || '1')} mi)} )}