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

improve UI

Browse source
This commit is contained in:
padreug 2025-02-12 00:06:57 +01:00
parent b32c609a3b
commit f3eb1622eb
9 changed files with 320 additions and 231 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/pages/Directory.vue
View file

@ -60,27 +60,52 @@ const filteredItems = computed(() => {
</script>
<template>
<div class="container mx-auto px-4 py-2 md:py-8">
<div class="space-y-4">
<div class="px-0 md:container md:px-4 py-2 md:py-8">
<div class="space-y-4 md:space-y-6">
<!-- Directory Header -->
<div class="hidden md:block text-center space-y-2 mb-6">
<h1 class="text-2xl font-bold tracking-tight sm:text-3xl">
<div class="text-center space-y-2 mb-2 md:mb-6">
<h1 class="md:hidden text-lg font-semibold tracking-tight px-4">
{{ t('directory.title') }}
</h1>
<p class="text-sm sm:text-base text-muted-foreground">
{{ t('directory.subtitle') }}
</p>
<div class="hidden md:block space-y-2">
<h1 class="text-2xl font-bold tracking-tight sm:text-3xl">
{{ t('directory.title') }}
</h1>
<p class="text-sm sm:text-base text-muted-foreground">
{{ t('directory.subtitle') }}
</p>
</div>
</div>
<!-- Sticky Container for Filter -->
<div class="sticky top-14 z-40 -mx-4 bg-background/95 backdrop-blur-sm border-b w-screen left-0">
<div class="container mx-auto px-4">
<DirectoryFilter v-model:category="category" v-model:search="search" v-model:town="town" class="py-4" />
<div class="sticky top-14 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b md:border-b-0 w-full shadow-sm transition-all duration-200">
<div class="w-full">
<DirectoryFilter v-model:category="category" v-model:search="search" v-model:town="town" class="py-3 px-4" />
</div>
</div>
<!-- Directory Grid -->
<DirectoryGrid :items="filteredItems" class="pt-4" />
<div class="pt-4 px-4 md:px-0">
<DirectoryGrid :items="filteredItems" class="transition-all duration-300" />
</div>
</div>
</div>
</template>
<style scoped>
.fade-move,
.fade-enter-active,
.fade-leave-active {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
transform: translateY(10px);
}
.fade-leave-active {
position: absolute;
}
</style>