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

💄 Added dark-mode

Browse Source
This commit is contained in:
Mawoka
2022-05-04 21:30:39 +02:00
parent 916c0c6f69
commit 691132cc7d
19 changed files with 166 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/collapsible.svelte
+11 -10
View File
@@ -4,28 +4,27 @@
let expanded = false;
</script>
<div class="collapsible">
<h3>
<button aria-expanded={expanded} on:click={() => (expanded = !expanded)}
<div>
<h3 class="bg-white dark:bg-slate-800 m-0">
<button
aria-expanded={expanded}
on:click={() => (expanded = !expanded)}
class="bg-white dark:bg-slate-800 flex justify-between w-full border-none m-0 p-2"
>{headerText}
<svg viewBox="0 0 20 20" fill="none">
<svg viewBox="0 0 20 20" fill="none" class="my-auto">
<path class="vert" d="M10 1V19" stroke="black" stroke-width="2" />
<path d="M1 10L19 10" stroke="black" stroke-width="2" />
</svg>
</button>
</h3>
<div class="contents" class:hidden={!expanded}>
<div class="border-b-1 border-gray-500" class:hidden={!expanded}>
<slot />
</div>
</div>
<style>
.collapsible {
border-bottom: 1px solid var(--gray-light, #eee);
}
h3 {
/* h3 {
margin: 0;
}
@@ -38,6 +37,8 @@
border: none;
margin: 0;
padding: 1em 0.5em;
}*/
button {
}
button[aria-expanded='true'] {
frontend/src/lib/editor.svelte
+12 -8
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { getLocalization } from '$lib/i18n';
import * as yup from 'yup';
import { dataSchema } from '$lib/jupSchemas';
import { dataSchema } from '$lib/yupSchemas';
const { t } = getLocalization();
@@ -89,7 +89,7 @@
type="text"
placeholder={$t('words.title')}
bind:value={data.title}
class="text-black bg-inherit border-dotted border-b-2 border-black w-full"
class="text-black bg-inherit border-dotted border-b-2 border-black w-full dark:text-gray-200"
class:border-red-600={!yup.reach(dataSchema, 'title').isValidSync(data.title)}
class:border-solid={!yup.reach(dataSchema, 'title').isValidSync(data.title)}
class:border-2={!yup.reach(dataSchema, 'title').isValidSync(data.title)}
@@ -100,7 +100,7 @@
<textarea
placeholder={$t('words.description')}
bind:value={data.description}
class="text-black w-full"
class="text-black w-full dark:text-gray-200 dark:bg-gray-800 rounded-lg p-1"
class:border-red-600={!yup.reach(dataSchema, 'description').isValidSync(data.description)}
class:border-solid={!yup.reach(dataSchema, 'description').isValidSync(data.description)}
class:border-2={!yup.reach(dataSchema, 'description').isValidSync(data.description)}
@@ -116,7 +116,7 @@
type="text"
placeholder={$t('words.question')}
bind:value={question.question}
class="text-black w-full bg-inherit border-dotted border-b-2 border-black"
class="text-black w-full bg-inherit border-dotted border-b-2 border-black dark:text-gray-200"
class:border-red-600={!yup
.reach(dataSchema, 'questions[].question')
.isValidSync(question.question)}
@@ -134,7 +134,7 @@
type="text"
placeholder="https://i.imgur.com/kSPCidY.png"
bind:value={question.image}
class="text-black w-full bg-inherit border-dotted border-b-2 border-black"
class="text-black w-full bg-inherit border-dotted border-b-2 border-black dark:text-gray-200"
class:border-red-600={!yup
.reach(dataSchema, 'questions[].image')
.isValidSync(question.image)}
@@ -152,7 +152,7 @@
type="text"
placeholder="20"
bind:value={question.time}
class="text-black w-full bg-inherit border-dotted border-b-2 border-black"
class="text-black w-full bg-inherit border-dotted border-b-2 border-black dark:text-gray-200"
class:border-red-600={!yup
.reach(dataSchema, 'questions[].time')
.isValidSync(question.time)}
@@ -177,7 +177,7 @@
type="text"
placeholder={$t('words.answer')}
bind:value={data.questions[index_question].answers[index_answer].answer}
class="text-black w-full bg-inherit border-dotted border-b-2 border-black"
class="text-black w-full bg-inherit border-dotted border-b-2 border-black dark:text-gray-200"
class:border-red-600={!yup
.reach(dataSchema, 'questions[].answers[].answer')
.isValidSync(
@@ -196,7 +196,11 @@
/>
</label>
<label class="m-1 flex flex-row gap-2 w-2/6 flex-nowrap whitespace-nowrap">
<input type="checkbox" bind:checked={answer.right} class="text-black w-fit" />
<input
type="checkbox"
bind:checked={answer.right}
class="text-black w-fit dark:text-gray-200"
/>
<span class="w-fit">{$t('editor.right_or_true?')}</span>
</label>
frontend/src/lib/landing/testimonials.svelte
+4 -2
View File
@@ -32,13 +32,15 @@ I like it and would use it for my house parties next time!`,
<div class="max-w-3xl p-4 text-gray-800 rounded-lg text-white">
<div class="mb-2">
<div class="h-3 text-3xl text-left text-indigo-600">“</div>
<p class="px-4 text-center text-gray-800 font-medium">
<p
class="px-4 text-center text-gray-800 font-medium dark:text-gray-300"
>
{@html testi.quote}
</p>
<div class="h-3 text-3xl text-right text-indigo-600">”</div>
<div class="text-center">
<h5 class="font-bold text-indigo-600">{testi.name}</h5>
<a class="text-sm text-gray-600" href={testi.source}>Source</a>
<a class="text-sm text-gray-500" href={testi.source}>Source</a>
</div>
</div>
</div>
frontend/src/lib/navbar.svelte
+67 -1
View File
@@ -1,7 +1,16 @@
<script>
<script lang="ts">
import '@fontsource/marck-script/index.css';
import { getLocalization } from '$lib/i18n';
import { signedIn, pathname } from '$lib/stores';
import { createTippy } from 'svelte-tippy';
import 'tippy.js/animations/perspective-subtle.css';
import 'tippy.js/dist/tippy.css';
const tippy = createTippy({
arrow: true,
animation: 'perspective-subtle',
placement: 'bottom'
});
const { t } = getLocalization();
@@ -13,6 +22,15 @@
closeMenu = !closeMenu;
menuItems = !menuItems;
};
const switchDarkMode = (on: boolean): void => {
if (on) {
localStorage.setItem('theme', 'dark');
} else {
localStorage.setItem('theme', 'light');
}
window.location.reload();
};
</script>
<nav
@@ -155,4 +173,52 @@
</li>
{/if}
</ul>
<div class="justify-self-end h-full flex justify-center items-center">
<button
class="dark:visible invisible"
on:click={() => {
switchDarkMode(false);
}}
use:tippy={{ content: 'Switch light mode on' }}
>
<!-- Heroicons: sun -->
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
/>
</svg>
</button>
<button
class="dark:invisible visible"
on:click={() => {
switchDarkMode(true);
}}
use:tippy={{ content: 'Switch dark mode on' }}
>
<!-- Heroicons: moon -->
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
/>
</svg>
</button>
</div>
</nav>
frontend/src/lib/jupSchemas.ts → frontend/src/lib/yupSchemas.ts
View File