Redesign search UI with unified input, expandable filters, and integrated map controls
Some checks failed
linter / quality (push) Has been cancelled
tests / ci (8.3) (push) Has been cancelled
tests / ci (8.4) (push) Has been cancelled
tests / ci (8.5) (push) Has been cancelled

- Consolidate HeroSearch into single responsive form with inline geolocation button and submit actions
- Transform SearchBar into pill-based filter bar with visual state indicators (active filters highlighted)
- Move map toggle from separate component into SearchBar with open/close state management
- Redesign StationList sort controls as pills with icons, move brand filter inline, add result count
- Expand LeafletMap to full-width panel (96 viewport height) controlled by parent open state
- Remove nested mobile/desktop layouts in HeroSearch in favor of single adaptive form
- Add "Refine" and "Sort" labels to filter groups, implement clear-all filters button
- Show verdict card only before first search on mobile, hide after results load
- Position StatsRow within hero gradient, move results section into same gradient container
- Update map initialization to only occur when panel is open, destroy on close
- Add accessibility labels (aria-expanded, aria-controls) to map toggle button
This commit is contained in:
Ovidiu U
2026-04-22 09:38:23 +01:00
parent afe459f248
commit dd9bd95657
6 changed files with 352 additions and 291 deletions

View File

@@ -1,6 +1,6 @@
<template>
<dl class="hidden md:flex items-center gap-8 divide-x divide-zinc-300">
<div v-for="(stat, idx) in stats" :key="stat.label" :class="idx === 0 ? '' : 'pl-8'">
<dl class="hidden md:flex items-center divide-x divide-zinc-300">
<div v-for="stat in stats" :key="stat.label" class="px-8 first:pl-0 last:pr-0">
<dt class="sr-only">{{ stat.label }}</dt>
<dd>
<span class="block font-serif text-2xl text-zinc-900 leading-none">{{ stat.value }}</span>