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

Merge pull request #250 from seanmorley15/development

Browse source 
Improve image display modal
This commit is contained in:
Sean Morley 2024-08-19 14:00:41 -04:00 • committed by GitHub
commit 1d65ecb761
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 63 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

51
frontend/src/lib/components/ImageDisplayModal.svelte
View file

@ -3,7 +3,6 @@
const dispatch = createEventDispatcher();
import { onMount } from 'svelte';
let modal: HTMLDialogElement;
import { appVersion, copyrightYear, versionChangelog } from '$lib/config';
import type { Adventure } from '$lib/types';
export let image: string;
@ -18,25 +17,59 @@
function close() {
dispatch('close');
if (modal) {
modal.close();
}
}
function handleKeydown(event: KeyboardEvent) {
if (event.key === 'Escape') {
dispatch('close');
close();
}
}
function handleClickOutside(event: MouseEvent) {
if (event.target === modal) {
close();
}
}
</script>
<dialog id="my_modal_1" class="modal">
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<dialog id="my_modal_1" class="modal" on:click={handleClickOutside}>
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div class="modal-box w-11/12 max-w-5xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
<h3 class="font-bold mb-4 text-2xl">{adventure.name}</h3>
<div class="flex flex-col items-center">
<img src={image} alt={adventure.name} class="w-full h-full object-cover" />
<div class="modal-header flex justify-between items-center mb-4">
<h3 class="font-bold text-2xl">{adventure.name}</h3>
<button class="btn btn-circle btn-neutral" on:click={close}>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<div
class="flex justify-center items-center"
style="display: flex; justify-content: center; align-items: center;"
>
<img
src={image}
alt={adventure.name}
style="max-width: 100%; max-height: 75vh; object-fit: contain;"
/>
</div>
<button class="btn mt-4 btn-primary" on:click={close}>Close</button>
</div>
</dialog>

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

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