Merge pull request #219 from hearchco/mk/fix/image-search

fix(images on hover): behaviour fix
hearchco · Apr 11, 2024 · 6c1b57b · 6c1b57b
2 parents 77b4da4 + bf98063
commit 6c1b57b
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 9 deletions.
diff --git a/src/lib/components/search/display/images/Image.svelte b/src/lib/components/search/display/images/Image.svelte
@@ -27,12 +27,12 @@
 		class:ring-4={selected}
 		class:ring-hearchco-primary={selected}
 		class:dark:ring-hearchco-secondary={selected}
-		class="w-full h-full overflow-hidden rounded-lg shadow-sm dark:shadow-none"
+		class="w-full h-full overflow-hidden hover:scale-110 relative z-0 hover:z-50 hover:ring-4 hover:ring-gray-300 hover:dark:ring-gray-100 transform delay-150 duration-300 ease-in-out rounded-lg shadow-sm dark:shadow-none"
 		on:click={() => openImage()}
 	>
 		<img
 			id="img-{result.rank}"
-			class="w-full h-full object-cover object-center transform hover:scale-110 transition duration-300 ease-in-out"
+			class="w-full h-full object-cover object-center"
 			src={proxyImageLink(
 				result.image_result.thumbnail_url,
 				result.image_result.thumbnail_url_hash

diff --git a/src/lib/components/search/display/images/Images.svelte b/src/lib/components/search/display/images/Images.svelte
@@ -34,7 +34,7 @@
 	<div class="w-full">
 		<section
 			id="images"
-			class="grid sm:grid-cols-fit grid-cols-sm-fit sm:auto-rows-[195px] auto-rows-[28dvw] grid-flow-dense gap-2"
+			class="grid sm:grid-cols-fit grid-cols-sm-fit sm:auto-rows-[168px] auto-rows-[28dvw] grid-flow-dense gap-2"
 		>
 			{#each results as result (result.url)}
 				<div

diff --git a/src/lib/components/search/display/images/Preview.svelte b/src/lib/components/search/display/images/Preview.svelte
@@ -38,9 +38,7 @@
 	</div>
 	<div class="flex justify-center">
 		<a href={result.url}>
-			<div
-				class="sm:max-w-[50dvw] mx-auto hover:ring-2 hover:ring-hearchco-primary hover:dark:ring-hearchco-secondary overflow-hidden rounded-lg duration-200 ease-in-out"
-			>
+			<div class="sm:max-w-[50dvw] mx-auto overflow-hidden rounded-lg">
 				<img
 					id="link-{result.rank}"
 					src={proxyImageLink(result.url, result.url_hash)}

diff --git a/src/lib/components/search/load/images/LoadImages.svelte b/src/lib/components/search/load/images/LoadImages.svelte
@@ -21,11 +21,14 @@
 </script>
 
 <div class="w-full px-4 py-8">
-	<section id="images" class="grid grid-cols-fit auto-rows-[200px] grid-flow-dense gap-2">
+	<section
+		id="images"
+		class="grid sm:grid-cols-fit grid-cols-sm-fit sm:auto-rows-[168px] auto-rows-[28dvw] grid-flow-dense gap-2"
+	>
 		{#each fakeImages as result}
 			<div
 				class:row-span-2={(result.height * 0.8) / result.width > 1}
-				class:sm:col-span-2={result.height / (result.width * 0.64) < 1}
+				class:col-span-2={result.height / (result.width * 0.64) < 1}
 				class="flex-none"
 			>
 				<LoadImage colored={Math.random() <= 0.1} />

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -21,7 +21,7 @@ export default {
 				}
 			},
 			gridTemplateColumns: {
-				'fit': 'repeat(auto-fit, minmax(195px, 1fr))',
+				'fit': 'repeat(auto-fit, minmax(168px, 1fr))',
 				'sm-fit': 'repeat(auto-fit, minmax(28dvw, 1fr))'
 			}
 		}