LobotomyLabs/classquiz-ai
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Implemented thumbhash into MediaComponent and reduced content-shift in editor

Browse Source
This commit is contained in:
Mawoka
2023-09-23 11:15:40 +02:00
parent dd0f953713
commit c7f6f4dc7c
3 changed files with 21 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/editor/card.svelte
+8 -9
View File
@@ -13,6 +13,7 @@ SPDX-License-Identifier: MPL-2.0
import Spinner from '../Spinner.svelte';
// import { createTippy } from 'svelte-tippy';
import { getLocalization } from '$lib/i18n';
import MediaComponent from '$lib/editor/MediaComponent.svelte';
// import MediaComponent from "$lib/editor/MediaComponent.svelte";
const { t } = getLocalization();
@@ -79,7 +80,7 @@ SPDX-License-Identifier: MPL-2.0
*/
</script>
<div class="w-full max-h-full pb-20 px-20 h-full">
<div class="w-full max-h-full pb-10 px-10 h-full">
<div class="rounded-lg bg-white w-full h-full border-gray-500 dark:bg-gray-700 shadow-2xl">
<div class="h-12 bg-gray-300 rounded-t-lg dark:bg-gray-500">
<div class="flex align-middle p-4 gap-3">
@@ -123,9 +124,9 @@ SPDX-License-Identifier: MPL-2.0
{/await}
{/key}
</div>
{#if data.questions[selected_question].image != undefined && data.questions[selected_question].image !== ''}
<div class="flex justify-center pt-10 w-full max-h-72">
<div class="max-h-72 h-auto relative">
{#if data.questions[selected_question].image}
<div class="flex justify-center pt-10 w-full h-72">
<div class="h-72 relative">
<button
class="rounded-full absolute -top-2 -right-2 opacity-70 hover:opacity-100 transition"
type="button"
@@ -148,9 +149,7 @@ SPDX-License-Identifier: MPL-2.0
/>
</svg>
</button>
{#await import('$lib/editor/MediaComponent.svelte') then c}
<svelte:component this={c.default} bind:src={image_url} />
{/await}
<MediaComponent bind:src={image_url} />
</div>
</div>
{:else}
@@ -192,10 +191,10 @@ SPDX-License-Identifier: MPL-2.0
/>
</div>
</div>
<div class="flex justify-center pt-10">
<div class="flex justify-center py-5">
<p>{type_to_name[String(data.questions[selected_question].type)]}</p>
</div>
<div class="flex justify-center py-10 w-full">
<div class="flex justify-center w-full">
{#if type === QuizQuestionType.ABCD || type === QuizQuestionType.CHECK}
{#await import('$lib/editor/ABCDEditorPart.svelte')}
<Spinner my_20={false} />