Most dependencies updated, except Svelte
This commit is contained in:
@@ -62,7 +62,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
{#if Array.isArray(data.questions[selected_question].answers)}
|
||||
{#each data.questions[selected_question].answers as answer, index}
|
||||
<div
|
||||
out:fade|local={{ duration: 150 }}
|
||||
out:fade={{ duration: 150 }}
|
||||
class="p-4 rounded-lg flex justify-center w-full transition relative"
|
||||
class:bg-red-500={!answer.right}
|
||||
class:bg-green-500={answer.right}
|
||||
@@ -97,7 +97,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
<input
|
||||
bind:value={answer.answer}
|
||||
type="text"
|
||||
class="border-b-2 border-dotted w-5/6 text-center rounded-lg bg-transparent outline-none focus:shadow-2xl transition-all"
|
||||
class="border-b-2 border-dotted w-5/6 text-center rounded-lg bg-transparent outline-hidden focus:shadow-2xl transition-all"
|
||||
style="background-color: {answer.color}; color: {get_foreground_color(
|
||||
answer.color
|
||||
)}"
|
||||
@@ -156,7 +156,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
<button
|
||||
class="p-4 rounded-lg bg-transparent border-gray-500 border-2 hover:bg-gray-300 transition dark:hover:bg-gray-600"
|
||||
type="button"
|
||||
in:fade|local={{ duration: 150 }}
|
||||
in:fade={{ duration: 150 }}
|
||||
on:click={() => {
|
||||
data.questions[selected_question].answers = [
|
||||
...data.questions[selected_question].answers,
|
||||
|
||||
@@ -95,15 +95,17 @@ SPDX-License-Identifier: MPL-2.0
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="fixed top-0 left-0 w-screen h-screen flex bg-black z-50 bg-opacity-50"
|
||||
class="fixed top-0 left-0 w-screen h-screen flex bg-black/50 z-50"
|
||||
on:click={on_parent_click}
|
||||
transition:fade|local={{ duration: 100 }}
|
||||
transition:fade={{ duration: 100 }}
|
||||
>
|
||||
<div class="m-auto w-2/3 h-5/6 rounded shadow-2xl bg-white dark:bg-gray-600 p-6 flex flex-col">
|
||||
<div
|
||||
class="m-auto w-2/3 h-5/6 rounded-sm shadow-2xl bg-white dark:bg-gray-600 p-6 flex flex-col"
|
||||
>
|
||||
<h1 class="text-center text-3xl mb-6">{$t('quiztivity.editor.select_page_type')}</h1>
|
||||
<div class="grid grid-cols-4 gap-4 overflow-y-scroll">
|
||||
{#each question_types as qt, i}
|
||||
<div class="rounded p-6 border-[#B07156] border">
|
||||
<div class="rounded-sm p-6 border-[#B07156] border">
|
||||
<button
|
||||
class="text-xl text-black dark:text-white"
|
||||
on:click={() => {
|
||||
|
||||
@@ -67,7 +67,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
{:then data}
|
||||
{#if type === 'img'}
|
||||
<img
|
||||
in:fade={{ duration: 300 }}
|
||||
in:fade|global={{ duration: 300 }}
|
||||
src={img_data.data}
|
||||
alt={img_data.alt_text ?? 'Not available'}
|
||||
class={css_classes}
|
||||
@@ -93,14 +93,14 @@ SPDX-License-Identifier: MPL-2.0
|
||||
|
||||
{#if fullscreen_open}
|
||||
<div
|
||||
class="fixed top-0 left-0 z-50 w-screen h-screen bg-black bg-opacity-50 fle p-2"
|
||||
transition:fade={{ duration: 80 }}
|
||||
class="fixed top-0 left-0 z-50 w-screen h-screen bg-black/50 fle p-2"
|
||||
transition:fade|global={{ duration: 80 }}
|
||||
on:click={() => (fullscreen_open = false)}
|
||||
>
|
||||
<img
|
||||
src={img_data.data}
|
||||
alt={img_data.alt_text ?? 'Not available'}
|
||||
class="object-cover rounded m-auto max-h-full max-w-full"
|
||||
class="object-cover rounded-sm m-auto max-h-full max-w-full"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -72,7 +72,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
{#each data.questions[selected_question].answers as answer, i (answer.id)}
|
||||
<div
|
||||
animate:flip={{ duration: 200 }}
|
||||
out:fade|local={{ duration: 150 }}
|
||||
out:fade={{ duration: 150 }}
|
||||
class="p-4 rounded-lg flex justify-center w-full transition relative border border-gray-600 flex-row gap-4 m-2"
|
||||
>
|
||||
<button
|
||||
@@ -154,7 +154,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
<input
|
||||
bind:value={answer.answer}
|
||||
type="text"
|
||||
class="border-b-2 border-dotted w-5/6 text-center rounded-lg bg-transparent outline-none"
|
||||
class="border-b-2 border-dotted w-5/6 text-center rounded-lg bg-transparent outline-hidden"
|
||||
style="background-color: {answer.color}; color: {get_foreground_color(
|
||||
answer.color
|
||||
)}"
|
||||
@@ -177,7 +177,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
<button
|
||||
class="p-4 rounded-lg bg-transparent border-gray-500 border-2 hover:bg-gray-300 transition dark:hover:bg-gray-600 m-2 w-full"
|
||||
type="button"
|
||||
in:fade|local={{ duration: 150 }}
|
||||
in:fade={{ duration: 150 }}
|
||||
on:click={() => {
|
||||
data.questions[selected_question].answers = [
|
||||
...data.questions[selected_question].answers,
|
||||
|
||||
@@ -45,7 +45,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
{#if Array.isArray(data.questions[selected_question].answers)}
|
||||
{#each data.questions[selected_question].answers as answer, index}
|
||||
<div
|
||||
out:fade|local={{ duration: 150 }}
|
||||
out:fade={{ duration: 150 }}
|
||||
class="p-4 rounded-lg flex justify-center w-full transition relative"
|
||||
class:dark:bg-gray-500={answer.answer}
|
||||
class:bg-gray-300={answer.answer}
|
||||
@@ -80,7 +80,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
<input
|
||||
bind:value={answer.answer}
|
||||
type="text"
|
||||
class="border-b-2 border-dotted w-5/6 text-center rounded-lg bg-transparent outline-none"
|
||||
class="border-b-2 border-dotted w-5/6 text-center rounded-lg bg-transparent outline-hidden"
|
||||
placeholder={$t('editor.enter_answer')}
|
||||
/>
|
||||
<button
|
||||
@@ -129,7 +129,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
<button
|
||||
class="p-4 rounded-lg bg-transparent border-gray-500 border-2 hover:bg-gray-300 transition dark:hover:bg-gray-600"
|
||||
type="button"
|
||||
in:fade|local={{ duration: 150 }}
|
||||
in:fade={{ duration: 150 }}
|
||||
on:click={() => {
|
||||
data.questions[selected_question].answers = [
|
||||
...data.questions[selected_question].answers,
|
||||
|
||||
@@ -53,7 +53,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
{#if Array.isArray(data.questions[selected_question].answers)}
|
||||
{#each data.questions[selected_question].answers as answer, index}
|
||||
<div
|
||||
out:fade|local={{ duration: 150 }}
|
||||
out:fade={{ duration: 150 }}
|
||||
class="p-4 rounded-lg flex justify-center w-full transition relative"
|
||||
class:bg-yellow-500={!reach(VotingQuestionSchema, 'answer').isValidSync(
|
||||
answer.answer
|
||||
@@ -108,7 +108,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
<button
|
||||
class="p-4 rounded-lg bg-transparent border-gray-500 border-2 hover:bg-gray-300 transition dark:hover:bg-gray-600"
|
||||
type="button"
|
||||
in:fade|local={{ duration: 150 }}
|
||||
in:fade={{ duration: 150 }}
|
||||
on:click={() => {
|
||||
data.questions[selected_question].answers = [
|
||||
...data.questions[selected_question].answers,
|
||||
|
||||
@@ -116,12 +116,12 @@ SPDX-License-Identifier: MPL-2.0
|
||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
/>
|
||||
<path
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
@@ -217,7 +217,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
type="number"
|
||||
max="999"
|
||||
min="1"
|
||||
class="w-20 bg-transparent rounded-lg text-lg border-2 border-gray-500 p-1 outline-none focus:shadow-2xl"
|
||||
class="w-20 bg-transparent rounded-lg text-lg border-2 border-gray-500 p-1 outline-hidden focus:shadow-2xl"
|
||||
bind:value={data.questions[selected_question].time}
|
||||
/>
|
||||
<p class="inline-block">s</p>
|
||||
@@ -268,18 +268,24 @@ SPDX-License-Identifier: MPL-2.0
|
||||
{#if advanced_options_open}
|
||||
<div
|
||||
class="fixed top-0 left-0 w-full h-full bg-black/60 flex"
|
||||
transition:fade={{ duration: 150 }}
|
||||
transition:fade|global={{ duration: 150 }}
|
||||
>
|
||||
<div class="w-1/4 h-1/3 m-auto bg-white dark:bg-gray-700 rounded-lg flex flex-col p-2 gap-2">
|
||||
<div
|
||||
class="w-1/4 h-1/3 m-auto bg-white dark:bg-gray-700 rounded-lg flex flex-col p-2 gap-2"
|
||||
>
|
||||
<h1 class="text-3xl mx-auto">{$t('editor.advanced_settings')}</h1>
|
||||
<label class="flex justify-around text-lg">
|
||||
<span class="my-auto">{$t('editor.hide_question_results')}</span>
|
||||
<input type="checkbox" bind:checked={data.questions[selected_question]["hide_results"]} />
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={data.questions[selected_question]['hide_results']}
|
||||
/>
|
||||
</label>
|
||||
<div class="mt-auto w-full">
|
||||
<BrownButton on:click={() => (advanced_options_open = false)}>{$t('words.close')}</BrownButton>
|
||||
<BrownButton on:click={() => (advanced_options_open = false)}
|
||||
>{$t('words.close')}</BrownButton
|
||||
>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -65,7 +65,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
type="text"
|
||||
placeholder="Description"
|
||||
bind:value={data.description}
|
||||
class="p-3 rounded-lg border-gray-500 border text-center w-1/3 h-20 resize-none dark:bg-gray-500 outline-none focus:shadow-2xl transition-all"
|
||||
class="p-3 rounded-lg border-gray-500 border text-center w-1/3 h-20 resize-none dark:bg-gray-500 outline-hidden focus:shadow-2xl transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -164,7 +164,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
class="sr-only peer"
|
||||
/>
|
||||
<span
|
||||
class="w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
|
||||
class="w-14 h-7 bg-gray-200 peer-focus:outline-hidden peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -82,7 +82,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
<div class="border-r-2 pt-6 px-6 overflow-scroll h-full">
|
||||
<div
|
||||
bind:this={propertyCard}
|
||||
class="bg-white shadow rounded-lg h-40 p-2 mb-6 hover:cursor-pointer drop-shadow-2xl border border-gray-500 dark:bg-gray-600 transition"
|
||||
class="bg-white shadow-smrounded-lg h-40 p-2 mb-6 hover:cursor-pointer drop-shadow-2xl border border-gray-500 dark:bg-gray-600 transition"
|
||||
class:bg-green-300={selected_question === -1}
|
||||
class:dark:bg-green-500={selected_question === -1}
|
||||
on:click={() => setSelectedQuestion(-1)}
|
||||
@@ -96,7 +96,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
>
|
||||
<p
|
||||
type="text"
|
||||
class="whitespace-nowrap truncate text-center w-full bg-transparent rounded dark:text-white"
|
||||
class="whitespace-nowrap truncate text-center w-full bg-transparent rounded-sm dark:text-white"
|
||||
class:dark:text-black={selected_question === -1}
|
||||
>
|
||||
{#if data.title}
|
||||
@@ -117,7 +117,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
>
|
||||
<textarea
|
||||
bind:value={data.description}
|
||||
class="bg-transparent resize-none w-full rounded text-sm dark:text-white"
|
||||
class="bg-transparent resize-none w-full rounded-sm text-sm dark:text-white"
|
||||
class:dark:text-black={selected_question === -1}
|
||||
/>
|
||||
</div>
|
||||
@@ -170,7 +170,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
</div>
|
||||
{#each data.questions as question, index}
|
||||
<div
|
||||
class="bg-white shadow rounded-lg h-40 p-2 mb-6 hover:cursor-pointer drop-shadow-2xl border border-gray-500 dark:bg-gray-600 transition relative"
|
||||
class="bg-white shadow-smrounded-lg h-40 p-2 mb-6 hover:cursor-pointer drop-shadow-2xl border border-gray-500 dark:bg-gray-600 transition relative"
|
||||
class:bg-green-300={index === selected_question}
|
||||
class:dark:bg-green-500={index === selected_question}
|
||||
on:click={() => {
|
||||
@@ -180,8 +180,8 @@ SPDX-License-Identifier: MPL-2.0
|
||||
>
|
||||
{#if reorder_mode}
|
||||
<div
|
||||
transition:fade={{ duration: 90 }}
|
||||
class="absolute z-10 grid grid-cols-2 bg-transparent w-full rounded h-full"
|
||||
transition:fade|global={{ duration: 90 }}
|
||||
class="absolute z-10 grid grid-cols-2 bg-transparent w-full rounded-sm h-full"
|
||||
>
|
||||
<!-- Div is used, since it just put me on the dashboard when using button elements... Idk why and I hate it-->
|
||||
<div
|
||||
@@ -298,7 +298,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
class="h-10 border rounded-lg"
|
||||
alt="Not available"
|
||||
use:tippy={{
|
||||
content: `<img src="/api/v1/storage/download/${question.image}" alt="Not available" class="rounded">`,
|
||||
content: `<img src="/api/v1/storage/download/${question.image}" alt="Not available" class="rounded-sm">`,
|
||||
allowHTML: true
|
||||
}}
|
||||
/>
|
||||
@@ -375,7 +375,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
</div>
|
||||
{/each}
|
||||
<div
|
||||
class="bg-white shadow rounded-lg h-40 p-2 hover:cursor-pointer drop-shadow-2xl border border-gray-500 dark:bg-gray-600 grid grid-cols-2"
|
||||
class="bg-white shadow-smrounded-lg h-40 p-2 hover:cursor-pointer drop-shadow-2xl border border-gray-500 dark:bg-gray-600 grid grid-cols-2"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@@ -101,7 +101,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
{#if opened_dropdown === 'color'}
|
||||
<div
|
||||
class="bg-white m-auto rounded-lg shadow-lg p-4 dark:bg-gray-600 h-fit gap-2 w-fit auto-cols-min flex absolute z-40"
|
||||
transition:fade={{ duration: 100 }}
|
||||
transition:fade|global={{ duration: 100 }}
|
||||
>
|
||||
<input type="color" on:change={change_color} />
|
||||
</div>
|
||||
@@ -137,7 +137,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
{#if opened_dropdown === 'font_size'}
|
||||
<div
|
||||
class="bg-white m-auto rounded-lg shadow-lg p-4 dark:bg-gray-600 h-fit gap-2 w-fit auto-cols-min flex absolute z-40"
|
||||
transition:fade={{ duration: 100 }}
|
||||
transition:fade|global={{ duration: 100 }}
|
||||
>
|
||||
<input
|
||||
type="range"
|
||||
|
||||
@@ -75,7 +75,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
|
||||
<div
|
||||
class="bg-white m-auto rounded-lg shadow-lg p-4 flex flex-col dark:bg-gray-600 h-fit"
|
||||
transition:fade={{ duration: 100 }}
|
||||
transition:fade|global={{ duration: 100 }}
|
||||
>
|
||||
<ul>
|
||||
{#each element_list as el}
|
||||
|
||||
@@ -19,14 +19,14 @@ SPDX-License-Identifier: MPL-2.0
|
||||
|
||||
<div
|
||||
class="bg-white m-auto rounded-lg shadow-lg p-4 dark:bg-gray-600 h-fit gap-2 w-fit auto-cols-min flex"
|
||||
transition:fade={{ duration: 100 }}
|
||||
transition:fade|global={{ duration: 100 }}
|
||||
>
|
||||
<label class="w-fit">
|
||||
Time
|
||||
<input
|
||||
bind:value={time}
|
||||
type="number"
|
||||
class="w-20 bg-transparent rounded-lg text-lg border-2 border-gray-500 p-1 outline-none"
|
||||
class="w-20 bg-transparent rounded-lg text-lg border-2 border-gray-500 p-1 outline-hidden"
|
||||
/>
|
||||
</label>
|
||||
<label class="w-fit">
|
||||
@@ -34,7 +34,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
<input
|
||||
bind:value={title}
|
||||
type="text"
|
||||
class="bg-transparent rounded-lg text-lg border-2 border-gray-500 p-1 transition outline-none"
|
||||
class="bg-transparent rounded-lg text-lg border-2 border-gray-500 p-1 transition outline-hidden"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -19,7 +19,6 @@ SPDX-License-Identifier: MPL-2.0
|
||||
import '@uppy/core/dist/style.css';
|
||||
import '@uppy/dashboard/dist/style.css';
|
||||
import '@uppy/drop-target/dist/style.css';
|
||||
// import '@uppy/file-input/dist/style.css'
|
||||
import '@uppy/image-editor/dist/style.css';
|
||||
import type { EditorData } from '../quiz_types';
|
||||
import { getLocalization } from '$lib/i18n';
|
||||
@@ -134,12 +133,12 @@ SPDX-License-Identifier: MPL-2.0
|
||||
|
||||
{#if modalOpen}
|
||||
<div
|
||||
class="w-screen h-screen fixed top-0 left-0 bg-opacity-50 bg-black z-20 flex justify-center"
|
||||
class="w-screen h-screen fixed top-0 left-0 bg-black/50 z-20 flex justify-center"
|
||||
on:click={handle_on_click}
|
||||
transition:fade|local={{ duration: 100 }}
|
||||
transition:fade={{ duration: 100 }}
|
||||
>
|
||||
{#if selected_type === null}
|
||||
<div class="m-auto w-1/3 h-auto bg-white dark:bg-gray-700 p-4 rounded">
|
||||
<div class="m-auto w-1/3 h-auto bg-white dark:bg-gray-700 p-4 rounded-sm">
|
||||
<h1 class="text-3xl text-center mb-4">{$t('uploader.select_upload_type')}</h1>
|
||||
<div class="flex flex-row gap-4">
|
||||
<div class="w-full">
|
||||
@@ -180,15 +179,15 @@ SPDX-License-Identifier: MPL-2.0
|
||||
</div>
|
||||
</div>
|
||||
{:else if selected_type === AvailableUploadTypes.Image}
|
||||
<div class="m-auto w-1/3 h-5/6" transition:fade|local={{ duration: 100 }}>
|
||||
<div class="m-auto w-1/3 h-5/6" transition:fade={{ duration: 100 }}>
|
||||
<div>
|
||||
<SvelteDashboard {uppy} width="100%" {props} />
|
||||
</div>
|
||||
</div>
|
||||
{:else if selected_type === AvailableUploadTypes.Video}
|
||||
<div
|
||||
class="m-auto w-1/3 h-auto bg-white dark:bg-gray-700 p-4 rounded"
|
||||
transition:fade|local={{ duration: 100 }}
|
||||
class="m-auto w-1/3 h-auto bg-white dark:bg-gray-700 p-4 rounded-sm"
|
||||
transition:fade={{ duration: 100 }}
|
||||
>
|
||||
<h1 class="text-3xl text-center mb-4">{$t('uploader.upload_a_video')}</h1>
|
||||
{#if video_popup}
|
||||
@@ -212,7 +211,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex justify-center w-full pt-10" transition:fade|local>
|
||||
<div class="flex justify-center w-full pt-10" transition:fade>
|
||||
<button
|
||||
class="rounded-lg p-4 flex justify-center bg-transparent border-gray-500 border-2 w-1/2 hover:bg-gray-300 dark:hover:bg-gray-600 transition"
|
||||
type="button"
|
||||
|
||||
@@ -40,16 +40,16 @@ SPDX-License-Identifier: MPL-2.0
|
||||
{:then images}
|
||||
<div class="flex w-screen p-8 h-screen">
|
||||
<div
|
||||
class="flex flex-col w-1/3 m-auto overflow-scroll h-full rounded p-4 gap-4 bg-white dark:bg-gray-700"
|
||||
class="flex flex-col w-1/3 m-auto overflow-scroll h-full rounded-sm p-4 gap-4 bg-white dark:bg-gray-700"
|
||||
>
|
||||
{#each images as image}
|
||||
<div class="rounded border-2 border-[#B07156] p-2 flex-col flex gap-2">
|
||||
<div class="rounded-sm border-2 border-[#B07156] p-2 flex-col flex gap-2">
|
||||
<div>
|
||||
<img
|
||||
src="/api/v1/storage/download/{image.id}"
|
||||
loading="lazy"
|
||||
alt={image.alt_text}
|
||||
class="object-contain w-full h-full max-h-full rounded"
|
||||
class="object-contain w-full h-full max-h-full rounded-sm"
|
||||
/>
|
||||
</div>
|
||||
<p class="text-center">{image.filename ?? 'No name available'}</p>
|
||||
|
||||
@@ -53,7 +53,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
{:else}
|
||||
<div class="flex w-screen p-8 h-full mt-8 mb-1">
|
||||
<div
|
||||
class="flex flex-col w-1/3 m-auto overflow-scroll h-full rounded p-4 gap-2 bg-white dark:bg-gray-700"
|
||||
class="flex flex-col w-1/3 m-auto overflow-scroll h-full rounded-sm p-4 gap-2 bg-white dark:bg-gray-700"
|
||||
>
|
||||
<h1 class="text-2xl text-center">{$t('uploader.images_by_pixabay')}</h1>
|
||||
<div class="flex">
|
||||
@@ -67,7 +67,7 @@ SPDX-License-Identifier: MPL-2.0
|
||||
on:submit|preventDefault={() => (fetched_data = fetch_data())}
|
||||
>
|
||||
<input
|
||||
class="w-full outline-none p-1 rounded dark:bg-gray-500 bg-gray-300"
|
||||
class="w-full outline-hidden p-1 rounded-sm dark:bg-gray-500 bg-gray-300"
|
||||
bind:value={search_term}
|
||||
/>
|
||||
<div class="w-fit">
|
||||
@@ -77,13 +77,13 @@ SPDX-License-Identifier: MPL-2.0
|
||||
<span class="italic text-center text-sm">{$t('uploader.search_english_only')}</span>
|
||||
|
||||
{#each data.hits as image}
|
||||
<div class="rounded border-2 border-[#B07156] p-2 flex-col flex gap-2">
|
||||
<div class="rounded-sm border-2 border-[#B07156] p-2 flex-col flex gap-2">
|
||||
<div>
|
||||
<img
|
||||
src={image.webformatURL}
|
||||
loading="lazy"
|
||||
alt="unavailable"
|
||||
class="object-contain w-full h-full rounded max-h-[80vh]"
|
||||
class="object-contain w-full h-full rounded-sm max-h-[80vh]"
|
||||
/>
|
||||
</div>
|
||||
<BrownButton
|
||||
|
||||
Reference in New Issue
Block a user