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)}
)}