Most dependencies updated, except Svelte

This commit is contained in:
Mawoka
2025-08-31 13:30:19 +02:00
parent 343756f999
commit 61e763da45
108 changed files with 9173 additions and 17913 deletions
@@ -26,11 +26,11 @@ SPDX-License-Identifier: MPL-2.0
{#if quiz_id}
<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 }}
>
<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('downloader.select_download_type')}</h1>
<div class="flex flex-row gap-4">
<div class="w-full flex justify-center">
@@ -23,7 +23,7 @@ SPDX-License-Identifier: MPL-2.0
class:opacity-50={disabled}
class:cursor-not-allowed={disabled}
class:pointer-events-none={disabled}
class="text-black hover:bg-opacity-80 w-full px-4 py-2 leading-5 transition-all duration-200 transform bg-[#B07156] rounded text-center outline-none"
class="text-black hover:bg-bg-[#B07156]/80 w-full px-4 py-2 leading-5 transition-all duration-200 transform bg-[#B07156] rounded-sm text-center outline-hidden hover:cursor-pointer"
on:click
class:flex
class:justify-center={flex}
@@ -34,7 +34,7 @@ SPDX-License-Identifier: MPL-2.0
<button
{disabled}
{type}
class="text-black hover:opacity-80 w-full px-4 py-2 leading-5 transition-all duration-200 transform bg-[#B07156] rounded text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 outline-none"
class="text-black hover:cursor-pointer hover:opacity-80 w-full px-4 py-2 leading-5 transition-all duration-200 transform bg-[#B07156] rounded-sm text-center focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 outline-hidden"
on:click
class:flex
class:justify-center={flex}
@@ -16,7 +16,7 @@ SPDX-License-Identifier: MPL-2.0
<a
{href}
{target}
class="w-full px-4 py-2 leading-5 text-black dark:text-white transition-colors duration-200 transform bg-gray-50 dark:bg-gray-700 rounded text-center hover:bg-gray-300 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-600"
class="w-full px-4 py-2 leading-5 text-black dark:text-white transition-colors duration-200 transform bg-gray-50 dark:bg-gray-700 rounded-sm text-center hover:bg-gray-300 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-600"
on:click
class:flex
class:block={!flex}
@@ -27,7 +27,7 @@ SPDX-License-Identifier: MPL-2.0
{:else}
<button
{disabled}
class="w-full px-4 py-2 leading-5 text-black dark:text-white transition-colors duration-200 transform bg-gray-50 dark:bg-gray-700 rounded text-center hover:bg-gray-300 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-600"
class="w-full px-4 py-2 leading-5 text-black dark:text-white transition-colors duration-200 transform bg-gray-50 dark:bg-gray-700 rounded-sm text-center hover:bg-gray-300 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-600"
on:click
class:flex
class:justify-center={flex}
@@ -4,7 +4,6 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
SPDX-License-Identifier: MPL-2.0
-->
<!--
This should be okay, right?
-->
@@ -232,29 +231,29 @@ This should be okay, right?
{#if open}
<div
class="fixed top-0 left-0 w-screen h-screen flex bg-black bg-opacity-50 z-50"
class="fixed top-0 left-0 w-screen h-screen flex bg-black/50 z-50"
on:click={close_on_outside}
on:keyup={close_on_outside}
transition:fade={{ duration: 60 }}
on:keyup={close_on_outside}
transition:fade|global={{ duration: 60 }}
>
<div class="m-auto w-1/3 h-2/3 rounded bg-black flex flex-col">
<div class="m-auto w-1/3 h-2/3 rounded-sm bg-black flex flex-col">
<div class="grid grid-cols-1 grid-rows-1 border-b border-b-white">
<p
class="col-start-1 row-start-1 w-full p-4 outline-none bg-gray-700 rounded-t text-gray-400"
class="col-start-1 row-start-1 w-full p-4 outline-hidden bg-gray-700 rounded-t text-gray-400"
>
{bg_text}
</p>
<input
type="text"
class="col-start-1 row-start-1 bg-transparent w-full p-4 outline-none bg-gray-700 rounded"
class="col-start-1 row-start-1 bg-transparent w-full p-4 outline-hidden bg-gray-700 rounded-sm"
bind:value={input}
/>
</div>
<div class="flex flex-col p-2 gap-2 overflow-scroll">
{#each visible_items as vi, i}
<div
transition:fade|local={{ duration: 60 }}
class="p-2 transition rounded"
transition:fade={{ duration: 60 }}
class="p-2 transition rounded-sm"
class:bg-[#B07156]={selected === i}
class:bg-gray-700={selected !== i}
on:mouseenter={() => (selected = i)}
@@ -262,9 +261,7 @@ This should be okay, right?
>
<div class="flex">
<h3 class="text-lg my-auto">{vi.title}</h3>
<p
class="font-mono my-auto ml-auto h-fit bg-black bg-opacity-50 rounded p-0.5"
>
<p class="font-mono my-auto ml-auto h-fit bg-black/50 rounded-sm p-0.5">
/{vi.command}
{#if vi.args}
{#each vi.args as arg}
@@ -23,9 +23,12 @@ SPDX-License-Identifier: MPL-2.0
</script>
{#if open}
<div class="fixed w-screen top-10 z-[60] flex justify-center" transition:fly={{ y: -100 }}>
<div
class="fixed w-screen top-10 z-[60] flex justify-center"
transition:fly|global={{ y: -100 }}
>
<div
class="flex items-center p-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
class="flex items-center p-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow-smdark:text-gray-400 dark:bg-gray-800"
role="alert"
>
<div class="ml-3 text-sm font-normal">
@@ -61,9 +61,9 @@ SPDX-License-Identifier: MPL-2.0
</script>
{#if copy_toast_open || game_in_lobby}
<div class="fixed w-screen top-10 z-50 flex justify-center" transition:fly={{ y: -100 }}>
<div class="fixed w-screen top-10 z-50 flex justify-center" transition:fly|global={{ y: -100 }}>
<div
class="flex items-center p-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
class="flex items-center p-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow-smdark:text-gray-400 dark:bg-gray-800"
role="alert"
>
<div class="ml-3 text-sm font-normal">
+7 -7
View File
@@ -94,8 +94,8 @@ SPDX-License-Identifier: MPL-2.0
</script>
<div
class="fixed top-0 left-0 flex justify-center w-screen h-screen bg-black bg-opacity-60 z-50 text-black"
transition:fade={{ duration: 100 }}
class="fixed top-0 left-0 flex justify-center w-screen h-screen bg-black/60 z-50 text-black"
transition:fade|global={{ duration: 100 }}
on:click={on_parent_click}
>
<div
@@ -116,7 +116,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-700 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-700 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"
/>
<span class="ml-3 text-sm font-medium text-gray-900"
>Captcha {captcha_selected ? 'enabled' : 'disabled'}</span
@@ -124,7 +124,7 @@ SPDX-License-Identifier: MPL-2.0
</label>
</div>
{#if captcha_selected}
<div class="flex justify-center mt-2" in:fade>
<div class="flex justify-center mt-2" in:fade|global>
<p class="w-1/3">
{$t('start_game.captcha_message')}
</p>
@@ -162,7 +162,7 @@ SPDX-License-Identifier: MPL-2.0
<label class="mr-4">{$t('result_page.custom_field')}</label>
<input
bind:value={custom_field}
class="rounded-lg p-2 outline-none placeholder:italic"
class="rounded-lg p-2 outline-hidden placeholder:italic"
placeholder="Phone Number or Email"
/>
</div>
@@ -175,7 +175,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-700 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-700 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"
/>
<span class="ml-3 text-sm font-medium text-gray-900"
><a
@@ -203,7 +203,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-700 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-700 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"
/>
<span class="ml-3 text-sm font-medium text-gray-900"> Randomize answers</span>
</label>
@@ -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,
+14 -8
View File
@@ -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}
+2 -2
View File
@@ -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>
+8 -8
View File
@@ -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>
+7 -8
View File
@@ -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
+7 -1
View File
@@ -119,6 +119,12 @@ SPDX-License-Identifier: MPL-2.0
<div
bind:this={html_el}
contenteditable="true"
class="rounded-lg border-gray-500 border text-center w-fit h-fit resize-none dark:bg-gray-500 min-w-[5rem]"
class="rounded-lg border-gray-500 border text-center w-fit h-fit resize-none dark:bg-gray-500 min-w-[5rem] dark:text-white"
/>
</div>
<style>
:global(.ck-powered-by) {
display: none;
}
</style>
@@ -102,7 +102,7 @@ SPDX-License-Identifier: MPL-2.0
<div class="flex justify-evenly lg:w-2/6">
{#if teacherTab}
<button
class="border border-blue-600 p-2 border-2 rounded hover:bg-gray-700 text-2xl"
class="border border-blue-600 p-2 border-2 rounded-sm hover:bg-gray-700 text-2xl"
on:click={() => {
teacherTab = true;
}}
@@ -110,7 +110,7 @@ SPDX-License-Identifier: MPL-2.0
</button>
{:else}
<button
class="border border-black p-2 border-2 rounded hover:bg-gray-700 text-base"
class="border border-black p-2 border-2 rounded-sm hover:bg-gray-700 text-base"
class:border-black={!teacherTab}
class:text-base={!teacherTab}
on:click={() => {
@@ -120,7 +120,7 @@ SPDX-License-Identifier: MPL-2.0
</button>
{/if}
<button
class="border border-black p-2 border-2 rounded hover:bg-gray-700"
class="border border-black p-2 border-2 rounded-sm hover:bg-gray-700"
class:border-blue-600={!teacherTab}
class:text-2xl={!teacherTab}
on:click={() => {
+3 -5
View File
@@ -41,7 +41,7 @@ SPDX-License-Identifier: MPL-2.0
name="email"
required
placeholder="E-mail"
class="m-0.5 border-b-2 border-gray-300 rounded-lg p-0.5 outline-none focus:outline-gray-400 bg-transparent"
class="m-0.5 border-b-2 border-gray-300 rounded-lg p-0.5 outline-hidden focus:outline-gray-400 bg-transparent"
/>
</p>
<p>
@@ -49,7 +49,7 @@ SPDX-License-Identifier: MPL-2.0
type="text"
name="name"
placeholder="Name (optional)"
class="m-0.5 border-b-2 border-gray-300 rounded-lg p-0.5 outline-none focus:outline-gray-400 bg-transparent"
class="m-0.5 border-b-2 border-gray-300 rounded-lg p-0.5 outline-hidden focus:outline-gray-400 bg-transparent"
/>
</p>
@@ -64,9 +64,7 @@ SPDX-License-Identifier: MPL-2.0
<label for="fec55">ClassQuiz-News</label>
</p>
<div class="bg-gradient-to-r from-[#009444] via-[#39b54a] to-[#8dc63f] w-fit rounded-lg">
<button
type="submit"
class="m-0.5 bg-opacity-70 bg-white rounded-lg py-0.5 px-1 text-black"
<button type="submit" class="m-0.5 bg-white/7 rounded-lg py-0.5 px-1 text-black"
>Subscribe!
</button>
</div>
+2 -2
View File
@@ -20,7 +20,7 @@ By Flowbite, but changed: https://flowbite.com/docs/components/modal/#default-mo
<div tabindex="-1" class="overflow-y-auto overflow-x-hidden md:inset-0 lg:w-2/6 w-5/6">
<div class="relative p-4 w-full max-w-2xl h-full md:h-auto">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<div class="relative bg-white rounded-lg shadow-smdark:bg-gray-700">
<!-- Modal header -->
<div
class="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600"
@@ -65,7 +65,7 @@ By Flowbite, but changed: https://flowbite.com/docs/components/modal/#default-mo
on:click={() => {
open = false;
}}
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-hidden focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Close
</button>
+4 -10
View File
@@ -54,7 +54,7 @@ SPDX-License-Identifier: MPL-2.0
class="font-black tracking-tight text-xl lg:text-2xl text-black marck-script link-hover px-3 lg:px-5"
>ClassQuiz</a
>
<a class="btn-nav border-2 rounded" href="/play">{$t('words.play')}</a>
<a class="btn-nav border-2 rounded-sm" href="/play">{$t('words.play')}</a>
<a class="btn-nav" href="/explore">{$t('words.explore')}</a>
<a class="btn-nav" href="/search">{$t('words.search')}</a>
{#if $signedIn}
@@ -271,8 +271,8 @@ SPDX-License-Identifier: MPL-2.0
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><path in:draw={{ duration: 300 }} d="M18 6 6 18" /><path
in:draw={{ duration: 300 }}
><path in:draw|global={{ duration: 300 }} d="M18 6 6 18" /><path
in:draw|global={{ duration: 300 }}
d="m6 6 12 12"
/></svg
>
@@ -283,7 +283,7 @@ SPDX-License-Identifier: MPL-2.0
<!-- Navbar content -->
{#if !menuIsClosed}
<div class="flex flex-col" transition:slide={{ duration: 400 }}>
<div class="flex flex-col" transition:slide|global={{ duration: 400 }}>
<a class="btn-nav" href="/explore">{$t('words.explore')}</a>
<a class="btn-nav" href="/search">{$t('words.search')}</a>
{#if $signedIn}
@@ -340,9 +340,3 @@ SPDX-License-Identifier: MPL-2.0
{/if}
</div>
</nav>
<style lang="scss">
.btn-nav {
@apply text-lg font-medium px-3 text-gray-600 hover:text-green-600 py-1.5 transition-all duration-300;
}
</style>
@@ -53,7 +53,7 @@ SPDX-License-Identifier: MPL-2.0
{#each player_names as player, i}
{#if i <= player_count_or_five - 1}
<p
in:fly={{ y: -300, delay: player_count_or_five * 1200 - (i + 1) * 1000 }}
in:fly|global={{ y: -300, delay: player_count_or_five * 1200 - (i + 1) * 1000 }}
style="font-size: {player_count_or_five - i / 2}rem"
class="text-center"
>
@@ -68,7 +68,7 @@ SPDX-License-Identifier: MPL-2.0
</div>
{#if data[username]}
<div class="fixed bottom-0 left-0 flex justify-center w-full mb-6">
<div class="mx-auto p-2 border-[#B07156] border-4 rounded">
<div class="mx-auto p-2 border-[#B07156] border-4 rounded-sm">
<p class="text-center">{$t('play_page.your_score', { score: data[username] })}</p>
{#each player_names as player, i}
{#if player === username}
@@ -55,7 +55,7 @@ SPDX-License-Identifier: MPL-2.0
on:click={() => (fullscreen_open = true)}
alt="QR code to join the game"
src="/api/v1/utils/qr/{game_pin}"
class="block mx-auto w-1/2 dark:bg-white shadow-2xl rounded hover:cursor-pointer"
class="block mx-auto w-1/2 dark:bg-white shadow-2xl rounded-sm hover:cursor-pointer"
/>
{#if cqc_code}
<div class="m-auto">
@@ -98,7 +98,7 @@ SPDX-License-Identifier: MPL-2.0
<div class="flex flex-row w-full mt-4 px-10 flex-wrap">
{#if players.length > 0}
{#each players as player}
<div class="p-2 m-2 border-2 border-[#B07156] rounded hover:cursor-pointer">
<div class="p-2 m-2 border-2 border-[#B07156] rounded-sm hover:cursor-pointer">
<span
class="hover:line-through text-lg"
on:click={() => {
@@ -114,14 +114,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 flex p-2"
transition:fade|global={{ duration: 80 }}
on:click={() => (fullscreen_open = false)}
>
<img
alt="QR code to join the game"
src="/api/v1/utils/qr/{game_pin}"
class="object-contain rounded m-auto h-full bg-white"
class="object-contain rounded-sm m-auto h-full bg-white"
/>
</div>
{/if}
+2 -2
View File
@@ -104,7 +104,7 @@ SPDX-License-Identifier: MPL-2.0
>
<th class="p-2 border-b-2 border-b-black">{$t('words.point', { count: 2 })}</th>
{#if show_new_score_clicked}
<th in:fly={{ x: 300 }} class="p-2 border-b-2 border-b-black"
<th in:fly|global={{ x: 300 }} class="p-2 border-b-2 border-b-black"
>{$t('play_page.points_added')}
</th>
{/if}
@@ -115,7 +115,7 @@ SPDX-License-Identifier: MPL-2.0
<td class:hidden={i > 3} class="p-2">{data[player]}</td>
{#if show_new_score_clicked}
<td
in:fly={{ x: 300 }}
in:fly|global={{ x: 300 }}
class:hidden={i > 3}
class="p-2"
class:text-red-600={score_by_username[player] === 0 ||
@@ -45,7 +45,7 @@ SPDX-License-Identifier: MPL-2.0
<div class="flex gap-12">
{#each quiz_answers as answer, i}
<div
class="w-20 self-end flex justify-center border border-black shadow-xl rounded"
class="w-20 self-end flex justify-center border border-black shadow-xl rounded-sm"
class:shadow-blue-500={answer_correct[i] &&
question.type !== QuizQuestionType.VOTING}
class:shadow-yellow-500={!answer_correct[i] &&
+3 -3
View File
@@ -197,7 +197,7 @@ SPDX-License-Identifier: MPL-2.0
<form on:submit|preventDefault class="flex-col flex justify-center align-center mx-auto">
<h1 class="text-lg text-center">{$t('words.game_pin')}</h1>
<input
class="border border-gray-400 self-center text-center text-black ring-0 outline-none p-2 rounded-lg focus:shadow-2xl transition-all"
class="border border-gray-400 self-center text-center text-black ring-0 outline-hidden p-2 rounded-lg focus:shadow-2xl transition-all"
bind:value={game_pin}
maxlength="6"
inputmode="numeric"
@@ -218,14 +218,14 @@ SPDX-License-Identifier: MPL-2.0
>
<h1 class="text-lg text-center">{$t('words.username')}</h1>
<input
class="border border-gray-400 self-center text-center text-black ring-0 outline-none p-2 rounded-lg focus:shadow-2xl transition-all"
class="border border-gray-400 self-center text-center text-black ring-0 outline-hidden p-2 rounded-lg focus:shadow-2xl transition-all"
bind:value={username}
maxlength="17"
/>
{#if custom_field}
<h1 class="text-lg text-center">{custom_field}</h1>
<input
class="border border-gray-400 self-center text-center text-black ring-0 outline-none p-2 rounded-lg focus:shadow-2xl transition-all"
class="border border-gray-400 self-center text-center text-black ring-0 outline-hidden p-2 rounded-lg focus:shadow-2xl transition-all"
bind:value={custom_field_value}
/>
{/if}
+3 -3
View File
@@ -247,7 +247,7 @@ SPDX-License-Identifier: MPL-2.0
type="text"
bind:value={text_input}
disabled={selected_answer}
class="bg-gray-50 focus:ring text-gray-900 rounded-lg focus:ring-blue-500 block w-full p-2 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-500 outline-none transition text-center disabled:opacity-50 disabled:cursor-not-allowed"
class="bg-gray-50 focus:ring text-gray-900 rounded-lg focus:ring-blue-500 block w-full p-2 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-500 outline-hidden transition text-center disabled:opacity-50 disabled:cursor-not-allowed"
/>
</div>
@@ -298,7 +298,7 @@ SPDX-License-Identifier: MPL-2.0
on:click={() => {
question.answers = swapArrayElements(question.answers, i, i - 1);
}}
class="disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition"
class="disabled:opacity-50 shadow-lg bg-black/30 w-full flex justify-center rounded-lg p-2 hover:bg-black/20 transition"
type="button"
disabled={i === 0 || selected_answer}
>
@@ -325,7 +325,7 @@ SPDX-License-Identifier: MPL-2.0
on:click={() => {
question.answers = swapArrayElements(question.answers, i, i + 1);
}}
class="disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition"
class="disabled:opacity-50 shadow-lg bg-black/30 w-full flex justify-center rounded-lg p-2 hover:bg-black/20 transition"
type="button"
disabled={i === question.answers.length - 1 || selected_answer}
>
+1 -1
View File
@@ -52,7 +52,7 @@ SPDX-License-Identifier: MPL-2.0
<div>
<div class="flex justify-center h-screen">
<div class="m-auto flex flex-col">
<p class="p-4 bg-black bg-opacity-40 rounded-lg text-2xl">
<p class="p-4 bg-black/40 rounded-lg text-2xl">
+{score_by_username[username] ?? '0'}
</p>
<p>Total score: {scores[username] ?? '0'}</p>
+8 -4
View File
@@ -91,7 +91,11 @@ SPDX-License-Identifier: MPL-2.0
};
</script>
<div class="w-full px-6 lg:px-20 h-[80vh] absolute" in:fly={{ x: 100 }} out:fly={{ x: -100 }}>
<div
class="w-full px-6 lg:px-20 h-[80vh] absolute"
in:fly|global={{ x: 100 }}
out:fly|global={{ x: -100 }}
>
<h1 class="text-3xl text-center">{@html question.question}</h1>
{#if question.image !== null}
<div>
@@ -224,7 +228,7 @@ SPDX-License-Identifier: MPL-2.0
<input
type="text"
bind:value={text_input}
class="bg-gray-50 focus:ring text-gray-900 rounded-lg focus:ring-blue-500 block w-full p-2 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-500 outline-none transition text-center"
class="bg-gray-50 focus:ring text-gray-900 rounded-lg focus:ring-blue-500 block w-full p-2 dark:bg-gray-700 dark:text-white dark:focus:ring-blue-500 outline-hidden transition text-center"
/>
</div>
<div class="flex justify-center">
@@ -251,7 +255,7 @@ SPDX-License-Identifier: MPL-2.0
on:click={() => {
question.answers = swapArrayElements(question.answers, i, i - 1);
}}
class="disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition"
class="disabled:opacity-50 transition shadow-lg bg-black/30 w-full flex justify-center rounded-lg p-2 hover:bg-black/20 transition"
type="button"
disabled={i === 0 || order_corrected}
>
@@ -278,7 +282,7 @@ SPDX-License-Identifier: MPL-2.0
on:click={() => {
question.answers = swapArrayElements(question.answers, i, i + 1);
}}
class="disabled:opacity-50 transition shadow-lg bg-black bg-opacity-30 w-full flex justify-center rounded-lg p-2 hover:bg-opacity-20 transition"
class="disabled:opacity-50 transition shadow-lg bg-black/30 w-full flex justify-center rounded-lg p-2 hover:bg-black/20 transition"
type="button"
disabled={i === question.answers.length - 1 || order_corrected}
>
@@ -13,7 +13,7 @@ SPDX-License-Identifier: MPL-2.0
const { t } = getLocalization();
</script>
<div class="w-full px-6 lg:px-20 h-[80vh] absolute" in:fly={{ x: 100 }} out:fly={{ x: -100 }}>
<div class="w-full px-6 lg:px-20 h-[80vh] absolute" in:fly|global={{ x: 100 }} out:fly|global={{ x: -100 }}>
<div class="rounded-lg bg-white w-full h-full border-gray-500 dark:bg-gray-700">
<div class="h-fit bg-gray-300 rounded-t-lg dark:bg-gray-500">
<div class="flex align-middle p-4 gap-3">
@@ -41,15 +41,15 @@ SPDX-License-Identifier: MPL-2.0
</script>
<div
class="fixed top-0 left-0 z-50 bg-black bg-opacity-50 flex w-screen h-screen"
transition:fade={{ duration: 100 }}
class="fixed top-0 left-0 z-50 bg-black/50 flex w-screen h-screen"
transition:fade|global={{ duration: 100 }}
>
<div class="m-auto w-5/6 h-5/6">
<div class="rounded bg-white p-6 dark:bg-gray-600">
<div class="rounded-sm bg-white p-6 dark:bg-gray-600">
<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 PageTypes as pt}
<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={() => {
@@ -24,17 +24,17 @@ SPDX-License-Identifier: MPL-2.0
<div>
<div class="flex justify-center">
<input
class="bg-transparent outline-none text-3xl text-center"
class="bg-transparent outline-hidden text-3xl text-center"
placeholder="Enter question here..."
bind:value={data.question}
/>
</div>
<div class="grid grid-cols-2 m-4 gap-4">
{#each data.answers as answer}
<div class="rounded p-6 bg-gray-700 flex">
<div class="rounded-sm p-6 bg-gray-700 flex">
<input
bind:value={answer.answer}
class="w-full my-auto bg-transparent outline-none text-center text-white"
class="w-full my-auto bg-transparent outline-hidden text-center text-white"
placeholder="Enter answer here"
/>
<button
@@ -78,7 +78,7 @@ SPDX-License-Identifier: MPL-2.0
</div>
{/each}
{#if data.answers.length < 4}
<div class="rounded p-6 bg-gray-700">
<div class="rounded-sm p-6 bg-gray-700">
<BrownButton
on:click={() => {
data.answers = [...data.answers, { ...{ answer: '', correct: false } }];
@@ -23,7 +23,7 @@ SPDX-License-Identifier: MPL-2.0
<div class="grid grid-cols-1 lg:grid-cols-2 m-4 gap-4">
{#each data.answers as answer, i}
<button
class="rounded p-6 bg-gray-700 flex transition-all"
class="rounded-sm p-6 bg-gray-700 flex transition-all"
on:click={() => {
select_answer(i);
}}
@@ -24,13 +24,13 @@ SPDX-License-Identifier: MPL-2.0
<div class="w-full h-[70vh] flex flex-row p-4 gap-4">
<textarea
class="w-full resize-none border-[#B07156] border-2 rounded outline-none p-2 bg-opacity-30 bg-white dark:placeholder-gray-300"
class="w-full resize-none border-[#B07156] border-2 rounded-sm outline-hidden p-2 bg-white/30 dark:placeholder-gray-300"
bind:value={data.markdown}
placeholder="Enter your markdown here!"
/>
<div class="w-full">
<div
class="aspect-video prose max-w-none border-[#B07156] border-2 rounded p-2 dark:prose-invert"
class="aspect-video prose max-w-none border-[#B07156] border-2 rounded-sm p-2 dark:prose-invert"
>
{@html rendered_html}
</div>
@@ -61,13 +61,13 @@ SPDX-License-Identifier: MPL-2.0
<div class="flex justify-center">
<div class="grid grid-cols-4 w-11/12 gap-4">
<div class="border-[#B07156] border-2 rounded">
<div class="border-[#B07156] border-2 rounded-sm">
<h2 class="text-center">{$t('quiztivity.memory.editor.add_card')}</h2>
<div class="grid grid-cols-2 py-2">
<div class="px-2 flex flex-col gap-2">
<textarea
type="text"
class="h-auto resize-none bg-transparent outline-none rounded outline-[#B07156] outline"
class="h-auto resize-none bg-transparent outline-hidden rounded-sm outline-[#B07156] outline"
rows="3"
contenteditable="true"
bind:value={new_pair_data.text_1}
@@ -80,7 +80,7 @@ SPDX-License-Identifier: MPL-2.0
<div class="px-2 flex flex-col gap-2">
<textarea
type="text"
class="h-auto resize-none bg-transparent outline-none rounded outline-[#B07156] outline"
class="h-auto resize-none bg-transparent outline-hidden rounded-sm outline-[#B07156] outline"
rows="3"
contenteditable="true"
bind:value={new_pair_data.text_2}
@@ -99,7 +99,7 @@ SPDX-License-Identifier: MPL-2.0
</div>
{#each data.cards as card_pair, i (card_pair[0].id)}
<div
class="border-[#B07156] border-2 rounded group flex flex-col"
class="border-[#B07156] border-2 rounded-sm group flex flex-col"
animate:flip={{ duration: 200 }}
>
<div class="grid grid-cols-2 py-2 h-full">
@@ -82,7 +82,7 @@ SPDX-License-Identifier: MPL-2.0
<div class="grid lg:grid-cols-6 grid-cols-2 gap-2 m-4">
{#each random_card_order as card}
<button
class="aspect-square flex border-[#B07156] border-2 rounded"
class="aspect-square flex border-[#B07156] border-2 rounded-sm"
on:click={() => {
flip_card(card.id);
}}
+2 -2
View File
@@ -84,7 +84,7 @@ SPDX-License-Identifier: MPL-2.0
<span />
{/if}
<input
class="bg-transparent outline-none text-center mx-auto"
class="bg-transparent outline-hidden text-center mx-auto"
placeholder={$t('quiztivity.editor.title_placeholder')}
bind:value={data.title}
/>
@@ -123,7 +123,7 @@ SPDX-License-Identifier: MPL-2.0
<div class="grid grid-cols-6 gap-6 w-11/12">
{#each data.pages as page, i (page.id)}
<div
class="border-[#B07156] border-2 rounded aspect-square flex flex-col group"
class="border-[#B07156] border-2 rounded-sm aspect-square flex flex-col group"
animate:flip={{ duration: 200 }}
>
<p class="m-auto">{page.type}</p>
@@ -122,12 +122,12 @@ SPDX-License-Identifier: MPL-2.0
<SmallPopover bind:open={popover_open} type={PopoverTypes.Copy} />
<div
class="fixed w-full h-full top-0 flex bg-black bg-opacity-50 z-50"
class="fixed w-full h-full top-0 flex bg-black/50 z-50"
on:click={on_parent_click}
transition:fade|local={{ duration: 100 }}
transition:fade={{ duration: 100 }}
>
<div
class="m-auto bg-white dark:bg-gray-600 rounded shadow-2xl flex p-4 flex-col w-2/3 h-5/6 gap-2 overflow-scroll"
class="m-auto bg-white dark:bg-gray-600 rounded-sm shadow-2xl flex p-4 flex-col w-2/3 h-5/6 gap-2 overflow-scroll"
>
<div class="flex justify-center flex-col">
<BrownButton
@@ -138,7 +138,7 @@ SPDX-License-Identifier: MPL-2.0
{#if add_shares_open}
<form
class="flex justify-center p-2 border-b-2 border-l-2 border-r-2 border-[#B07156] flex-col gap-2"
transition:fly|local={{ duration: 100, y: -10 }}
transition:fly={{ duration: 100, y: -10 }}
on:submit|preventDefault={create_share}
>
<div class="grid grid-cols-2">
@@ -163,7 +163,7 @@ SPDX-License-Identifier: MPL-2.0
<Spinner />
{:then shares}
{#each shares as share}
<div class="grid grid-cols-4 w-full gap-2" in:fade={{ duration: 50 }}>
<div class="grid grid-cols-4 w-full gap-2" in:fade|global={{ duration: 50 }}>
<!-- <p>{share.name ?? "..."}</p>-->
<div class="w-full mx-auto">
<BrownButton
@@ -43,7 +43,7 @@ SPDX-License-Identifier: MPL-2.0
};
</script>
<div class="flex flex-col border-[#B07156] rounded border-2 p-2 gap-2">
<div class="flex flex-col border-[#B07156] rounded-sm border-2 p-2 gap-2">
<div class="grid grid-cols-2 gap-2 group mx-auto">
<Hoverable bind:hovering={FeedBackButtonsHovered.like}>
<button