Displaying if Quiz is imported in search-results directly

This commit is contained in:
Mawoka
2022-06-25 17:29:18 +02:00
parent 2f053c806a
commit 23ea1aa58e
4 changed files with 83 additions and 57 deletions
+1
View File
@@ -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")
+18 -8
View File
@@ -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>
@@ -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}
+2 -49
View File
@@ -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">