Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-08-04 04:35:19 +02:00
Code Issues Releases Activity

Add detailed image view to the detail view

Browse source
This commit is contained in:
Sean Morley 2024-08-19 12:05:29 -04:00
parent b7c406ec0c
commit 8fa5801e00
1 changed files with 21 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

13
frontend/src/routes/adventures/[id]/+page.svelte
View file

@ -34,10 +34,12 @@
let notFound: boolean = false; let notFound: boolean = false;
let isEditModalOpen: boolean = false; let isEditModalOpen: boolean = false;
let image_url: string | null = null;
import ClipboardList from '~icons/mdi/clipboard-list'; import ClipboardList from '~icons/mdi/clipboard-list';
import EditAdventure from '$lib/components/AdventureModal.svelte'; import EditAdventure from '$lib/components/AdventureModal.svelte';
import AdventureModal from '$lib/components/AdventureModal.svelte'; import AdventureModal from '$lib/components/AdventureModal.svelte';
import ImageDisplayModal from '$lib/components/ImageDisplayModal.svelte';
onMount(() => { onMount(() => {
if (data.props.adventure) { if (data.props.adventure) {
@ -83,6 +85,10 @@
/> />
{/if} {/if}
{#if image_url}
<ImageDisplayModal image={image_url} on:close={() => (image_url = null)} {adventure} />
{/if}
{#if !adventure && !notFound} {#if !adventure && !notFound}
<div class="flex justify-center items-center w-full mt-16"> <div class="flex justify-center items-center w-full mt-16">
<span class="loading loading-spinner w-24 h-24"></span> <span class="loading loading-spinner w-24 h-24"></span>
@ -102,10 +108,16 @@
{#if adventure.images && adventure.images.length > 0} {#if adventure.images && adventure.images.length > 0}
<div class="carousel w-full"> <div class="carousel w-full">
{#each adventure.images as image, i} {#each adventure.images as image, i}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-missing-attribute -->
<!-- svelte-ignore a11y-missing-content -->
<div <div
class="carousel-item w-full" class="carousel-item w-full"
style="display: {i === currentSlide ? 'block' : 'none'}" style="display: {i === currentSlide ? 'block' : 'none'}"
> >
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-missing-attribute -->
<a on:click={() => (image_url = image.image)}>
<img <img
src={image.image} src={image.image}
width="1200" width="1200"
@ -114,6 +126,7 @@
style="aspect-ratio: 1200 / 600; object-fit: cover;" style="aspect-ratio: 1200 / 600; object-fit: cover;"
alt={adventure.name} alt={adventure.name}
/> />
</a>
<div class="flex justify-center w-full py-2 gap-2"> <div class="flex justify-center w-full py-2 gap-2">
{#each adventure.images as _, i} {#each adventure.images as _, i}
<button <button