padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

increase z-index of filters to go above card links, fit to width of screen; import Button but remove borders

Browse source
This commit is contained in:
padreug 2025-02-11 01:46:50 +01:00
parent 02e699aad5
commit 53a2982716
3 changed files with 33 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/pages/Home.vue
View file

@ -8,6 +8,7 @@ import {
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
import { Button } from '@/components/ui/button'
import { computed } from 'vue'
import {
UtensilsCrossed,
@ -63,30 +64,18 @@ const towns = computed(() => [
<template>
<div class="container mx-auto px-4 py-8">
<div class="max-w-4xl mx-auto text-center space-y-8">
<div class="max-w-3xl mx-auto text-center space-y-6 sm:space-y-8">
<h1 class="text-3xl font-bold tracking-tight sm:text-6xl">
{{ t('home.title') }}
</h1>
<p class="text-lg sm:text-xl text-muted-foreground">
<p class="text-base sm:text-lg text-muted-foreground max-w-2xl mx-auto">
{{ t('home.subtitle') }}
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<router-link to="/directory"
class="inline-flex items-center justify-center rounded-md bg-primary px-6 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90">
{{ t('home.browse') }}
</router-link>
<router-link to="/faq"
class="inline-flex items-center justify-center rounded-md border border-input bg-background px-6 py-3 text-sm font-medium hover:bg-accent hover:text-accent-foreground">
{{ t('home.learnMore') }}
</router-link>
</div>
<!-- Town Selector -->
<div class="flex flex-col items-center gap-2 sm:gap-4">
<h2 class="text-lg sm:text-xl font-semibold">{{ t('home.selectTown') }}</h2>
<!-- Town Selector - Move above category buttons -->
<div class="flex flex-col items-center gap-2">
<h2 class="text-base font-medium text-muted-foreground">{{ t('home.selectTown') }}</h2>
<Select :model-value="currentTown" @update:model-value="setCurrentTown">
<SelectTrigger class="w-[200px]">
<SelectValue :placeholder="t('home.selectTownPlaceholder')" />
@ -99,8 +88,8 @@ const towns = computed(() => [
</Select>
</div>
<!-- Category Buttons -->
<div class="relative mt-4 sm:mt-8">
<!-- Category Buttons - Adjust spacing -->
<div class="relative -mx-4 sm:mx-0">
<!-- Gradient Fade Edges -->
<div class="absolute left-0 top-0 bottom-0 w-4 bg-gradient-to-r from-background to-transparent z-10"></div>
<div class="absolute right-0 top-0 bottom-0 w-4 bg-gradient-to-l from-background to-transparent z-10"></div>
@ -116,9 +105,9 @@ const towns = computed(() => [
class="group flex-shrink-0 w-[100px] sm:w-[120px]"
>
<Button
variant="outline"
variant="ghost"
size="default"
class="w-full h-20 sm:h-24 flex flex-col items-center justify-center gap-1 sm:gap-2 group-hover:border-primary/50 transition-colors"
class="w-full h-20 sm:h-24 flex flex-col items-center justify-center gap-1 sm:gap-2 group-hover:bg-accent transition-colors"
>
<component
:is="categoryIcons[category]"
@ -130,6 +119,19 @@ const towns = computed(() => [
</router-link>
</div>
</div>
<!-- Move action buttons to bottom -->
<div class="flex flex-col sm:flex-row gap-2 sm:gap-4 justify-center mt-4">
<router-link to="/directory"
class="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">
{{ t('home.browse') }}
</router-link>
<router-link to="/faq"
class="inline-flex items-center justify-center rounded-md border border-input bg-background px-6 py-3 text-sm font-medium hover:bg-accent hover:text-accent-foreground">
{{ t('home.learnMore') }}
</router-link>
</div>
</div>
</div>
</template>