fix z-index of mobile menu bar relative to directory search/filter; improve ui

This commit is contained in:
padreug 2025-02-11 18:13:34 +01:00
parent 3aa8050b3f
commit b32c609a3b
3 changed files with 9 additions and 10 deletions

View file

@ -79,7 +79,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
*/
workbox.precacheAndRoute([{
"url": "index.html",
"revision": "0.301fc7pcvng"
"revision": "0.3s1v9t4dfmo"
}], {});
workbox.cleanupOutdatedCaches();
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

View file

@ -94,7 +94,7 @@ const handleLogout = () => {
<!-- Mobile menu -->
<div v-show="isOpen"
class="absolute left-0 right-0 top-14 z-50 border-b bg-background md:hidden
class="absolute left-0 right-0 top-14 z-[100] border-b bg-background md:hidden
[@supports(backdrop-filter:blur(24px))]:bg-background/95 [@supports(backdrop-filter:blur(24px))]:backdrop-blur-sm">
<div class="container space-y-1 py-3">
<router-link v-for="item in navigation" :key="item.name" :to="item.href"

View file

@ -63,7 +63,7 @@ const filteredItems = computed(() => {
<div class="container mx-auto px-4 py-2 md:py-8">
<div class="space-y-4">
<!-- Directory Header -->
<div class="text-center space-y-2 mb-6">
<div class="hidden md:block text-center space-y-2 mb-6">
<h1 class="text-2xl font-bold tracking-tight sm:text-3xl">
{{ t('directory.title') }}
</h1>
@ -72,13 +72,12 @@ const filteredItems = computed(() => {
</p>
</div>
<!-- Directory Filter -->
<DirectoryFilter
v-model:category="category"
v-model:search="search"
v-model:town="town"
class="sticky top-0 z-50 -mx-4 px-4 py-2 bg-background/95 backdrop-blur-sm border-b w-screen left-0"
/>
<!-- 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>
</div>
<!-- Directory Grid -->
<DirectoryGrid :items="filteredItems" class="pt-4" />