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

make mobile view more compact

Browse source
This commit is contained in:
padreug 2025-02-10 21:45:03 +01:00
parent 83c6285bce
commit ef6a199011
3 changed files with 10 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -71,7 +71,7 @@ const towns = computed(() => [
</script>
<template>
<div class="w-full flex flex-col md:flex-row gap-4">
<div class="w-full flex flex-col md:flex-row gap-2 sm:gap-4">
<!-- Search Input -->
<div class="relative flex-1">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
@ -81,9 +81,9 @@ const towns = computed(() => [
class="pl-10" :placeholder="t('directory.search')" />
</div>
<div class="flex flex-col md:flex-row gap-2">
<div class="flex flex-col md:flex-row gap-1 sm:gap-2">
<!-- Category Filter -->
<div class="flex gap-2 overflow-x-auto pb-2 md:pb-0">
<div class="flex gap-1 sm:gap-2 overflow-x-auto pb-1 sm:pb-2 md:pb-0">
<Button v-for="cat in categories" :key="cat.id" @click="emit('update:category', cat.id)"
:variant="category === cat.id ? 'default' : 'secondary'" size="sm" class="rounded-full whitespace-nowrap">
<!-- Show only icon on mobile for non-'all' categories -->
@ -109,7 +109,7 @@ const towns = computed(() => [
</div>
<!-- Town Filter -->
<div class="flex gap-2 overflow-x-auto pb-2 md:pb-0">
<div class="flex gap-1 sm:gap-2 overflow-x-auto pb-1 sm:pb-2 md:pb-0">
<Button v-for="to in towns" :key="to.id" @click="emit('update:town', to.id)"
:variant="town === to.id ? 'default' : 'secondary'" size="sm" class="rounded-full whitespace-nowrap">
{{ to.label }}

4
src/components/directory/DirectoryGrid.vue
View file

@ -53,9 +53,9 @@ const filteredItems = computed(() => {
</script>
<template>
<div class="container mx-auto px-4 py-8">
<div class="container mx-auto px-4 py-2 sm:py-8">
<!-- Filters -->
<div class="mb-8 space-y-4 md:space-y-0 md:flex md:items-center md:justify-between">
<div class="mb-4 sm:mb-8 space-y-4 md:space-y-0 md:flex md:items-center md:justify-between">
<DirectoryFilter v-model:category="selectedCategory" v-model:search="searchQuery" v-model:town="selectedTown" />
</div>

8
src/pages/Directory.vue
View file

@ -11,13 +11,13 @@ const items = mockDirectoryItems
<template>
<div class="container mx-auto px-4 py-8">
<div class="space-y-8">
<!-- Directory Header -->
<div class="text-center">
<div class="space-y-4 sm:space-y-8">
<!-- Directory Header - Hidden on mobile -->
<div class="hidden sm:block text-center space-y-4">
<h1 class="text-3xl font-bold tracking-tight sm:text-4xl">
{{ t('directory.title') }}
</h1>
<p class="mt-4 text-lg text-muted-foreground">
<p class="text-lg text-muted-foreground">
{{ t('directory.subtitle') }}
</p>
</div>