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

Merge pull request #246 from seanmorley15/development

Browse source 
Add larger image display on click
This commit is contained in:
Sean Morley 2024-08-19 08:45:41 -04:00 • committed by GitHub
commit 45a9045739
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 52 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/lib/components/AdventureCard.svelte
View file

@ -18,6 +18,7 @@
import CollectionLink from './CollectionLink.svelte';
import DotsHorizontal from '~icons/mdi/dots-horizontal';
import DeleteWarning from './DeleteWarning.svelte';
import ImageDisplayModal from './ImageDisplayModal.svelte';
export let type: string;
@ -27,7 +28,7 @@
let isWarningModalOpen: boolean = false;
let keyword: string = '';
let image_url: string | null = null;
export let adventure: Adventure;
if (adventure.type == 'visited') {
@ -155,6 +156,10 @@
/>
{/if}
{#if image_url}
<ImageDisplayModal image={image_url} on:close={() => (image_url = null)} {adventure} />
{/if}
<div
class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl text-base-content"
>
@ -166,7 +171,10 @@
class="carousel-item w-full"
style="display: {i === currentSlide ? 'block' : 'none'}"
>
<img src={image.image} class="w-full h-48 object-cover" alt={adventure.name} />
<!-- svelte-ignore a11y-invalid-attribute -->
<a href="#" on:click={() => (image_url = image.image)}
><img src={image.image} class="w-full h-48 object-cover" alt={adventure.name} /></a
>
<div class="flex justify-center w-full py-2 gap-2">
{#each adventure.images as _, i}
<button

42
frontend/src/lib/components/ImageDisplayModal.svelte Normal file
View file

@ -0,0 +1,42 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
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;
export let adventure: Adventure;
onMount(() => {
modal = document.getElementById('my_modal_1') as HTMLDialogElement;
if (modal) {
modal.showModal();
}
});
function close() {
dispatch('close');
}
function handleKeydown(event: KeyboardEvent) {
if (event.key === 'Escape') {
dispatch('close');
}
}
</script>
<dialog id="my_modal_1" class="modal">
<!-- 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>
<button class="btn mt-4 btn-primary" on:click={close}>Close</button>
</div>
</dialog>