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

Refactor AdventureCard and CardCarousel components

Browse source
This commit is contained in:
Sean Morley 2024-10-14 08:58:23 -04:00
parent 3ee9625fe8
commit 2601b07b5f
4 changed files with 51 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,6 +6,7 @@
import type { Adventure } from '$lib/types';
export let image: string;
export let adventure: Adventure | null = null;
onMount(() => {
modal = document.getElementById('my_modal_1') as HTMLDialogElement;
@ -41,34 +42,36 @@
<!-- 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">
<div class="modal-header flex justify-between items-center mb-4">
<h3 class="font-bold text-2xl">Image Preview</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="My Adventure"
style="max-width: 100%; max-height: 75vh; object-fit: contain;"
/>
</div>
{#if adventure}
<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>
{/if}
</div>
</dialog>