tudor/school_compare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add segmented control to switch between name and location search
All checks were successful
Build and Push Docker Image / build-and-push (push) Successful in 1m5s
Details

Browse Source 
Replace the confusing combined search interface with a clear toggle
between "Find by Name" and "Find by Location" modes. Each mode shows
only its relevant controls, and switching modes clears the other
mode's state to prevent confusion.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Tudor
2026-01-07 15:04:30 +00:00
parent e20779ab9f
commit 0d72f81b37
3 changed files with 205 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/index.html
View File

@@ -45,16 +45,44 @@
</div>
<div class="search-section">
<div class="search-container">
<input type="text" id="school-search" class="search-input" placeholder="Search primary schools by name...">
<div class="search-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<div class="search-mode-toggle">
<button class="search-mode-btn active" data-mode="name">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
<circle cx="11" cy="11" r="8"/>
<path d="M21 21l-4.35-4.35"/>
</svg>
Find by Name
</button>
<button class="search-mode-btn" data-mode="location">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="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>
Find by Location
</button>
</div>
<div id="name-search-panel" class="search-panel active">
<div class="search-container">
<input type="text" id="school-search" class="search-input" placeholder="Search primary schools by name...">
<div class="search-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"/>
<path d="M21 21l-4.35-4.35"/>
</svg>
</div>
</div>
<div class="filter-row">
<select id="local-authority-filter" class="filter-select">
<option value="">All Areas</option>
</select>
<select id="type-filter" class="filter-select">
<option value="">All School Types</option>
</select>
</div>
</div>
<div class="location-search">
<div id="location-search-panel" class="search-panel">
<div class="location-input-group">
<input type="text" id="postcode-search" class="search-input postcode-input" placeholder="Enter postcode (e.g. SW18 4TF)">
<select id="radius-select" class="filter-select radius-select">
@@ -65,16 +93,12 @@
<option value="20">20 miles</option>
</select>
<button id="location-search-btn" class="btn btn-primary location-btn">Find Nearby</button>
<button id="clear-location-btn" class="btn location-clear-btn" style="display: none;">Clear</button>
</div>
</div>
<div class="filter-row">
<select id="local-authority-filter" class="filter-select">
<option value="">All Areas</option>
</select>
<select id="type-filter" class="filter-select">
<option value="">All School Types</option>
</select>
<div class="filter-row">
<select id="type-filter-location" class="filter-select">
<option value="">All School Types</option>
</select>
</div>
</div>
</div>