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

Fix map view layout and z-index issues
All checks were successful
Build and Push Docker Image / build-and-push (push) Successful in 57s
Details

Browse Source 
- Move location-info banner above map view as full-width bar
- Set fixed height for map view container with equal map/list heights
- Add z-index to map to prevent overlap with sticky header
- Update mobile responsive styles for consistent heights

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Tudor
2026-01-15 11:36:08 +00:00
parent fb30f43ef7
commit 1913af4e7f
2 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/app.js
View File

@@ -601,8 +601,8 @@ function updateLocationInfoBanner(searchLocation) {
<span>Showing schools within ${searchLocation.radius} miles of <strong>${searchLocation.postcode.toUpperCase()}</strong></span> <span>Showing schools within ${searchLocation.radius} miles of <strong>${searchLocation.postcode.toUpperCase()}</strong></span>
`; `;
// Insert banner before the schools grid // Insert banner before the results container (above map view)
elements.schoolsGrid.parentNode.insertBefore(banner, elements.schoolsGrid); elements.resultsContainer.parentNode.insertBefore(banner, elements.resultsContainer);
} }
async function searchByLocation() { async function searchByLocation() {

19
frontend/styles.css
View File

@@ -453,7 +453,7 @@ body {
display: grid; display: grid;
grid-template-columns: 1fr 400px; grid-template-columns: 1fr 400px;
gap: 1.5rem; gap: 1.5rem;
min-height: 600px; height: 600px;
} }
.results-container.map-view .results-map { .results-container.map-view .results-map {
@@ -461,15 +461,17 @@ body {
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
overflow: hidden; overflow: hidden;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
min-height: 600px; height: 100%;
position: relative;
z-index: 1;
} }
.results-container.map-view .schools-grid { .results-container.map-view .schools-grid {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 0.75rem;
overflow-y: auto; overflow-y: auto;
max-height: 600px; height: 100%;
padding-right: 0.5rem; padding-right: 0.5rem;
} }
@@ -852,16 +854,17 @@ body {
.results-container.map-view { .results-container.map-view {
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: 350px auto; grid-template-rows: 350px auto;
min-height: auto; height: auto;
} }
.results-container.map-view .results-map { .results-container.map-view .results-map {
min-height: 350px; height: 350px;
} }
.results-container.map-view .schools-grid { .results-container.map-view .schools-grid {
max-height: none; height: auto;
overflow-y: visible; max-height: 400px;
overflow-y: auto;
} }
} }