bitstream/fuel-alert
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: add fuel price classification markers and responsive search UI improvements
Some checks failed
linter / quality (push) Has been cancelled
Details
tests / ci (8.3) (push) Has been cancelled
Details
tests / ci (8.4) (push) Has been cancelled
Details
tests / ci (8.5) (push) Has been cancelled
Details

Browse Source 
- Move map pin icon to right side of input with adjusted spacing
- Change button styling from accent to primary color
This commit is contained in:
Ovidiu U
2026-04-11 20:51:07 +01:00
parent 951bb0b98d
commit a969c1b347
5 changed files with 136 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
resources/js/components/SearchBar.vue
View File

@@ -1,10 +1,12 @@
<template>
<div class="flex flex-col gap-3 max-w-md w-full">
<!-- Row 1: postcode + button -->
<div class="relative flex flex-col sm:flex-row gap-3">
<div class="flex flex-col sm:flex-row gap-3">
<div class="relative flex-1">
<label for="postcode-input" class="sr-only">Postcode or city</label>
<span aria-hidden="true" class="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500">
<span aria-hidden="true"
class="absolute right-4 top-1/2 -translate-y-1/2 text-zinc-500 p-4"
>
<iconify-icon icon="lucide:map-pin" style="font-size:1.25rem"></iconify-icon>
</span>
<input
@@ -12,37 +14,37 @@
v-model="postcode"
type="text"
placeholder="Enter postcode, e.g. SW1A 1AA"
class="w-full h-14 pl-12 pr-4 bg-white border border-zinc-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent shadow-inner text-base"
class="w-full h-14 pr-12 pl-4 bg-white border border-zinc-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent shadow-inner text-base"
@keyup.enter="onSearch"
/>
</div>
<button
@click="onSearch"
:disabled="!postcode.trim()"
class="h-14 px-8 bg-accent text-white rounded-xl font-bold text-base shadow-xl hover:bg-accent-content transition-all disabled:opacity-50 disabled:cursor-not-allowed"
class="h-14 px-8 bg-primary text-white rounded-xl font-bold text-base shadow-xl hover:bg-primary-dark transition-all disabled:cursor-not-allowed"
>
Find Prices
</button>
</div>
<!-- Row 2: fuel type + radius + sort -->
<div class="flex gap-3">
<div class="grid grid-cols-3 gap-2">
<select
v-model="fuelType"
aria-label="Fuel type"
class="flex-1 h-10 px-3 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-700 focus:outline-none focus:ring-2 focus:ring-accent"
class="min-w-0 h-10 px-2 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-700 focus:outline-none focus:ring-2 focus:ring-accent truncate"
>
<option value="e10">Petrol (E10)</option>
<option value="e5">Premium Petrol (E5)</option>
<option value="e5">Premium (E5)</option>
<option value="b7_standard">Diesel (B7)</option>
<option value="b7_premium">Premium Diesel (B7)</option>
<option value="b7_premium">Prem Diesel</option>
<option value="b10">Diesel (B10)</option>
<option value="hvo">HVO</option>
</select>
<select
v-model="radius"
aria-label="Search radius"
class="w-32 h-10 px-3 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-700 focus:outline-none focus:ring-2 focus:ring-accent"
class="min-w-0 h-10 px-2 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-700 focus:outline-none focus:ring-2 focus:ring-accent"
>
<option :value="2">2 miles</option>
<option :value="5">5 miles</option>
@@ -52,7 +54,7 @@
<select
v-model="sort"
aria-label="Sort by"
class="w-32 h-10 px-3 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-700 focus:outline-none focus:ring-2 focus:ring-accent"
class="min-w-0 h-10 px-2 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-700 focus:outline-none focus:ring-2 focus:ring-accent"
>
<option value="price">Price</option>
<option value="distance">Distance</option>