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

Most dependencies updated, except Svelte

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app.css
+20 -14
View File
@@ -7,8 +7,7 @@ SPDX-License-Identifier: MPL-2.0
@import 'tippy.js/animations/perspective-subtle.css';
@import 'tippy.js/dist/tippy.css';
/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;
@import 'tailwindcss';
@tailwind utilities;
.marck-script {
@@ -22,17 +21,24 @@ SPDX-License-Identifier: MPL-2.0
.link-hover:hover {
color: #4e6e58;
}
@layer utilities {
.normal-background {
@apply bg-gradient-to-r from-[#009444] via-[#39b54a] to-[#8dc63f] dark:bg-[#0f2702] dark:from-[#0f2702] dark:via-[#0f2702] dark:to[#0f2702];
}
.admin-button {
@apply px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50;
}
.action-button {
@apply 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;
@layer base {
button:not(:disabled),
[role='button']:not(:disabled) {
cursor: pointer;
}
}
@utility normal-background {
@apply bg-gradient-to-r from-[#009444] via-[#39b54a] to-[#8dc63f] dark:bg-[#0f2702] dark:from-[#0f2702] dark:via-[#0f2702] dark:to-[#0f2702];
}
@utility admin-button {
@apply px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded-sm text-center hover:bg-gray-600 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50;
}
@utility action-button {
@apply 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;
}
@utility btn-nav {
@apply text-lg font-medium px-3 text-gray-600 hover:text-green-600 py-1.5 transition-all duration-300;
}
frontend/src/lib/components/DownloadQuiz.svelte
+3 -3
View File
@@ -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">
frontend/src/lib/components/buttons/brown.svelte
+2 -2
View File
@@ -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}
frontend/src/lib/components/buttons/gray.svelte
+2 -2
View File
@@ -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}
frontend/src/lib/components/commandpalette.svelte
+9 -12
View File
@@ -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}
frontend/src/lib/components/popover/smalltop.svelte
+5 -2
View File
@@ -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">
frontend/src/lib/dashboard/main_slider.svelte
+2 -2
View File
@@ -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">
frontend/src/lib/dashboard/start_game.svelte
+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>
frontend/src/lib/editor/ABCDEditorPart.svelte
+3 -3
View File
@@ -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,
frontend/src/lib/editor/AddNewQuestionPopup.svelte
+6 -4
View File
@@ -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={() => {
frontend/src/lib/editor/MediaComponent.svelte
+4 -4
View File
@@ -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}
frontend/src/lib/editor/OrderEditorPart.svelte
+3 -3
View File
@@ -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,
frontend/src/lib/editor/TextEditorPart.svelte
+3 -3
View File
@@ -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,
frontend/src/lib/editor/VotingEditorPart.svelte
+2 -2
View File
@@ -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,
frontend/src/lib/editor/card.svelte
+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}
frontend/src/lib/editor/settings-card.svelte
+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>
frontend/src/lib/editor/sidebar.svelte
+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"
frontend/src/lib/editor/slides/edit_menu.svelte
+2 -2
View File
@@ -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"
frontend/src/lib/editor/slides/element_selection.svelte
+1 -1
View File
@@ -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}
frontend/src/lib/editor/slides/settings_menu.svelte
+3 -3
View File
@@ -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>
frontend/src/lib/editor/uploader.svelte
+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"
frontend/src/lib/editor/uploader/Library.svelte
+3 -3
View File
@@ -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>
frontend/src/lib/editor/uploader/Pixabay.svelte
+4 -4
View File
@@ -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
frontend/src/lib/inline-editor.svelte
+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>
frontend/src/lib/landing/landing-promo.svelte
+3 -3
View File
@@ -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={() => {
frontend/src/lib/landing/newsletter.svelte
+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>
frontend/src/lib/modals/alert.svelte
+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>
frontend/src/lib/navbar.svelte
+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>
frontend/src/lib/play/admin/final_results.svelte
+2 -2
View File
@@ -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}
frontend/src/lib/play/admin/game_not_started.svelte
+5 -5
View File
@@ -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}
frontend/src/lib/play/admin/results.svelte
+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 ||
frontend/src/lib/play/admin/voting_results.svelte
+1 -1
View File
@@ -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] &&
frontend/src/lib/play/join.svelte
+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}
frontend/src/lib/play/question.svelte
+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}
>
frontend/src/lib/play/results_kahoot.svelte
+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>
frontend/src/lib/practice/question.svelte
+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}
>
frontend/src/lib/practice/title_screen.svelte
+1 -1
View File
@@ -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">
frontend/src/lib/quiztivity/add_new_slide.svelte
+4 -4
View File
@@ -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={() => {
frontend/src/lib/quiztivity/components/abcd/edit.svelte
+4 -4
View File
@@ -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 } }];
frontend/src/lib/quiztivity/components/abcd/play.svelte
+1 -1
View File
@@ -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);
}}
frontend/src/lib/quiztivity/components/markdown/edit.svelte
+2 -2
View File
@@ -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>
frontend/src/lib/quiztivity/components/memory/edit.svelte
+4 -4
View File
@@ -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">
frontend/src/lib/quiztivity/components/memory/play.svelte
+1 -1
View File
@@ -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);
}}
frontend/src/lib/quiztivity/editor.svelte
+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>
frontend/src/lib/quiztivity/shares_popover.svelte
+5 -5
View File
@@ -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
frontend/src/lib/view_quiz/RatingComponent.svelte
+1 -1
View File
@@ -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
frontend/src/routes/+page.svelte
+19 -19
View File
@@ -216,12 +216,12 @@ SPDX-License-Identifier: MPL-2.0
<h2 class="text-center text-5xl mb-6">{$t('index_page.how_does_classquiz_work')}</h2>
<div class="flex justify-center w-full">
<h3 class="text-center text-3xl rounded-t-lg bg-opacity-40 bg-white py-2 px-6">
<h3 class="text-center text-3xl rounded-t-lg bg-white/40 py-2 px-6">
{$t('index_page.get_a_quiz')}
</h3>
</div>
<div
class="grid grid-rows-2 lg:grid-rows-1 lg:grid-cols-2 bg-opacity-40 bg-white shadow-lg mb-12 lg:mx-12 mx-4 rounded-lg"
class="grid grid-rows-2 lg:grid-rows-1 lg:grid-cols-2 bg-white/40 shadow-lg mb-12 lg:mx-12 mx-4 rounded-lg"
>
<div>
<div class="p-2 rounded-lg">
@@ -229,21 +229,21 @@ SPDX-License-Identifier: MPL-2.0
<img
class="rounded-lg relative"
src={EditScreenshot}
in:fade
in:fade|global
alt="Screenshot of the import-page showing an URL to Kahoot! entered"
/>
{:else if selected_create_thing === SelectedCreateThing.Find}
<img
class="rounded-lg relative"
src={FindScreenshot}
in:fade
in:fade|global
alt="Screenshot of the search-page showing one found quiz for the term 'Country'"
/>
{:else if selected_create_thing === SelectedCreateThing.Import}
<img
class="rounded-lg relative"
src={ImportScreenshot}
in:fade
in:fade|global
alt="Screenshot of the import-page showing an URL to Kahoot! entered"
/>
{:else}
@@ -255,7 +255,7 @@ SPDX-License-Identifier: MPL-2.0
class="lg:border-l lg:border-l-black lg:border-t-0 border-t border-t-black flex lg:flex-col flex-row stretch"
>
<div
class="m-2 rounded-lg p-2 bg-opacity-40 bg-white transition-all cursor-pointer lg:h-full"
class="m-2 rounded-lg p-2 bg-white/40 transition-all cursor-pointer lg:h-full"
on:click={() => {
selected_create_thing = SelectedCreateThing.Create;
}}
@@ -288,7 +288,7 @@ SPDX-License-Identifier: MPL-2.0
<p class="dark:text-black">{$t('index_page.create_a_quiz_from_scratch')}</p>
</div>
<div
class="m-2 rounded-lg p-2 bg-opacity-40 bg-white transition-all cursor-pointer lg:h-full"
class="m-2 rounded-lg p-2 bg-white/40 transition-all cursor-pointer lg:h-full"
on:click={() => {
selected_create_thing = SelectedCreateThing.Find;
}}
@@ -358,13 +358,13 @@ SPDX-License-Identifier: MPL-2.0
<section class="mt-24">
<div class="flex justify-center w-full">
<h2 class="text-center text-3xl rounded-t-lg bg-opacity-40 bg-white py-2 px-6">
<h2 class="text-center text-3xl rounded-t-lg bg-white/40 py-2 px-6">
{$t('index_page.play_quiz')}
</h2>
</div>
<div
class="grid grid-rows-2 lg:grid-rows-1 lg:grid-cols-2 bg-opacity-40 bg-white shadow-lg mb-12 lg:mx-12 mx-4 rounded-lg"
class="grid grid-rows-2 lg:grid-rows-1 lg:grid-cols-2 bg-white/40 shadow-lg mb-12 lg:mx-12 mx-4 rounded-lg"
>
<div>
<div class="p-2 rounded-lg">
@@ -372,21 +372,21 @@ SPDX-License-Identifier: MPL-2.0
<img
class="rounded-lg relative"
src={SelectScreenshot}
in:fade
in:fade|global
alt="Screenshot of the screen where an answer can be selected"
/>
{:else if selected_play_thing === SelectedPlayThing.Results}
<img
class="rounded-lg relative"
src={ResultScreenshot}
in:fade
in:fade|global
alt="Screenshot of the results with a table showing how many players chose which answer"
/>
{:else if selected_play_thing === SelectedPlayThing.Winners}
<img
class="rounded-lg relative"
src={WinnersScreenshot}
in:fade
in:fade|global
alt="Screenshot of the import-page showing an URL to Kahoot! entered"
/>
{:else}
@@ -398,7 +398,7 @@ SPDX-License-Identifier: MPL-2.0
class="lg:border-l lg:border-l-black lg:border-t-0 border-t border-t-black flex lg:flex-col flex-row stretch"
>
<div
class="m-2 rounded-lg p-2 bg-opacity-40 bg-white transition-all cursor-pointer lg:h-full"
class="m-2 rounded-lg p-2 bg-white/40 transition-all cursor-pointer lg:h-full"
on:click={() => {
selected_play_thing = SelectedPlayThing.Select;
}}
@@ -431,7 +431,7 @@ SPDX-License-Identifier: MPL-2.0
<p class="dark:text-black">{$t('index_page.choose_answer_wisely')}</p>
</div>
<div
class="m-2 rounded-lg p-2 bg-opacity-40 bg-white transition-all cursor-pointer lg:h-full"
class="m-2 rounded-lg p-2 bg-white/40 transition-all cursor-pointer lg:h-full"
on:click={() => {
selected_play_thing = SelectedPlayThing.Results;
}}
@@ -464,7 +464,7 @@ SPDX-License-Identifier: MPL-2.0
<p class="dark:text-black">{$t('index_page.check_if_chosen_wisely')}</p>
</div>
<div
class="m-2 rounded-lg p-2 bg-opacity-40 bg-white transition-all cursor-pointer lg:h-full"
class="m-2 rounded-lg p-2 bg-white/40 transition-all cursor-pointer lg:h-full"
on:click={() => {
selected_play_thing = SelectedPlayThing.Winners;
}}
@@ -502,13 +502,13 @@ SPDX-License-Identifier: MPL-2.0
<section class="mt-24">
<div class="flex justify-center w-full">
<h2 class="text-center text-3xl rounded-t-lg bg-opacity-40 bg-white py-2 px-6">
<h2 class="text-center text-3xl rounded-t-lg bg-white/40 py-2 px-6">
{$t('index_page.why_classquiz')}
</h2>
</div>
<div
class="grid grid-rows-2 lg:grid-rows-1 lg:grid-cols-2 bg-opacity-40 bg-white shadow-lg mb-12 lg:mx-12 mx-4 rounded-lg"
class="grid grid-rows-2 lg:grid-rows-1 lg:grid-cols-2 bg-white/40 shadow-lg mb-12 lg:mx-12 mx-4 rounded-lg"
>
<div>
<div class="p-12 rounded-lg flex justify-center items-center h-full">
@@ -522,7 +522,7 @@ SPDX-License-Identifier: MPL-2.0
>
{#each classquiz_reasons as reason, index}
<div
class="m-2 rounded-lg p-2 bg-opacity-40 bg-white transition-all cursor-pointer lg:h-full"
class="m-2 rounded-lg p-2 bg-white/40 transition-all cursor-pointer lg:h-full"
on:click={() => {
selected_classquiz_reason = index;
}}
@@ -542,7 +542,7 @@ SPDX-License-Identifier: MPL-2.0
{#if newsletterModalOpen}
<div
class="fixed bottom-8 right-5 bg-white rounded-lg h-fit w-11/12 ml-5 lg:w-2/12 z-50 p-2 bg-white dark:bg-gray-700"
transition:fly
transition:fly|global
>
<Newsletter bind:open={newsletterModalOpen} />
</div>
frontend/src/routes/account/controllers/[controller_id]/+page.svelte
+2 -2
View File
@@ -93,7 +93,7 @@ SPDX-License-Identifier: MPL-2.0
<h2 class="text-2xl mx-auto">{$t('controllers.controller_name')}</h2>
<div class="mx-auto flex">
<input
class="rounded p-1 transition-all outline-none text-center dark:bg-gray-700"
class="rounded-sm p-1 transition-all outline-hidden text-center dark:bg-gray-700"
bind:value={controller.name}
on:keyup={save_player_name_debounce}
/>
@@ -104,7 +104,7 @@ SPDX-License-Identifier: MPL-2.0
<h2 class="mx-auto text-2xl">{$t('controllers.player_name')}</h2>
<div class="mx-auto flex">
<input
class="rounded p-1 transition-all outline-none text-center dark:bg-gray-700"
class="rounded-sm p-1 transition-all outline-hidden text-center dark:bg-gray-700"
bind:value={controller.player_name}
on:keyup={save_player_name_debounce}
/>
frontend/src/routes/account/controllers/add/+page.svelte
+3 -3
View File
@@ -59,7 +59,7 @@ SPDX-License-Identifier: MPL-2.0
id="player_name"
name="player_name"
type="text"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-none focus:border-rose-600"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-hidden focus:border-rose-600"
class:ring-red-700={input_data.player_name.length === 0}
class:ring-green-600={input_data.player_name.length !== 0}
bind:value={input_data.player_name}
@@ -78,7 +78,7 @@ SPDX-License-Identifier: MPL-2.0
id="name"
name="name"
type="text"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-none focus:border-rose-600"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-hidden focus:border-rose-600"
placeholder="Name"
class:ring-red-700={input_data.name.length === 0}
class:ring-green-600={input_data.name.length !== 0}
@@ -95,7 +95,7 @@ SPDX-License-Identifier: MPL-2.0
<div class="flex items-center justify-center mt-4">
<button
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded hover:bg-gray-600 focus:outline-none"
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded-sm hover:bg-gray-600 focus:outline-hidden"
disabled={!isValid || isSubmitting}
class:cursor-not-allowed={!isValid || isSubmitting}
class:opacity-50={!isValid || isSubmitting}
frontend/src/routes/account/login/+page.svelte
+6 -6
View File
@@ -93,32 +93,32 @@ SPDX-License-Identifier: MPL-2.0
>
{#if step === 0}
<!-- <p>StartWindow</p>-->
<div transition:slide>
<div transition:slide|global>
<StartWindow bind:session_data bind:step />
</div>
{:else if selected_method === null}
<!-- <p>SelectWindow</p>-->
<div transition:slide>
<div transition:slide|global>
<SelectMethod bind:session_data bind:step bind:selected_method />
</div>
{:else if selected_method === 'PASSWORD'}
<!-- <p>PasswordWindow</p>-->
<div transition:slide>
<div transition:slide|global>
<PasswordComponent bind:session_data bind:done bind:step bind:selected_method />
</div>
{:else if selected_method === 'PASSKEY'}
<!-- <p>WebauthnWindow</p>-->
<div transition:slide>
<div transition:slide|global>
<WebauthnComponent bind:session_data bind:done bind:step bind:selected_method />
</div>
{:else if selected_method === 'BACKUP'}
<!-- <p>BackupWindow</p>-->
<div transition:slide>
<div transition:slide|global>
<BackupComponent bind:session_data bind:done bind:step bind:selected_method />
</div>
{:else if selected_method === 'TOTP'}
<!-- <p>TotpWindow</p>-->
<div transition:slide>
<div transition:slide|global>
<TotpComponent bind:session_data bind:done bind:step bind:selected_method />
</div>
{/if}
frontend/src/routes/account/login/backup_component.svelte
+2 -2
View File
@@ -53,7 +53,7 @@ SPDX-License-Identifier: MPL-2.0
bind:value={backup_code}
name="backup_code"
type="text"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-none focus:border-rose-600"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-hidden focus:border-rose-600"
placeholder={$t('words.backup_code')}
/>
<label
@@ -73,7 +73,7 @@ SPDX-License-Identifier: MPL-2.0
>{$t('login_page.use_backup_code')}</button
>
<button
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded-sm hover:bg-gray-600 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
disabled={!backup_code_valid}
type="submit"
>
frontend/src/routes/account/login/password_component.svelte
+2 -2
View File
@@ -65,7 +65,7 @@ SPDX-License-Identifier: MPL-2.0
bind:value={password}
name="password"
type="password"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-none focus:border-rose-600"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-hidden focus:border-rose-600"
placeholder={$t('words.password')}
autocomplete="current-password"
/>
@@ -86,7 +86,7 @@ SPDX-License-Identifier: MPL-2.0
>{$t('login_page.use_backup_code')}</button
>
<button
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded-sm hover:bg-gray-600 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
disabled={!password}
type="submit"
>
frontend/src/routes/account/login/start_window.svelte
+2 -4
View File
@@ -4,8 +4,6 @@ SPDX-FileCopyrightText: 2023 Marlon W (Mawoka)
SPDX-License-Identifier: MPL-2.0
-->
<script lang="ts">
import { getLocalization } from '$lib/i18n';
import OAuthBlock from './oauth_block.svelte';
@@ -58,7 +56,7 @@ SPDX-License-Identifier: MPL-2.0
bind:value={email}
name="email"
type="text"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-none focus:border-rose-600"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-hidden focus:border-rose-600"
placeholder={$t('login_page.email_or_username')}
autocomplete="email"
/>
@@ -78,7 +76,7 @@ SPDX-License-Identifier: MPL-2.0
>
<button
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded-sm hover:bg-gray-600 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
disabled={emailEmpty}
type="submit"
>
frontend/src/routes/account/login/totp_component.svelte
+2 -2
View File
@@ -79,7 +79,7 @@ SPDX-License-Identifier: MPL-2.0
bind:value={totp}
name="totp"
type="text"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-none focus:border-rose-600"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-hidden focus:border-rose-600"
placeholder={$t('words.totp')}
autocomplete="one-time-code"
/>
@@ -100,7 +100,7 @@ SPDX-License-Identifier: MPL-2.0
>{$t('login_page.use_backup_code')}</button
>
<button
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded-sm hover:bg-gray-600 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
disabled={!totp_valid}
type="submit"
>
frontend/src/routes/account/login/webauthn_component.svelte
+1 -1
View File
@@ -91,7 +91,7 @@ SPDX-License-Identifier: MPL-2.0
>{$t('login_page.use_backup_code')}</button
>
<button
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded-sm hover:bg-gray-600 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
disabled={isLoading}
on:click={start_thing}
>
frontend/src/routes/account/oauth-error/+page.svelte
+1 -1
View File
@@ -28,7 +28,7 @@ SPDX-License-Identifier: MPL-2.0
<div class="flex justify-center w-full pt-10">
<a
href="/account/login"
class="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-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
class="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-600 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
>
Go back to login-page
</a>
frontend/src/routes/account/password-reset/+page.svelte
+3 -3
View File
@@ -82,7 +82,7 @@ SPDX-License-Identifier: MPL-2.0
bind:value={passwordData.password1}
name="password1"
type="password"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-none focus:border-rose-600"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-hidden focus:border-rose-600"
placeholder={$t('words.password')}
/>
<label
@@ -100,7 +100,7 @@ SPDX-License-Identifier: MPL-2.0
name="password2"
type="password"
bind:value={passwordData.password2}
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-none focus:border-rose-600"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-hidden focus:border-rose-600"
placeholder={$t('words.repeat_password')}
/>
<label
@@ -120,7 +120,7 @@ SPDX-License-Identifier: MPL-2.0
>
<button
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded-sm hover:bg-gray-600 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
disabled={!passwordsValid}
type="submit"
>
frontend/src/routes/account/register/+page.svelte
+10 -13
View File
@@ -106,7 +106,7 @@ SPDX-License-Identifier: MPL-2.0
id="email"
name="email"
type="email"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-none focus:border-rose-600"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-hidden focus:border-rose-600"
placeholder={$t('words.email')}
class:ring-red-700={$errors.email !== null}
class:ring-green-600={$touched.email === true &&
@@ -126,7 +126,7 @@ SPDX-License-Identifier: MPL-2.0
id="username"
name="username"
type="text"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-none focus:border-rose-600"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-hidden focus:border-rose-600"
placeholder={$t('words.username')}
class:ring-red-700={$errors.username !== null}
class:ring-green-600={$touched.username === true &&
@@ -149,7 +149,7 @@ SPDX-License-Identifier: MPL-2.0
class:ring-red-700={$errors.password1 !== null}
class:ring-green-600={$touched.password1 === true &&
$errors.password1 === null}
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-none focus:border-rose-600"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-hidden focus:border-rose-600"
placeholder={$t('words.password')}
/>
<label
@@ -166,7 +166,7 @@ SPDX-License-Identifier: MPL-2.0
id="password2"
name="password2"
type="password"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-none focus:border-rose-600"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-hidden focus:border-rose-600"
placeholder={$t('words.password')}
class:ring-red-700={$errors.password2 !== null}
class:ring-green-600={$touched.password2 === true &&
@@ -181,7 +181,7 @@ SPDX-License-Identifier: MPL-2.0
</div>
</div>
<div
class="ring-1 ring-gray-500 focus:outline-none rounded-lg m-4 py-2"
class="ring-1 ring-gray-500 focus:outline-hidden rounded-lg m-4 py-2"
class:ring-red-700={$errors.privacy_accept !== null}
class:ring-green-600={$touched.privacy_accept === true &&
$errors.privacy_accept === null}
@@ -195,7 +195,7 @@ SPDX-License-Identifier: MPL-2.0
</label>
</div>
<div
class="ring-1 ring-gray-500 focus:outline-none rounded-lg m-4 py-2"
class="ring-1 ring-gray-500 focus:outline-hidden rounded-lg m-4 py-2"
class:ring-red-700={$errors.tos_accept !== null}
class:ring-green-600={$touched.tos_accept === true &&
$errors.tos_accept === null}
@@ -217,7 +217,7 @@ SPDX-License-Identifier: MPL-2.0
>
<button
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded hover:bg-gray-600 focus:outline-none"
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded-sm hover:bg-gray-600 focus:outline-hidden"
disabled={!$isValid || $isSubmitting}
class:cursor-not-allowed={!$isValid || $isSubmitting}
class:opacity-50={!$isValid || $isSubmitting}
@@ -270,10 +270,7 @@ SPDX-License-Identifier: MPL-2.0
<div
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
>
<div
class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
aria-hidden="true"
/>
<div class="fixed inset-0 bg-gray-500/75 transition-opacity" aria-hidden="true" />
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true"
@@ -285,7 +282,7 @@ SPDX-License-Identifier: MPL-2.0
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"
class="mx-auto shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"
>
<!-- Heroicon name: outline/exclamation -->
{#if responseData.data === '409' || responseData.data === 'error' || responseData.data === '400'}
@@ -362,7 +359,7 @@ SPDX-License-Identifier: MPL-2.0
responseData.open = false;
window.location.assign('/');
}}
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-xm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
>{$t('words.close')}
</button>
</div>
frontend/src/routes/account/reset-password/+page.svelte
+2 -2
View File
@@ -69,7 +69,7 @@ SPDX-License-Identifier: MPL-2.0
bind:value={email}
name="email"
type="email"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-none focus:border-rose-600"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-hidden focus:border-rose-600"
placeholder={$t('words.email')}
/>
<label
@@ -89,7 +89,7 @@ SPDX-License-Identifier: MPL-2.0
>
<button
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded-sm hover:bg-gray-600 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
disabled={email === ''}
type="submit"
>
frontend/src/routes/account/settings/+page.svelte
+3 -3
View File
@@ -184,21 +184,21 @@ SPDX-License-Identifier: MPL-2.0
<label
>{$t('settings_page.old_password')}:<input
type="password"
class="m-2 text-black rounded p-1 dark:bg-gray-700 dark:text-white"
class="m-2 text-black rounded-sm p-1 dark:bg-gray-700 dark:text-white"
bind:value={changePasswordData.oldPassword}
/></label
>
<label
>{$t('settings_page.new_password')}:<input
type="password"
class="m-2 text-black rounded p-1 dark:bg-gray-700 dark:text-white"
class="m-2 text-black rounded-sm p-1 dark:bg-gray-700 dark:text-white"
bind:value={changePasswordData.newPassword}
/></label
>
<label
>{$t('settings_page.repeat_password')}:<input
type="password"
class="m-2 text-black rounded p-1 dark:bg-gray-700 dark:text-white"
class="m-2 text-black rounded-sm p-1 dark:bg-gray-700 dark:text-white"
bind:value={changePasswordData.newPasswordConfirm}
/></label
>
frontend/src/routes/account/settings/avatar/+page.svelte
+9 -7
View File
@@ -123,7 +123,7 @@ SPDX-License-Identifier: MPL-2.0
>
<img
src={get_image_url({ ...data, [data_keys[index]]: key })}
in:fade={{ duration: 100 }}
in:fade|global={{ duration: 100 }}
/>
</button>
{/each}
@@ -133,17 +133,19 @@ SPDX-License-Identifier: MPL-2.0
</div>
{#if finished}
<div
class="fixed top-0 left-0 w-full h-full z-30 bg-black flex justify-center flex-col bg-opacity-90"
out:fade={{ duration: 200 }}
in:fade={{ duration: 300 }}
class="fixed top-0 left-0 w-full h-full z-30 bg-black/90 flex justify-center flex-col"
out:fade|global={{ duration: 200 }}
in:fade|global={{ duration: 300 }}
>
<h1 class="m-auto text-4xl" in:fade={{ delay: 3500 }}>{$t('avatar_settings.thats_you')}</h1>
<h1 class="m-auto text-4xl" in:fade|global={{ delay: 3500 }}>
{$t('avatar_settings.thats_you')}
</h1>
<img
class="m-auto w-1/2 h-1/2 z-20"
src={get_image_url(data)}
in:fly={{ delay: 500, duration: 4000, y: -500, easing: bounceOut }}
in:fly|global={{ delay: 500, duration: 4000, y: -500, easing: bounceOut }}
/>
<div class="m-auto grid grid-cols-2 gap-4" in:fade={{ delay: 3500 }}>
<div class="m-auto grid grid-cols-2 gap-4" in:fade|global={{ delay: 3500 }}>
<BrownButton
on:click={() => {
index = 0;
frontend/src/routes/account/settings/security/+page.svelte
+2 -2
View File
@@ -183,7 +183,7 @@ SPDX-License-Identifier: MPL-2.0
type="button"
role="switch"
aria-checked="true"
class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-blue-700 transition focus:outline-none focus:ring focus:ring-blue-200"
class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-blue-700 transition focus:outline-hidden focus:ring focus:ring-blue-200"
>
<span
aria-hidden="true"
@@ -205,7 +205,7 @@ SPDX-License-Identifier: MPL-2.0
}}
role="switch"
aria-checked="false"
class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-gray-200 transition focus:outline-none focus:ring focus:ring-blue-200"
class="relative inline-flex h-5 w-8 shrink-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-gray-200 transition focus:outline-hidden focus:ring focus:ring-blue-200"
>
<span
aria-hidden="true"
frontend/src/routes/account/settings/security/backup_codes.svelte
+1 -1
View File
@@ -27,7 +27,7 @@ SPDX-License-Identifier: MPL-2.0
};
</script>
<div class="w-screen h-screen fixed top-0 left-0 p-48 z-30 bg-black bg-opacity-50">
<div class="w-screen h-screen fixed top-0 left-0 p-48 z-30 bg-black/50">
<div class="w-full h-full">
<button
class="bg-gray-200 dark:bg-gray-900 px-2 py-1 rounded-t-lg hover:bg-gray-300 transition"
frontend/src/routes/account/settings/security/totp_setup.svelte
+1 -1
View File
@@ -18,7 +18,7 @@ SPDX-License-Identifier: MPL-2.0
};
</script>
<div class="w-screen h-screen fixed top-0 left-0 p-48 z-30 bg-black bg-opacity-50">
<div class="w-screen h-screen fixed top-0 left-0 p-48 z-30 bg-black/50">
<div class="w-full h-full">
<button
class="bg-gray-200 dark:bg-gray-900 px-2 py-1 rounded-t-lg hover:bg-gray-300 transition"
frontend/src/routes/create/+page.svelte
+3 -6
View File
@@ -71,10 +71,7 @@ SPDX-License-Identifier: MPL-2.0
<div
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
>
<div
class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
aria-hidden="true"
/>
<div class="fixed inset-0 bg-gray-500/75 transition-opacity" aria-hidden="true" />
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true"
>&#8203;</span
@@ -85,7 +82,7 @@ SPDX-License-Identifier: MPL-2.0
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"
class="mx-auto shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"
>
<!-- Heroicon name: outline/exclamation -->
<svg
@@ -119,7 +116,7 @@ SPDX-License-Identifier: MPL-2.0
on:click={() => {
window.location.href = '/dashboard';
}}
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-xm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
>{$t('words.close')}
</button>
</div>
frontend/src/routes/dashboard/+page.svelte
+6 -6
View File
@@ -119,14 +119,14 @@ SPDX-License-Identifier: MPL-2.0
{:then quizzes}
<div class="flex flex-col w-full mx-auto">
<!-- <button
class='px-4 py-2 font-medium tracking-wide text-gray-500 whitespace-nowrap dark:text-gray-400 capitalize transition-colors dark:bg-gray-700 duration-200 transform bg-[#B07156] rounded-md hover:bg-green-600 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80'>
class='px-4 py-2 font-medium tracking-wide text-gray-500 whitespace-nowrap dark:text-gray-400 capitalize transition-colors dark:bg-gray-700 duration-200 transform bg-[#B07156] rounded-md hover:bg-green-600 focus:outline-hidden focus:ring focus:ring-blue-300 focus:ring-opacity-80'>
Primary
</button>-->
<div class="w-full grid lg:grid-cols-4 gap-2 grid-cols-2 px-4">
{#if create_button_clicked}
<div
class="flex gap-2"
transition:fly={{ y: 10 }}
transition:fly|global={{ y: 10 }}
use:tippy={{ content: 'Unsure? Choose "Quiz".' }}
>
<BrownButton href="/create">{$t('words.quiz')}</BrownButton>
@@ -155,7 +155,7 @@ SPDX-License-Identifier: MPL-2.0
<div>
<input
bind:value={search_term}
class="p-2 rounded-lg outline-none text-center w-96 dark:bg-gray-700"
class="p-2 rounded-lg outline-hidden text-center w-96 dark:bg-gray-700"
placeholder={$t('dashboard.search_for_own_quizzes')}
/>
<button
@@ -185,7 +185,7 @@ SPDX-License-Identifier: MPL-2.0
<div class="flex flex-col gap-4 mt-4 px-2">
{#each items_to_show as quiz}
<div
class="grid grid-cols-2 lg:grid-cols-3 w-full rounded border-[#B07156] border-2 p-2 h-[20vh] overflow-hidden max-h-[20vh]"
class="grid grid-cols-2 lg:grid-cols-3 w-full rounded-sm border-[#B07156] border-2 p-2 h-[20vh] overflow-hidden max-h-[20vh]"
>
<div class="hidden lg:flex w-auto h-full items-center relative">
{#if quiz.cover_image}
@@ -193,11 +193,11 @@ SPDX-License-Identifier: MPL-2.0
src="/api/v1/storage/download/{quiz.cover_image}"
alt="user provided"
loading="lazy"
class="shrink-0 max-w-full max-h-full absolute rounded"
class="shrink-0 max-w-full max-h-full absolute rounded-sm"
/>-->
<MediaComponent
src={quiz.cover_image}
css_classes="shrink-0 max-w-full max-h-full absolute rounded"
css_classes="shrink-0 max-w-full max-h-full absolute rounded-sm"
/>
{/if}
</div>
frontend/src/routes/dashboard/Analytics.svelte
+3 -3
View File
@@ -32,12 +32,12 @@ SPDX-License-Identifier: MPL-2.0
{#if quiz}
<div
class="fixed w-full h-full top-0 flex bg-black bg-opacity-50 z-50 overflow-scroll"
class="fixed w-full h-full top-0 flex bg-black/50 z-50 overflow-scroll"
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 lg:w-2/3 w-11/12 h-5/6"
class="m-auto bg-white dark:bg-gray-600 rounded-sm shadow-2xl flex p-4 flex-col lg:w-2/3 w-11/12 h-5/6"
>
<h1 class="text-center text-5xl">{$t('words.analytics')}</h1>
<section class="flex flex-col gap-2 mt-8">
frontend/src/routes/edit/+page.svelte
+3 -6
View File
@@ -95,10 +95,7 @@ SPDX-License-Identifier: MPL-2.0
<div
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
>
<div
class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
aria-hidden="true"
/>
<div class="fixed inset-0 bg-gray-500/75 transition-opacity" aria-hidden="true" />
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true"
>&#8203;</span
@@ -109,7 +106,7 @@ SPDX-License-Identifier: MPL-2.0
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"
class="mx-auto shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"
>
<!-- Heroicon name: outline/exclamation -->
<svg
@@ -145,7 +142,7 @@ SPDX-License-Identifier: MPL-2.0
on:click={() => {
window.location.href = '/dashboard';
}}
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-xm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
>{$t('words.close')}
</button>
</div>
frontend/src/routes/edit/files/+page.svelte
+6 -6
View File
@@ -61,7 +61,7 @@ SPDX-License-Identifier: MPL-2.0
<div class="grid grid-cols-1 lg:grid-cols-2 p-4 gap-4">
{#each images as image}
<div
class="border-2 border-[#B07156] rounded p-2 grid grid-cols-2 hover:opacity-100 transition-all"
class="border-2 border-[#B07156] rounded-sm p-2 grid grid-cols-2 hover:opacity-100 transition-all"
class:opacity-40={image.quiztivities.length === 0 && image.quizzes.length === 0}
>
<img
@@ -119,11 +119,11 @@ SPDX-License-Identifier: MPL-2.0
{#if edit_popup}
<div
transition:fade|local={{ duration: 100 }}
class="fixed top-0 left-0 h-screen w-screen z-40 flex bg-black bg-opacity-50"
transition:fade={{ duration: 100 }}
class="fixed top-0 left-0 h-screen w-screen z-40 flex bg-black/50"
on:click={close_popup_handler}
>
<div class="w-auto h-auto m-auto rounded bg-white dark:bg-gray-700 p-4">
<div class="w-auto h-auto m-auto rounded-sm bg-white dark:bg-gray-700 p-4">
<h1 class="text-2xl text-center">{$t('file_dashboard.edit_the_image')}</h1>
<form class="flex flex-col" on:submit|preventDefault={save_image_metadata}>
<div class="flex flex-row">
@@ -134,14 +134,14 @@ SPDX-License-Identifier: MPL-2.0
</div>
<div class="flex flex-col gap-3">
<input
class="rounded outline-none dark:bg-gray-500 p-0.5 border-4 border-transparent"
class="rounded-sm outline-hidden dark:bg-gray-500 p-0.5 border-4 border-transparent"
id="name"
type="text"
bind:value={edit_popup.filename}
/>
<input
class:border-red-700={!edit_popup.alt_text}
class="transition rounded outline-none dark:bg-gray-500 p-0.5 border-4 border-transparent"
class="transition rounded-sm outline-hidden dark:bg-gray-500 p-0.5 border-4 border-transparent"
id="alt_text"
type="text"
bind:value={edit_popup.alt_text}
frontend/src/routes/edit/videos/+page.svelte
+1 -1
View File
@@ -190,7 +190,7 @@ SPDX-License-Identifier: MPL-2.0
>
</div>
<span
class="h-full transition-all absolute rounded bg-black bg-opacity-50"
class="h-full transition-all absolute rounded-sm bg-black/50"
style="width: {100 - stats.progress * 100}%"
/>
</div>
frontend/src/routes/import/+page.svelte
+4 -4
View File
@@ -153,7 +153,7 @@ SPDX-License-Identifier: MPL-2.0
bind:value={url_input}
name="email"
type="url"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-none focus:border-rose-600"
class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-hidden focus:border-rose-600"
placeholder="https://create.kahoot.it/details/something"
class:ring-red-700={!url_valid}
class:ring-green-600={url_valid}
@@ -177,7 +177,7 @@ SPDX-License-Identifier: MPL-2.0
<span />
<button
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded-sm hover:bg-gray-600 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
disabled={!url_valid || is_loading}
type="submit"
>
@@ -213,7 +213,7 @@ SPDX-License-Identifier: MPL-2.0
name="file"
type="file"
accept=".cqa,.xlsx"
class="w-full peer bg-transparent h-10 rounded-lg py-1.5 text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-none focus:border-rose-600"
class="w-full peer bg-transparent h-10 rounded-lg py-1.5 text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-hidden focus:border-rose-600"
class:ring-red-700={!file_input}
class:ring-green-600={file_input}
/>
@@ -236,7 +236,7 @@ SPDX-License-Identifier: MPL-2.0
<span />
<button
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded-sm hover:bg-gray-600 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
disabled={!file_input || is_loading}
type="submit"
>
frontend/src/routes/moderation/+page.svelte
+2 -2
View File
@@ -13,7 +13,7 @@ SPDX-License-Identifier: MPL-2.0
<div class="flex flex-col p-2">
{#each data.quizzes as quiz}
<div class="border-2 border-[#B07156] rounded w-full h-[20vh] p-2 flex flex-col gap-2">
<div class="border-2 border-[#B07156] rounded-sm w-full h-[20vh] p-2 flex flex-col gap-2">
<div class="grid grid-cols-3 h-full">
<div class="hidden lg:flex w-auto h-full items-center relative">
{#if quiz.cover_image}
@@ -21,7 +21,7 @@ SPDX-License-Identifier: MPL-2.0
src="/api/v1/storage/download/{quiz.cover_image}"
alt="user provided"
loading="lazy"
class="shrink-0 max-w-full max-h-full absolute rounded"
class="shrink-0 max-w-full max-h-full absolute rounded-sm"
/>
{/if}
</div>
frontend/src/routes/quiztivity/play/navigation_bar.svelte
+1 -1
View File
@@ -14,7 +14,7 @@ SPDX-License-Identifier: MPL-2.0
const { t } = getLocalization();
</script>
<div class="mt-auto h-[7vh] bg-opacity-50 bg-black shadow-2xl flex justify-between">
<div class="mt-auto h-[7vh] bg-black/50 shadow-2xl flex justify-between">
<div class="my-auto justify-start ml-4">
<BrownButton
disabled={current_slide_index < 1}
frontend/src/routes/results/[result_id]/+page.svelte
+3 -3
View File
@@ -73,7 +73,7 @@ SPDX-License-Identifier: MPL-2.0
</div>
</div>
{#if selected_tab === SelectedTab.Overview}
<div in:fade={{ duration: 150 }}>
<div in:fade|global={{ duration: 150 }}>
<GeneralOverview
questions={data.results.questions}
answers={data.results.answers}
@@ -83,11 +83,11 @@ SPDX-License-Identifier: MPL-2.0
/>
</div>
{:else if selected_tab === SelectedTab.Questions}
<div in:fade={{ duration: 150 }}>
<div in:fade|global={{ duration: 150 }}>
<QuestionOverview questions={data.results.questions} answers={data.results.answers} />
</div>
{:else if selected_tab === SelectedTab.Players}
<div in:fade={{ duration: 150 }}>
<div in:fade|global={{ duration: 150 }}>
<PlayerOverview
custom_field={data.results.custom_field_data}
scores={data.results.player_scores}
frontend/src/routes/results/[result_id]/question_overview.svelte
+2 -2
View File
@@ -57,7 +57,7 @@ SPDX-License-Identifier: MPL-2.0
{#each questions as question, i}
<div class="transition-all">
<div
class="w-full bg-white p-2 rounded grid grid-cols-3 z-40 dark:bg-gray-700 bg-opacity-60 dark:bg-opacity-80"
class="w-full bg-white/60 p-2 rounded-sm grid grid-cols-3 z-40 dark:bg-gray-700/80"
>
<button
class="text-center underline text-xl"
@@ -80,7 +80,7 @@ SPDX-License-Identifier: MPL-2.0
{/if}
</div>
{#if question_open === i}
<div in:fly|local={{ y: -10 }}>
<div in:fly={{ y: -10 }}>
<QuestionTab {question} answers={answers[i]} />
</div>
{/if}
frontend/src/routes/results/[result_id]/question_tab_thing.svelte
+1 -1
View File
@@ -51,7 +51,7 @@ SPDX-License-Identifier: MPL-2.0
</script>
<div class="flex justify-center">
<div class="bg-white p-2 -z-10 w-10/12 rounded dark:bg-gray-700">
<div class="bg-white p-2 -z-10 w-10/12 rounded-sm dark:bg-gray-700">
{#if question.type !== QuizQuestionType.ORDER && question.type !== QuizQuestionType.RANGE}
<div class="flex flex-col mb-4">
{#each question.answers as answer}
frontend/src/routes/search/+page.svelte
+2 -2
View File
@@ -54,14 +54,14 @@ SPDX-License-Identifier: MPL-2.0
>
<input
type="search"
class="form-control relative flex-auto min-w-0 block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
class="form-control relative flex-auto min-w-0 block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded-sm transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-hidden"
placeholder={$t('search_page.at_least_3_characters')}
aria-label="Search"
aria-describedby="button-addon2"
bind:value={search_term}
/>
<button
class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out flex items-center disabled:opacity-50 disabled:cursor-not-allowed"
class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded-sm shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-hidden focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out flex items-center disabled:opacity-50 disabled:cursor-not-allowed"
id="button-addon2"
disabled={search_term.length <= 2}
type="submit"
frontend/src/routes/user/[user_id]/+page.svelte
+1 -1
View File
@@ -120,7 +120,7 @@ SPDX-License-Identifier: MPL-2.0
<a
href="/api/v1/eximport/{quiz.id}"
aria-label="Download the quiz"
class="flex justify-center 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="flex justify-center 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"
><!-- heroicons/download -->
<svg
class="w-5 h-5"
frontend/src/routes/view/[quiz_id]/ModComponent.svelte
+1 -1
View File
@@ -29,7 +29,7 @@ SPDX-License-Identifier: MPL-2.0
};
</script>
<div class="rounded border-2 border-[#B07156] flex flex-col w-fit gap-2 p-2">
<div class="rounded-sm border-2 border-[#B07156] flex flex-col w-fit gap-2 p-2">
<div class:opacity-50={mod_rating !== null && mod_rating !== undefined} class="transition">
<BrownButton on:click={() => (mod_rating = null)}>Not Checked</BrownButton>
</div>