From d1d654ebac2d51e3841675faeb56480e440f622f Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Tue, 5 Mar 2024 18:08:09 +0100
Subject: Initial commit

---
 frontend/src/lib/gallery/Gallery.svelte | 42 +++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 frontend/src/lib/gallery/Gallery.svelte

(limited to 'frontend/src/lib/gallery/Gallery.svelte')

diff --git a/frontend/src/lib/gallery/Gallery.svelte b/frontend/src/lib/gallery/Gallery.svelte
new file mode 100644
index 0000000..c3b6386
--- /dev/null
+++ b/frontend/src/lib/gallery/Gallery.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { PageFragment } from '$gql/graphql';
+	import GalleryPage from './GalleryPage.svelte';
+
+	export let pages: PageFragment[];
+</script>
+
+<div class="max-h-full gap-2 overflow-auto p-1 pr-3">
+	{#each pages as page, index}
+		<GalleryPage {page} {index} on:open on:cover />
+	{/each}
+</div>
+
+<style>
+	:root {
+		--gallery-image-size: 100px;
+	}
+
+	@media (min-width: 1280px) {
+		:root {
+			--gallery-image-size: 180px;
+		}
+	}
+
+	@media (min-width: 1600px) {
+		:root {
+			--gallery-image-size: 200px;
+		}
+	}
+
+	@media (min-width: 1920px) {
+		:root {
+			--gallery-image-size: 240px;
+		}
+	}
+
+	div {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(var(--gallery-image-size), 1fr));
+		grid-auto-rows: fit-content(400px);
+	}
+</style>
-- 
cgit v1.2.3-2-gb3c3

