dd9bd95657
- 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
104 lines
3.9 KiB
Vue
104 lines
3.9 KiB
Vue
<template>
|
|
<form class="w-full max-w-xl" @submit.prevent="submitPostcode">
|
|
<label class="flex items-center gap-2 h-14 md:h-15 pl-3.5 md:pl-4 pr-1.5 md:pr-2 bg-white md:bg-surface border border-zinc-200 rounded-2xl focus-within:border-primary transition-colors md:shadow-[0_20px_40px_-20px_rgba(0,0,0,0.12)]">
|
|
<iconify-icon class="text-zinc-400 text-lg shrink-0" icon="lucide:map-pin"></iconify-icon>
|
|
<input
|
|
v-model="postcode"
|
|
autocomplete="postal-code"
|
|
class="flex-1 min-w-0 bg-transparent outline-none text-[15px] md:text-base placeholder:text-zinc-400"
|
|
placeholder="Postcode"
|
|
type="text"
|
|
/>
|
|
|
|
<!-- Geolocation icon-button — visible on mobile AND desktop -->
|
|
<button
|
|
:disabled="locating"
|
|
aria-label="Use my location"
|
|
class="w-11 h-11 rounded-[10px] bg-zinc-100 text-primary inline-flex items-center justify-center shrink-0 hover:bg-zinc-200 transition-colors disabled:opacity-70"
|
|
type="button"
|
|
@click="useMyLocation"
|
|
>
|
|
<iconify-icon :class="{ 'animate-spin': locating }" :icon="locating ? 'lucide:loader-circle' : 'lucide:locate-fixed'" class="text-lg"></iconify-icon>
|
|
</button>
|
|
|
|
<!-- Desktop-only inline submit -->
|
|
<button
|
|
class="hidden md:inline-flex h-12 px-5 ml-1 rounded-xl bg-primary text-white font-medium text-[15px] items-center gap-2 hover:opacity-90 transition"
|
|
type="submit"
|
|
>
|
|
Check prices
|
|
<iconify-icon icon="lucide:arrow-right"></iconify-icon>
|
|
</button>
|
|
</label>
|
|
|
|
<!-- Mobile-only full-width submit -->
|
|
<button
|
|
class="md:hidden w-full mt-2.5 h-14 rounded-2xl bg-primary text-white font-medium text-base inline-flex items-center justify-center gap-2 shadow-lg hover:opacity-90 transition"
|
|
type="submit"
|
|
>
|
|
Check prices
|
|
<iconify-icon class="text-lg" icon="lucide:arrow-right"></iconify-icon>
|
|
</button>
|
|
|
|
<div class="mt-3 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-zinc-400 justify-center md:justify-start">
|
|
<span class="hidden md:inline text-zinc-300">·</span>
|
|
<span class="hidden md:inline font-mono">Try SW1A 1AA · M1 1AD · EH1 1YZ</span>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch } from 'vue'
|
|
|
|
const props = defineProps({
|
|
initial: { type: Object, default: () => ({}) },
|
|
fuelType: { type: String, default: 'e10' },
|
|
radius: { type: Number, default: 10 },
|
|
sort: { type: String, default: 'reliable' },
|
|
})
|
|
|
|
const emit = defineEmits(['search'])
|
|
|
|
const postcode = ref('')
|
|
const locating = ref(false)
|
|
|
|
watch(() => props.initial, (v) => {
|
|
if (!v) return
|
|
if (typeof v.postcode === 'string') postcode.value = v.postcode
|
|
}, { immediate: true, deep: true })
|
|
|
|
function submitPostcode() {
|
|
const trimmed = postcode.value.trim()
|
|
if (!trimmed) return
|
|
emit('search', {
|
|
postcode: trimmed,
|
|
lat: null,
|
|
lng: null,
|
|
fuelType: props.fuelType,
|
|
radius: props.radius,
|
|
sort: props.sort,
|
|
})
|
|
}
|
|
|
|
function useMyLocation() {
|
|
if (!navigator.geolocation) return
|
|
locating.value = true
|
|
navigator.geolocation.getCurrentPosition(
|
|
({ coords }) => {
|
|
locating.value = false
|
|
postcode.value = ''
|
|
emit('search', {
|
|
postcode: null,
|
|
lat: coords.latitude,
|
|
lng: coords.longitude,
|
|
fuelType: props.fuelType,
|
|
radius: props.radius,
|
|
sort: props.sort,
|
|
})
|
|
},
|
|
() => { locating.value = false },
|
|
{ timeout: 8000, enableHighAccuracy: false, maximumAge: 30000 },
|
|
)
|
|
}
|
|
</script>
|