Merge pull request #163 from hearchco/mk/fix/image-layout

fix: image layout

src/lib/components/search/display/images/Image.svelte

@@ -20,17 +20,17 @@
 	}
 </script>
 
-<article id="image-{result.Rank}">
+<article class="w-full h-full" id="image-{result.Rank}">
 	<button
 		class:ring-4={selected}
 		class:ring-hearchco-primary={selected}
 		class:dark:ring-hearchco-secondary={selected}
-		class="h-full w-full overflow-hidden rounded-lg shadow-sm dark:shadow-none"
+		class="w-full h-full overflow-hidden rounded-lg shadow-sm dark:shadow-none"
 		on:click={() => openImage()}
 	>
 		<img
 			id="img-{result.Rank}"
-			class="h-48 w-auto object-cover transform hover:scale-110 transition duration-300 ease-in-out"
+			class="w-full h-full object-cover object-center transform hover:scale-110 transition duration-300 ease-in-out"
 			src={result.ImageResult.ThumbnailURL}
 			alt={result.Title}
 			{loading}

src/lib/components/search/display/images/Images.svelte

@@ -22,31 +22,27 @@
 			<Preview result={imgResultPreview} />
 		</div>
 	{/if}
-	<section
-		id="images"
-		class:tw-w-2-3={imgResultPreview !== undefined}
-		class="flex flex-wrap justify-center gap-2"
-	>
-		{#each results as result (result.URL)}
-			<div class="flex-none">
-				<Image {result} bind:imgResultPreview />
-			</div>
-		{/each}
-	</section>
+	<div class="w-full">
+		<section id="images" class="grid grid-cols-fit auto-rows-[200px] grid-flow-dense gap-2">
+			{#each results as result (result.URL)}
+				<div
+					class:row-span-2={(result.ImageResult.Thumbnail.Height * 0.8) /
+						result.ImageResult.Thumbnail.Width >
+						1}
+					class:sm:col-span-2={result.ImageResult.Thumbnail.Height /
+						(result.ImageResult.Thumbnail.Width * 0.64) <
+						1}
+					class="flex-none"
+				>
+					<Image {result} bind:imgResultPreview />
+				</div>
+			{/each}
+		</section>
+	</div>
 	{#if imgResultPreview !== undefined}
-		<div id="image-preview" class="hidden lg:block w-1/3">
+		<div id="image-preview" class="hidden lg:block w-1/2">
 			<Preview result={imgResultPreview} />
 		</div>
 	{/if}
 </div>
 <ShowMore bind:query bind:maxPages />
-
-<style>
-	/* equivalent to tailwindcss lg:w-2/3 */
-	/* needed for class:<class>=<boolean> */
-	@media (min-width: 1024px) {
-		.tw-w-2-3 {
-			width: 66.666667%;
-		}
-	}
-</style>

src/lib/components/search/display/images/Preview.svelte

@@ -8,12 +8,16 @@
 
 <div id="image-preview-{result.Rank}" class="px-4 pt-4 pb-10 w-full lg:sticky lg:top-0">
 	<a href={result.URL}>
-		<img
-			id="link-{result.Rank}"
-			src={result.ImageResult.ThumbnailURL}
-			alt={result.Title}
-			class="mx-auto h-[50vh] w-auto hover:ring-2 hover:ring-hearchco-primary hover:dark:ring-hearchco-secondary object-cover transform transition duration-200 ease-in-out"
-		/>
+		<div
+			class="h-[50dvh] flex justify-center mx-auto hover:ring-2 hover:ring-hearchco-primary hover:dark:ring-hearchco-secondary overflow-hidden rounded-lg duration-200 ease-in-out"
+		>
+			<img
+				id="link-{result.Rank}"
+				src={result.ImageResult.ThumbnailURL}
+				alt={result.Title}
+				class="h-full w-full object-contain transform transition"
+			/>
+		</div>
 	</a>
 	<a href={result.ImageResult.SourceURL}>
 		<h1

src/lib/components/search/load/images/LoadImage.svelte

@@ -1,20 +1,16 @@
 <script lang="ts">
-	// types
-	import type { Width } from '$lib/types/width';
-
 	// parameters
 	export let colored: boolean = false;
-	export let width: Width = 64;
 </script>
 
-<div class="animate-pulse">
+<div class="w-full h-full animate-pulse">
 	<div
 		class:bg-hearchco-primary={colored}
 		class:dark:bg-hearchco-secondary={colored}
 		class:bg-gray-300={!colored}
 		class:dark:bg-gray-700={!colored}
-		class="h-full w-full overflow-hidden rounded-lg"
+		class="w-full h-full overflow-hidden rounded-lg"
 	>
-		<div class="h-48 w-{width} object-cover"></div>
+		<div class="h-48 object-cover"></div>
 	</div>
 </div>

src/lib/components/search/load/images/LoadImages.svelte

@@ -3,21 +3,32 @@
 	import LoadImage from '$lib/components/search/load/images/LoadImage.svelte';
 
 	// types
-	import { randomWidth } from '$lib/types/width';
+	import type { ImageFormat } from '$lib/types/result';
 
 	// variables
 	const numberOfResults: number = 32;
+	const fakeImages: ImageFormat[] = randomImages();
+
+	function randomNumber(min: number, max: number): number {
+		return Math.floor(Math.random() * (max - min + 1) + min);
+	}
+	function randomImages(): ImageFormat[] {
+		return Array.from({ length: numberOfResults }, (_) => ({
+			Height: randomNumber(125, 200),
+			Width: randomNumber(100, 300)
+		}));
+	}
 </script>
 
-<div class="px-4 py-8">
-	<section id="images" class="flex flex-wrap justify-center gap-2">
-		{#each { length: numberOfResults } as _, i}
-			<div class="flex-none">
-				{#if i % 3 === 0 && i % Math.floor(2 * Math.random()) !== 0}
-					<LoadImage colored={true} width={randomWidth()} />
-				{:else}
-					<LoadImage width={randomWidth()} />
-				{/if}
+<div class="w-full px-4 py-8">
+	<section id="images" class="grid grid-cols-fit auto-rows-[200px] 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="flex-none"
+			>
+				<LoadImage colored={Math.random() <= 0.1} />
 			</div>
 		{/each}
 	</section>

src/lib/types/result.ts

@@ -5,7 +5,7 @@ type EngineRank = {
 	OnPageRank: number;
 };
 
-type ImageFormat = {
+export type ImageFormat = {
 	Height: number;
 	Width: number;
 };

tailwind.config.js

@@ -19,6 +19,9 @@ export default {
 					'80%': { transform: 'rotate3d(0, 0, 1, -5deg)' },
 					to: { transform: 'rotate3d(0, 0, 1, 0deg)' }
 				}
+			},
+			gridTemplateColumns: {
+				'fit': 'repeat(auto-fit, minmax(200px, 1fr))'
 			}
 		}
 	},