From c3dc213b2b04fe335262fa6e12c01d9f31cd8eb8 Mon Sep 17 00:00:00 2001
From: alvinosh <38663469+alvinosh@users.noreply.github.com>
Date: Mon, 15 Apr 2024 06:41:20 +0200
Subject: [PATCH] #17: Proper scaling factor in zoom slider  (#29)

* fixed scaling for gallery

* Resolved Smooth Zoom

* Fixed footer

* Justify start

* Clean up

---------

Co-authored-by: Kawsar Ahmed <prokawsar@gmail.com>
---
 src/lib/components/Actions.svelte          |  2 +-
 src/lib/components/Footer.svelte           | 18 +++++-------
 src/lib/components/Gallery.svelte          |  9 +++---
 src/lib/components/Image.svelte            |  3 --
 src/lib/components/TagsList.svelte         |  2 +-
 src/lib/components/ui/slider/slider.svelte |  4 +--
 src/routes/+page.svelte                    | 34 +++++++++++++++-------
 7 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte
index 3d12179..4f3017f 100644
--- a/src/lib/components/Actions.svelte
+++ b/src/lib/components/Actions.svelte
@@ -11,7 +11,7 @@
 	$: hasImages = $galleryStore.images?.length
 </script>
 
-<div class="mt-10 flex flex-row justify-end gap-3">
+<div class="flex flex-row justify-end gap-3">
 	<Button
 		class="flex flex-row items-center gap-2 rounded-xl bg-blue-400 px-4 py-2 text-white hover:bg-blue-600 {!hasImages
 			? 'hidden'
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 62e8400..97e210e 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -5,13 +5,11 @@
 	let zoomLevel: number[] = [$galleryStore.zoomLevel]
 </script>
 
-<div class="mx-auto flex w-full max-w-7xl flex-row justify-end px-5 py-10">
-	<Slider
-		bind:value={zoomLevel}
-		onValueChange={(e) => ($galleryStore.zoomLevel = e[0])}
-		class="w-80"
-		max={130}
-		min={80}
-		step={1}
-	/>
-</div>
+<Slider
+	bind:value={zoomLevel}
+	onValueChange={(e) => ($galleryStore.zoomLevel = e[0])}
+	class="w-80"
+	max={250}
+	min={50}
+	step={5}
+/>
diff --git a/src/lib/components/Gallery.svelte b/src/lib/components/Gallery.svelte
index bea223f..1b5b036 100644
--- a/src/lib/components/Gallery.svelte
+++ b/src/lib/components/Gallery.svelte
@@ -5,13 +5,14 @@
 	import { faBan } from '@fortawesome/free-solid-svg-icons'
 
 	$: noImage = $galleryStore.selectedTag && !$galleryStore.selectedFilteredImages.length
+
+	$: imageHeight = $galleryStore.zoomLevel + 80
 </script>
 
 <div
-	class="gap-3 flex-1 w-full overflow-auto
-		{noImage
-		? 'flex flex-col gap-5 items-center w-full justify-center'
-		: 'grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6'}"
+	class="w-full gap-3
+		{noImage ? 'flex flex-col items-center justify-center gap-5' : 'grid grid-flow-row justify-start'}"
+	style="grid-template-columns: repeat(auto-fill, {imageHeight}px);"
 >
 	{#if noImage}
 		<Fa icon={faBan} size="5x" class="text-gray-400" />
diff --git a/src/lib/components/Image.svelte b/src/lib/components/Image.svelte
index 38b31de..0c43dd2 100644
--- a/src/lib/components/Image.svelte
+++ b/src/lib/components/Image.svelte
@@ -11,8 +11,6 @@
 	let hasHover = false
 	let typingTmr: number | undefined = undefined
 
-	$: imageHeight = $galleryStore.zoomLevel + 80
-
 	const handleKeyUp = () => {
 		clearTimeout(typingTmr)
 		typingTmr = setTimeout(() => {
@@ -38,7 +36,6 @@
 	on:mouseover={() => (hasHover = true)}
 	on:mouseleave={() => (hasHover = false)}
 	class="relative flex flex-col rounded-md bg-gray-100"
-	style="height: {imageHeight}px;"
 >
 	<button
 		on:dblclick={() => openImage()}
diff --git a/src/lib/components/TagsList.svelte b/src/lib/components/TagsList.svelte
index 3ba7db7..e6728d3 100644
--- a/src/lib/components/TagsList.svelte
+++ b/src/lib/components/TagsList.svelte
@@ -21,7 +21,7 @@
 	}
 </script>
 
-<div class="my-5 flex flex-row flex-wrap items-center gap-3">
+<div class="flex flex-row flex-wrap items-center gap-3">
 	{#if $galleryStore.activeFilter == 'tag' && $galleryStore.tags.length}
 		{#each $galleryStore.tags as tag}
 			<button
diff --git a/src/lib/components/ui/slider/slider.svelte b/src/lib/components/ui/slider/slider.svelte
index 6666d3d..2f25d0c 100644
--- a/src/lib/components/ui/slider/slider.svelte
+++ b/src/lib/components/ui/slider/slider.svelte
@@ -23,7 +23,7 @@
 		/>
 	</SliderPrimitive.Root>
 
-	<span class="w-10">
+	<button class="w-10">
 		{value}%
-	</span>
+	</button>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c1c650e..d606219 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -143,27 +143,39 @@
 	<title>ARK Gallery 1.0</title>
 </svelte:head>
 
-<div class="mx-auto flex h-screen w-full flex-col justify-between rounded-md">
+<div class="flex h-screen w-full flex-col justify-start">
 	{#if imageDropping}
 		<div
-			class="absolute top-0 left-0 w-full h-full bg-blue-300 bg-opacity-50 z-50 flex items-center justify-center"
+			class="absolute left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-blue-300 bg-opacity-50"
 		>
 			<p class="text-2xl font-bold text-white">Drop your images here</p>
 		</div>
 	{/if}
-	<div class:hidden={$galleryStore.galleryView} class="mx-auto w-full max-w-7xl p-5">
+	<div
+		class:hidden={$galleryStore.galleryView}
+		class="mx-auto flex h-full w-full max-w-7xl flex-col justify-start p-5"
+	>
 		<Filter />
-		<Actions
-			on:upload={() => uploadFolder()}
-			on:deleteImage={() => askDeleteImage()}
-			on:deleteTag={() => askDeleteTag()}
-		/>
-		<TagsList />
-		<Gallery />
+		<div class="mt-10">
+			<Actions
+				on:upload={() => uploadFolder()}
+				on:deleteImage={() => askDeleteImage()}
+				on:deleteTag={() => askDeleteTag()}
+			/>
+		</div>
+		<div class="my-5">
+			<TagsList />
+		</div>
+		<div class="flex-1 overflow-auto p-1">
+			<Gallery />
+		</div>
+
+		<div class="flex flex-col items-end justify-center pt-4">
+			<Footer />
+		</div>
 	</div>
 	<div class:hidden={!$galleryStore.galleryView}>
 		<Header bind:showInfo />
 		<ImageEditor bind:showInfo />
 	</div>
-	<Footer />
 </div>