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
frontend/src/routes/__layout.svelte
+26 -1
View File
@@ -20,6 +20,24 @@
if (browser) {
pathname.set(window.location.pathname);
if (
localStorage.theme === 'dark' ||
(!('theme' in localStorage) &&
window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
// Whenever the user explicitly chooses light mode
// localStorage.theme = 'light';
//
// // Whenever the user explicitly chooses dark mode
// localStorage.theme = 'dark';
//
// // Whenever the user explicitly chooses to respect the OS preference
// localStorage.removeItem('theme');
}
initLocalizationContext();
@@ -48,9 +66,10 @@
{/if}
<style lang="scss">
:global(body) {
:global(html:not(.dark)) {
// height: 100%;
// width: 100%;
background: linear-gradient(to right, #009444, #39b54a, #8dc63f) repeat-y;
background-size: cover;
/*background: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%); */
@@ -62,6 +81,12 @@
//animation: background_animation 5s ease infinite;
}
:global(html.dark) {
background-color: #0f2702;
background-size: cover;
color: white;
}
@keyframes background_animation {
0% {
background-position: 0% 50%;
frontend/src/routes/create.svelte
+1 -1
View File
@@ -32,7 +32,7 @@
import Editor from '$lib/editor.svelte';
import { getLocalization } from '$lib/i18n';
import { navbarVisible } from '$lib/stores';
import { dataSchema } from '$lib/jupSchemas';
import { dataSchema } from '$lib/yupSchemas';
navbarVisible.set(true);
frontend/src/routes/docs/attribution.svelte
+1 -1
View File
@@ -3,7 +3,7 @@
<meta name="description" content="People who helped make with ClassQuiz." />
</svelte:head>
<article
class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate text-yellow-50 px-4"
class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4 dark:prose-invert"
>
<h1>People</h1>
<h2>Contributors</h2>
frontend/src/routes/docs/develop.svelte
+1 -1
View File
@@ -6,7 +6,7 @@
/>
</svelte:head>
<article
class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate text-yellow-50 px-4"
class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4 dark:prose-invert"
>
<h1>Development-setup</h1>
frontend/src/routes/docs/import-from-kahoot.svelte
+3 -1
View File
@@ -5,7 +5,9 @@
content="How to import quizzes from KAHOOT! into ClassQuiz, the open-source quiz-application, easily"
/>
</svelte:head>
<article class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4">
<article
class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4 dark:prose-invert"
>
<h1>Import Quizzes from Kahoot into ClassQuiz</h1>
<p>
frontend/src/routes/docs/index.svelte
+3 -1
View File
@@ -5,7 +5,9 @@
content="The overview about the docs for ClassQuiz, the open-source quiz-application"
/>
</svelte:head>
<article class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4">
<article
class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4 dark:prose-invert"
>
<h1>Welcome to the ClassQuiz docs!</h1>
<h2>Index</h2>
<ul>
frontend/src/routes/docs/privacy-policy.svelte
+3 -1
View File
@@ -16,7 +16,9 @@
/>
</svelte:head>
<article class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-gray px-4">
<article
class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4 dark:prose-invert"
>
<h1>Privacy Policy</h1>
<h2>What gets stored for how long and why</h2>
frontend/src/routes/docs/roadmap.svelte
+3 -1
View File
@@ -5,7 +5,9 @@
content="The roadmap for ClassQuiz, the open-source quiz-application"
/>
</svelte:head>
<article class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4">
<article
class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4 dark:prose-invert"
>
<h1>Roadmap</h1>
<ul>
frontend/src/routes/docs/self-host.svelte
+3 -1
View File
@@ -15,7 +15,9 @@
content="How to self-host ClassQuiz, the open-source quiz-application"
/>
</svelte:head>
<article class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-gray px-4">
<article
class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4 dark:prose-invert"
>
<h1>Self-Hosting</h1>
<p>Since ClassQuiz is open-source, it can also be self-hosted.</p>
frontend/src/routes/edit.svelte
+1 -1
View File
@@ -30,7 +30,7 @@
import Editor from '$lib/editor.svelte';
import { getLocalization } from '$lib/i18n';
import { navbarVisible } from '$lib/stores';
import { dataSchema } from '$lib/jupSchemas';
import { dataSchema } from '$lib/yupSchemas';
navbarVisible.set(true);
frontend/src/routes/explore.svelte
+7 -3
View File
@@ -47,14 +47,18 @@
{#each quizzes.hits as quiz}
<div class="flex justify-center">
<a href="/view/{quiz.id}" class="h-max w-fit">
<div class="max-w-md py-4 px-8 bg-white shadow-lg rounded-lg my-20">
<div
class="max-w-md py-4 px-8 bg-white shadow-lg rounded-lg my-20 dark:bg-slate-800"
>
<!-- <div class='flex justify-center md:justify-end -mt-16'>
<img class='w-20 h-20 object-cover rounded-full border-2 border-indigo-500'
src='https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80'>
</div>-->
<div>
<h2 class="text-gray-800 text-3xl font-semibold">{quiz.title}</h2>
<p class="mt-2 text-gray-600">{quiz.description}</p>
<h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">
{quiz.title}
</h2>
<p class="mt-2 text-gray-600 dark:text-gray-300">{quiz.description}</p>
</div>
<div class="flex mt-4">
<span>{$t('explore_page.made_by')} {quiz.user}</span>
frontend/src/routes/view/[quiz_id].svelte
+1 -1
View File
@@ -125,7 +125,7 @@
<h1 class="text-3xl m-1">{$t('words.question')} {index_question + 1}</h1>
<!-- <label class='m-1 flex flex-row gap-2 w-3/5'>-->
<p class="text-black w-full bg-inherit">
<p class="text-black w-full bg-inherit text-black dark:text-gray-200">
{$t('words.question')}: {question.question}
</p>
<!-- </label>-->