From 23ea1aa58e92e7ae95d2b23c6fa914d4e5772a3d Mon Sep 17 00:00:00 2001
From: Mawoka <mawoka@e.email>
Date: Sat, 25 Jun 2022 17:29:18 +0200
Subject: [PATCH] :sparkles: Displaying if Quiz is imported in search-results
 directly

---
 classquiz/routers/search.py                   |  1 +
 frontend/src/lib/search-card.svelte           | 26 +++++---
 .../src/lib/view_quiz/imported_or_not.svelte  | 62 +++++++++++++++++++
 frontend/src/routes/view/[quiz_id].svelte     | 51 +--------------
 4 files changed, 83 insertions(+), 57 deletions(-)
 create mode 100644 frontend/src/lib/view_quiz/imported_or_not.svelte

diff --git a/classquiz/routers/search.py b/classquiz/routers/search.py
index 147bdf6..6fb1b5b 100644
--- a/classquiz/routers/search.py
+++ b/classquiz/routers/search.py
@@ -17,6 +17,7 @@ class Hit(pydantic.BaseModel):
     title: str
     description: str
     user: str
+    imported_from_kahoot: bool
     formatted: Optional["Hit"] = pydantic.Field(None, alias="_formatted")
 
 
diff --git a/frontend/src/lib/search-card.svelte b/frontend/src/lib/search-card.svelte
index 54a4007..13ed198 100644
--- a/frontend/src/lib/search-card.svelte
+++ b/frontend/src/lib/search-card.svelte
@@ -4,6 +4,7 @@
 	const { t } = getLocalization();
 	export let quiz;
 	export let enable_html = false;
+	import ImportedOrNot from '$lib/view_quiz/imported_or_not.svelte';
 </script>
 
 <div class="flex justify-center">
@@ -14,14 +15,23 @@
 								 src='https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80'>
 						</div>-->
 			<div>
-				<h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">
-					{#if enable_html}
-						{@html quiz.title}
-					{:else}
-						{quiz.title}
-					{/if}
-				</h2>
-				<p class="mt-2 text-gray-600 dark:text-gray-300">
+				<div class="flex w-full items-center">
+					<h2
+						class="text-gray-800 dark:text-gray-200 text-3xl font-semibold truncate pr-2"
+					>
+						{#if enable_html}
+							{@html quiz.title}
+						{:else}
+							{quiz.title}
+						{/if}
+					</h2>
+					<span class="inline-block text-right w-full">
+						<ImportedOrNot imported={quiz.imported_from_kahoot} />
+					</span>
+				</div>
+				<p
+					class="mt-2 text-gray-600 dark:text-gray-300 break-all overflow-hidden text-ellipsis max-h-[4.5rem] block"
+				>
 					{#if enable_html} {@html quiz.description}{:else}{quiz.description} {/if}
 				</p>
 			</div>
diff --git a/frontend/src/lib/view_quiz/imported_or_not.svelte b/frontend/src/lib/view_quiz/imported_or_not.svelte
new file mode 100644
index 0000000..e530a49
--- /dev/null
+++ b/frontend/src/lib/view_quiz/imported_or_not.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { createTippy } from 'svelte-tippy';
+	import 'tippy.js/animations/perspective-subtle.css';
+	import 'tippy.js/dist/tippy.css';
+
+	export let imported: boolean | undefined;
+	const tippy = createTippy({
+		arrow: true,
+		animation: 'perspective-subtle',
+		placement: 'right'
+	});
+</script>
+
+{#if imported === true}
+	<svg
+		class="w-6 h-6 inline-block h-8 w-8 align-middle"
+		fill="none"
+		stroke="currentColor"
+		viewBox="0 0 24 24"
+		use:tippy={{ content: 'This quiz is imported from KAHOOT!' }}
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="2"
+			d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+		/>
+	</svg>
+{:else if imported === false}
+	<svg
+		class="w-6 h-6 inline-block h-8 w-8 align-middle"
+		fill="none"
+		stroke="currentColor"
+		viewBox="0 0 24 24"
+		use:tippy={{ content: 'This quiz was made by the creator themself!' }}
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="2"
+			d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
+		/>
+	</svg>
+{:else}
+	<svg
+		class="w-6 h-6 inline-block h-8 w-8 align-middle"
+		fill="none"
+		stroke="currentColor"
+		viewBox="0 0 24 24"
+		use:tippy={{ content: 'This quiz could be imported, it could be OC.' }}
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="2"
+			d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+		/>
+	</svg>
+{/if}
diff --git a/frontend/src/routes/view/[quiz_id].svelte b/frontend/src/routes/view/[quiz_id].svelte
index cd7d37c..54a8b78 100644
--- a/frontend/src/routes/view/[quiz_id].svelte
+++ b/frontend/src/routes/view/[quiz_id].svelte
@@ -28,6 +28,7 @@
 	import { createTippy } from 'svelte-tippy';
 	import 'tippy.js/animations/perspective-subtle.css';
 	import 'tippy.js/dist/tippy.css';
+	import ImportedOrNot from '$lib/view_quiz/imported_or_not.svelte';
 
 	const tippy = createTippy({
 		arrow: true,
@@ -94,55 +95,7 @@
 		<p>{quiz.description}</p>
 	</div>
 	<div class="text-center text-sm pt-1">
-		{#if quiz.imported_from_kahoot === true}
-			<svg
-				class="w-6 h-6 inline-block h-8 w-8 align-middle"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				use:tippy={{ content: 'This quiz is imported from KAHOOT!' }}
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-				/>
-			</svg>
-		{:else if quiz.imported_from_kahoot === false}
-			<svg
-				class="w-6 h-6 inline-block h-8 w-8 align-middle"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				use:tippy={{ content: 'This quiz was made by the creator themself!' }}
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
-				/>
-			</svg>
-		{:else}
-			<svg
-				class="w-6 h-6 inline-block h-8 w-8 align-middle"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				use:tippy={{ content: 'TThis quiz could be imported, it could be OC.' }}
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-				/>
-			</svg>
-		{/if}
+		<ImportedOrNot imported={quiz.imported_from_kahoot} />
 	</div>
 
 	<div class="flex justify-center m-8">