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

Improve map view with compact school list and interactions
All checks were successful
Build and Push Docker Image / build-and-push (push) Successful in 57s
Details

Browse Source 
- Add compact school list items on right side of map view
- Show school name, distance, type, authority, RWM %, and pupils
- Click list item to center map and highlight marker
- Click map marker to scroll and highlight list item
- Add "Details" button to open school modal from list
- Store markers by URN for map centering functionality

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Tudor
2026-01-15 11:22:03 +00:00
parent 782c68a7ce
commit fb30f43ef7
2 changed files with 180 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
frontend/styles.css
View File

@@ -492,11 +492,88 @@ body {
}
/* Highlighted card in map view */
.school-card.highlighted {
.school-card.highlighted,
.school-list-item.highlighted {
border-color: var(--accent-teal);
box-shadow: 0 0 0 2px rgba(45, 125, 125, 0.2);
}
/* Compact school list items for map view */
.school-list-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.875rem 1rem;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
cursor: pointer;
transition: var(--transition);
}
.school-list-item:hover {
border-color: var(--text-muted);
}
.school-list-item-content {
flex: 1;
min-width: 0;
}
.school-list-item-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.school-list-item-name {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-primary);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.school-list-item-header .distance-badge {
flex-shrink: 0;
font-size: 0.75rem;
padding: 0.15rem 0.5rem;
}
.school-list-item-meta {
display: flex;
gap: 0.5rem;
font-size: 0.8rem;
color: var(--text-muted);
margin-bottom: 0.375rem;
}
.school-list-item-meta span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.school-list-item-stats {
display: flex;
gap: 1rem;
font-size: 0.8rem;
color: var(--text-secondary);
}
.school-list-item-stat strong {
color: var(--text-primary);
}
.school-list-item-details {
flex-shrink: 0;
padding: 0.5rem 0.875rem;
font-size: 0.8rem;
}
/* Search location marker on map */
.search-location-marker {
background: transparent;