Merge pull request #158 from hearchco/as/refactor/loaddisplay

fix(search): refactor components and line clamp

src/lib/components/search/display/Display.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	// components
+	import Results from '$lib/components/search/display/general/Results.svelte';
+	import Images from '$lib/components/search/display/images/Images.svelte';
+	import Error from '$lib/components/Error.svelte';
+
+	// functions
+	import { categoryFrom } from '$lib/functions/categoryFrom';
+
+	// types
+	import type { ResultType } from '$lib/types/result';
+	import { CategoryEnum } from '$lib/types/category';
+
+	// parameters
+	export let query: string;
+	export let currentPage: number;
+	export let maxPages: number;
+	export let results: ResultType[];
+
+	// variables
+	const category: string = categoryFrom(query);
+</script>
+
+<!-- todo: await deep results and offer button to switch to them -->
+{#if category === CategoryEnum.IMAGES}
+	<Images bind:query bind:maxPages bind:results />
+{:else if category !== undefined}
+	<Results bind:query bind:currentPage bind:results />
+{:else}
+	<Error statusCode={'500'} message={'Unknown category requested.'} />
+{/if}

src/lib/components/search/result/Pages.svelte → src/lib/components/search/display/general/Pages.svelte

@@ -1,5 +1,3 @@
-<!-- used for general results -->
-
 <script lang="ts">
 	// parameters
 	export let query: string;

src/lib/components/search/result/Result.svelte → src/lib/components/search/display/general/Result.svelte

@@ -18,7 +18,7 @@
 	</h1>
 	<p
 		id="description-{result.Rank}"
-		class="my-1 text-justify text-sm text-gray-600 dark:text-gray-200"
+		class="my-1 text-justify text-sm text-gray-600 dark:text-gray-200 line-clamp-6 hover:line-clamp-none"
 	>
 		{result.Description}
 	</p>

src/lib/components/search/display/general/Results.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	// components
+	import Result from '$lib/components/search/display/general/Result.svelte';
+	import Pages from '$lib/components/search/display/general/Pages.svelte';
+
+	// types
+	import type { ResultType } from '$lib/types/result';
+
+	// parameters
+	export let query: string;
+	export let currentPage: number;
+	export let results: ResultType[];
+</script>
+
+<div class="sm:mx-auto mb-4 max-w-screen-sm">
+	<section id="results" class="mx-2 my-4 max-w-fit overflow-clip">
+		{#each results as result, i (result.URL)}
+			<Result {result} />
+			{#if i !== results.length - 1}
+				<hr class="my-2 border border-gray-200 dark:border-gray-600" />
+			{/if}
+		{/each}
+	</section>
+</div>
+<Pages bind:query bind:currentPage />

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

@@ -0,0 +1,52 @@
+<script lang="ts">
+	// components
+	import Image from '$lib/components/search/display/images/Image.svelte';
+	import Preview from '$lib/components/search/display/images/Preview.svelte';
+	import ShowMore from '$lib/components/search/display/images/ShowMore.svelte';
+
+	// types
+	import type { ResultType } from '$lib/types/result';
+
+	// parameters
+	export let query: string;
+	export let maxPages: number;
+	export let results: ResultType[];
+
+	// variables
+	let imgResultPreview: ResultType | undefined;
+</script>
+
+<div class="w-full lg:flex px-4 py-8">
+	{#if imgResultPreview !== undefined}
+		<div id="image-preview" class="lg:hidden">
+			<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>
+	{#if imgResultPreview !== undefined}
+		<div id="image-preview" class="hidden lg:block w-1/3">
+			<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/result/ShowMore.svelte → src/lib/components/search/display/images/ShowMore.svelte

@@ -1,5 +1,3 @@
-<!-- used for image results -->
-
 <script lang="ts">
 	// parameters
 	export let query: string;

src/lib/components/search/load/Load.svelte

@@ -1,14 +1,41 @@
-<div class="w-full animate-pulse">
-	<div
-		class="w-max-content min-[292px]:w-[292px] h-[20px] bg-gray-800 dark:bg-gray-400 rounded-full"
-	></div>
-	<div
-		class="my-0.5 w-max-content min-[230px]:w-[218px] h-[28px] bg-hearchco-primary dark:bg-hearchco-secondary rounded-lg"
-	></div>
-	<div
-		class="my-0.5 w-max-content sm:w-[620px] h-10 text-sm bg-gray-600 dark:bg-gray-200 rounded-lg"
-	></div>
-	<div class="my-2 flex justify-end rounded-lg">
-		<div class="w-[115px] h-[15px] bg-gray-800 dark:bg-gray-400 rounded-lg"></div>
-	</div>
-</div>
+<script lang="ts">
+	// components
+	import Error from '$lib/components/Error.svelte';
+	import LoadResults from '$lib/components/search/load/general/LoadResults.svelte';
+	import LoadImages from '$lib/components/search/load/images/LoadImages.svelte';
+
+	// functions
+	import { categoryFrom } from '$lib/functions/categoryFrom';
+
+	// types
+	import { CategoryEnum } from '$lib/types/category';
+
+	// parameters
+	export let query: string;
+
+	// variables
+	const category: string = categoryFrom(query);
+</script>
+
+{#if category === CategoryEnum.IMAGES}
+	<LoadImages />
+{:else if category !== undefined}
+	<LoadResults />
+{:else}
+	<Error statusCode={'500'} message={'Unknown category requested.'} />
+{/if}
+
+<!-- this will never render -->
+{#if false}
+	<!-- needed for randomWidth to work because if classes aren't used anywhere TailwindCSS won't include them -->
+	<div class="hidden w-32"></div>
+	<div class="hidden w-36"></div>
+	<div class="hidden w-40"></div>
+	<div class="hidden w-44"></div>
+	<div class="hidden w-48"></div>
+	<div class="hidden w-52"></div>
+	<div class="hidden w-56"></div>
+	<div class="hidden w-60"></div>
+	<div class="hidden w-64"></div>
+	<div class="hidden w-72"></div>
+{/if}

src/lib/components/search/load/general/LoadResult.svelte

@@ -0,0 +1,14 @@
+<div class="w-full animate-pulse">
+	<div
+		class="w-max-content min-[292px]:w-[292px] h-[20px] bg-gray-800 dark:bg-gray-400 rounded-full"
+	></div>
+	<div
+		class="my-0.5 w-max-content min-[230px]:w-[218px] h-[28px] bg-hearchco-primary dark:bg-hearchco-secondary rounded-lg"
+	></div>
+	<div
+		class="my-0.5 w-max-content sm:w-[620px] h-10 text-sm bg-gray-600 dark:bg-gray-200 rounded-lg"
+	></div>
+	<div class="my-2 flex justify-end rounded-lg">
+		<div class="w-[115px] h-[15px] bg-gray-800 dark:bg-gray-400 rounded-lg"></div>
+	</div>
+</div>

src/lib/components/search/load/general/LoadResults.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	// components
+	import LoadResult from '$lib/components/search/load/general/LoadResult.svelte';
+
+	// variables
+	const numberOfResults: number = 32;
+</script>
+
+<div class="sm:mx-auto mb-4 max-w-screen-sm">
+	<section id="results" class="mx-2 my-4">
+		{#each { length: numberOfResults } as _, i}
+			<LoadResult />
+			{#if i !== numberOfResults - 1}
+				<hr class="my-2 border border-gray-200 dark:border-gray-600" />
+			{/if}
+		{/each}
+	</section>
+</div>

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+	// components
+	import LoadImage from '$lib/components/search/load/images/LoadImage.svelte';
+
+	// types
+	import { randomWidth } from '$lib/types/width';
+
+	// variables
+	const numberOfResults: number = 32;
+</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>
+		{/each}
+	</section>
+</div>