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

Collection view selection on mobile devices

Browse source 
The tab-based selection of views in a collection doesn't really work on
mobile devices since it needs too much horizontal space. This leads to
text overflowing buttons as well as half of the tab bar disappearing
behind the right edge of the phone screen.

This patch modifies the navigation by keeping the current tabs in
desktop mode, but switching to a very compact dropdown on mobile
devices.

The functionality of both elements is identical.
This commit is contained in:
Lars Kiesow 2025-04-26 22:53:45 +02:00
parent 56bbbb0ffb
commit e40ea028d0
No known key found for this signature in database
GPG key ID: 5DAFE8D9C823CE73
1 changed files with 15 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/routes/collections/[id]/+page.svelte
View file

@ -308,6 +308,10 @@
}
}
function changeHash(event) {
window.location.hash = '#' + event.target.value;
}
onMount(() => {
if (data.props.adventure) {
collection = data.props.adventure;
@ -772,7 +776,17 @@
{/if}
{#if collection.id}
<div class="flex justify-center mx-auto">
<select class="select select-bordered border-primary md:hidden w-full"
value={currentView}
on:change={changeHash}
>
<option value="itinerary">📅 Itinerary</option>
<option value="all">🗒️ All Linked Items</option>
<option value="calendar">🗓️ Calendar</option>
<option value="map">🗺️ Map</option>
<option value="recommendations">👍️ Recommendations</option>
</select>
<div class="md:flex justify-center mx-auto hidden">
<!-- svelte-ignore a11y-missing-attribute -->
<div role="tablist" class="tabs tabs-boxed tabs-lg max-w-full">
<!-- svelte-ignore a11y-missing-attribute -->