Merge pull request #250 from seanmorley15/development

Improve image display modal

frontend/src/lib/components/ImageDisplayModal.svelte

@@ -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="modal-header flex justify-between items-center mb-4">
-
+			<h3 class="font-bold text-2xl">{adventure.name}</h3>
-		<div class="flex flex-col items-center">
+			<button class="btn btn-circle btn-neutral" on:click={close}>
-			<img src={image} alt={adventure.name} class="w-full h-full object-cover" />
+				<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>

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

@@ -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
+									<!-- svelte-ignore a11y-click-events-have-key-events -->
-										src={image.image}
+									<!-- svelte-ignore a11y-missing-attribute -->
-										width="1200"
+									<a on:click={() => (image_url = image.image)}>
-										height="600"
+										<img
-										class="w-full h-auto object-cover rounded-lg"
+											src={image.image}
-										style="aspect-ratio: 1200 / 600; object-fit: cover;"
+											width="1200"
-										alt={adventure.name}
+											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