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

Make Petrol/Diesel pills equal width, drop the Petrol icon

Browse Source 
Switch the fuel-pill group to a 2-column grid with full-width centered
buttons so both pills are identical size, and remove the fuel icon so
the two read as a clean matched pair.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Ovidiu U
2026-06-12 12:01:12 +01:00
parent 685a84e159
commit 08afafe6bd
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
resources/js/components/PostSearchFilters.vue
View File

@@ -1,18 +1,17 @@
<template> <template>
<div ref="popoverRoot"> <div ref="popoverRoot">
<div class="flex flex-wrap items-center gap-2 md:gap-2.5 py-2 border-b border-zinc-200"> <div class="flex flex-wrap items-center gap-2 md:gap-2.5 py-2 border-b border-zinc-200">
<div class="flex items-center gap-2 md:gap-2.5" role="radiogroup" aria-label="Fuel"> <div class="grid grid-cols-2 gap-2 md:gap-2.5" role="radiogroup" aria-label="Fuel">
<button <button
v-for="fuel in PRIMARY_FUELS" v-for="fuel in PRIMARY_FUELS"
:key="fuel.value" :key="fuel.value"
:aria-checked="fuelType === fuel.value" :aria-checked="fuelType === fuel.value"
:class="{ 'is-active': fuelType === fuel.value }" :class="{ 'is-active': fuelType === fuel.value }"
class="pill !rounded-xl" class="pill !rounded-xl w-full justify-center"
role="radio" role="radio"
type="button" type="button"
@click="fuelType = fuel.value" @click="fuelType = fuel.value"
> >
<iconify-icon v-if="fuel.icon" :icon="fuel.icon" class="text-sm opacity-70"></iconify-icon>
<span class="text-sm font-medium">{{ fuel.label }}</span> <span class="text-sm font-medium">{{ fuel.label }}</span>
</button> </button>
</div> </div>
@@ -168,13 +167,14 @@ const DEFAULTS = Object.freeze({
sort: 'reliable', sort: 'reliable',
}) })
// The two everyday fuels are surfaced as quick pills outside the popover; // The two everyday fuels are surfaced as equal-width quick pills outside the
// everything else in the shared FUEL_TYPES source stays under "More fuels". // popover; everything else in the shared FUEL_TYPES source stays under
// "More fuels".
const PRIMARY_FUEL_VALUES = Object.freeze(['e10', 'b7_standard']) const PRIMARY_FUEL_VALUES = Object.freeze(['e10', 'b7_standard'])
const PRIMARY_FUELS = Object.freeze([ const PRIMARY_FUELS = Object.freeze([
{ value: 'e10', label: 'Petrol', icon: 'lucide:fuel' }, { value: 'e10', label: 'Petrol' },
{ value: 'b7_standard', label: 'Diesel', icon: null }, { value: 'b7_standard', label: 'Diesel' },
]) ])
const SECONDARY_FUELS = FUEL_TYPES.filter((fuel) => !PRIMARY_FUEL_VALUES.includes(fuel.value)) const SECONDARY_FUELS = FUEL_TYPES.filter((fuel) => !PRIMARY_FUEL_VALUES.includes(fuel.value))