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

8
src/components/directory/DirectoryFilter.vue
View file

@ -87,9 +87,9 @@ const towns = computed(() => [
</script>
<template>
<div class="w-full space-y-4">
<div class="w-full space-y-3">
<!-- Search Input -->
<div class="relative w-full max-w-2xl mx-auto">
<div class="relative w-full max-w-xl mx-auto">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<Search class="h-5 w-5 text-muted-foreground" />
</div>
@ -99,7 +99,7 @@ const towns = computed(() => [
<div class="flex flex-col gap-4">
<!-- Town Filter -->
<div class="flex justify-start md:justify-center gap-2 overflow-x-auto pb-2 px-2 md:px-0
<div class="flex justify-start md:justify-center gap-1 overflow-x-auto pb-2 px-2 md:px-0
[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
<Button v-for="to in towns" :key="to.id" @click="emit('update:town', to.id)"
:variant="props.town === to.id ? 'default' : 'secondary'" size="sm"
@ -109,7 +109,7 @@ const towns = computed(() => [
</div>
<!-- Category Filter -->
<div class="flex justify-start md:justify-center gap-2 overflow-x-auto pb-2 px-2 md:px-0
<div class="flex justify-start md:justify-center gap-1 overflow-x-auto pb-2 px-2 md:px-0
[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
<Button v-for="cat in categories" :key="cat.id" @click="emit('update:category', cat.id)"
:variant="props.category === cat.id ? 'default' : 'secondary'" size="sm"