Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-19 12:59:36 +02:00
Code Issues Releases Activity

refactor(CollectionAllView): enhance mobile responsiveness and clean up unused imports

Browse source
This commit is contained in:
Sean Morley 2025-06-18 14:28:03 -04:00
parent 93a489a778
commit 8b108c5797
1 changed files with 59 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

37
frontend/src/lib/components/CollectionAllView.svelte
View file

@ -29,7 +29,6 @@
import LodgingCard from './LodgingCard.svelte';
import NoteCard from './NoteCard.svelte';
import ChecklistCard from './ChecklistCard.svelte';
import NotFound from './NotFound.svelte';
// Props
export let adventures: Adventure[] = [];
@ -363,7 +362,10 @@
<span class="text-sm font-medium text-base-content/60">
{$t('adventures.show')}:
</span>
<div class="tabs tabs-boxed bg-base-200 overflow-x-auto">
<!-- Scrollable container on mobile -->
<div class="w-full overflow-x-auto">
<div class="tabs tabs-boxed bg-base-200 flex-nowrap flex sm:flex-wrap w-max sm:w-auto">
<button
class="tab tab-sm gap-2 {filterOption === 'all' ? 'tab-active' : ''} whitespace-nowrap"
on:click={() => (filterOption = 'all')}
@ -390,7 +392,9 @@
{$t('adventures.transportations')}
</button>
<button
class="tab tab-sm gap-2 {filterOption === 'lodging' ? 'tab-active' : ''} whitespace-nowrap"
class="tab tab-sm gap-2 {filterOption === 'lodging'
? 'tab-active'
: ''} whitespace-nowrap"
on:click={() => (filterOption = 'lodging')}
>
<Hotel class="w-3 h-3" />
@ -414,6 +418,7 @@
</button>
</div>
</div>
</div>
</div>
<!-- Adventures Section -->
@ -536,32 +541,10 @@
<div class="hero min-h-96">
<div class="hero-content text-center">
<div class="max-w-md">
<div class="mb-8">
{#if searchQuery || filterOption !== 'all'}
<div class="p-8 bg-base-200/30 rounded-full inline-block">
<Search class="w-16 h-16 text-base-content/30" />
</div>
{:else}
<div class="p-8 bg-base-200/30 rounded-full inline-block">
<Adventures class="w-16 h-16 text-base-content/30" />
</div>
{/if}
</div>
{#if searchQuery || filterOption !== 'all'}
<h1 class="text-3xl font-bold text-base-content/70 mb-4">
<Clear class="w-16 h-16 text-base-content/30 mb-4" />
<h1 class="text-3xl font-bold text-base-content/70">
{$t('immich.no_items_found')}
</h1>
<p class="text-base-content/50 mb-6">
{$t('collection.try_different_search')}
</p>
<button class="btn btn-primary gap-2" on:click={clearAllFilters}>
<Clear class="w-4 h-4" />
{$t('worldtravel.clear_filters')}
</button>
{:else}
<NotFound error={undefined} />
{/if}
</div>
</div>
</div>