This commit is contained in:
Mawoka
2022-04-09 09:48:40 +02:00
parent 14cfcb0e45
commit 01d423ba04
10 changed files with 120 additions and 37 deletions
+64 -35
View File
@@ -1,6 +1,7 @@
<script>
import '@fontsource/marck-script/index.css';
import { getLocalization } from '$lib/i18n';
import { signedIn } from '$lib/stores';
const { t } = getLocalization();
@@ -17,15 +18,11 @@
<nav
class="w-screen px-4 lg:px-10 py-2 flex flex-col lg:flex-row lg:items-center fixed backdrop-blur-sm bg-white/60 shadow-md z-50 top-0"
>
<!-- Our logo and button -->
<section class="w-full lg:w-max flex justify-between">
<!-- Logo -->
<a href="/" class="font-black tracking-tight text-xl text-black marck-script link-hover"
>ClassQuiz</a
>
<!-- Our open/close buttons -->
<!-- Open menu -->
<button
class="lg:hidden"
id="open-menu"
@@ -76,41 +73,73 @@
</button>
</section>
<!-- Our list of items -->
<ul
id="menu-items"
class="lg:flex w-full flex-col lg:flex-row lg:pl-6"
class:hidden={!menuItems}
>
<li class="py-2">
<a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
href="/play">{$t('words.play')}</a
>
</li>
<li class="py-2">
<a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
href="/account/register">{$t('words.register')}</a
>
</li>
<li class="py-2">
<a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
href="/account/login">{$t('words.login')}</a
>
</li>
<li class="py-2">
<a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
href="https://github.com/mawoka-myblock/classquiz">GitHub</a
>
</li>
<li class="py-2">
<a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
href="/docs">{$t('words.docs')}</a
>
</li>
{#if $signedIn}
<li class="py-2">
<a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
href="/play">{$t('words.play')}</a
>
</li>
<li class="py-2">
<a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
href="/overview">{$t('words.overview')}</a
>
</li>
<li class="py-2">
<a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
href="https://github.com/mawoka-myblock/classquiz">GitHub</a
>
</li>
<li class="py-2">
<a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
href="/api/v1/users/logout">{$t('words.logout')}</a
>
</li>
<li class="py-2">
<a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
href="/docs">{$t('words.docs')}</a
>
</li>
{:else}
<li class="py-2">
<a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
href="/play">{$t('words.play')}</a
>
</li>
<li class="py-2">
<a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
href="/account/register">{$t('words.register')}</a
>
</li>
<li class="py-2">
<a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
href="/account/login">{$t('words.login')}</a
>
</li>
<li class="py-2">
<a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
href="https://github.com/mawoka-myblock/classquiz">GitHub</a
>
</li>
<li class="py-2">
<a
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
href="/docs">{$t('words.docs')}</a
>
</li>
{/if}
</ul>
</nav>
+1
View File
@@ -1,3 +1,4 @@
import { writable } from 'svelte/store';
export const navbarVisible = writable(true);
export const signedIn = writable(false);
@@ -1,3 +1,14 @@
<script lang="ts" context="module">
import { signedIn } from '$lib/stores';
export async function load({ session }) {
if (session.authenticated) {
signedIn.set(true);
}
return {};
}
</script>
<script lang="ts">
import { navbarVisible } from '$lib/stores';
+5
View File
@@ -1,4 +1,6 @@
<script context="module" lang="ts">
import { signedIn } from '$lib/stores';
export async function load({ session, url }) {
if (!session.authenticated) {
return {
@@ -6,6 +8,9 @@
redirect: '/account/login'
};
}
if (session.authenticated) {
signedIn.set(true);
}
const token = url.searchParams.get('token');
const pin = url.searchParams.get('pin');
let auto_connect = url.searchParams.get('connect') !== null;
+11
View File
@@ -1,3 +1,14 @@
<script lang="ts" context="module">
import { signedIn } from '$lib/stores';
export async function load({ session }) {
if (session.authenticated) {
signedIn.set(true);
}
return {};
}
</script>
<script lang="ts">
import Footer from '$lib/footer.svelte';
import { navbarVisible } from '$lib/stores';
+5
View File
@@ -1,4 +1,5 @@
<script lang="ts" context="module">
import { signedIn } from '$lib/stores';
export async function load({ url, session }) {
if (!session.authenticated) {
return {
@@ -6,6 +7,10 @@
redirect: '/account/login'
};
}
if (session.authenticated) {
signedIn.set(true);
}
const quiz_id = url.searchParams.get('quiz_id');
if (quiz_id === null) {
return {
+5
View File
@@ -1,10 +1,15 @@
<script context="module" lang="ts">
import { signedIn } from '$lib/stores';
export async function load({ session }) {
if (!session.authenticated) {
return {
status: 302,
redirect: '/account/login'
};
} else {
if (session.authenticated) {
signedIn.set(true);
}
}
return {
props: {
+11
View File
@@ -1,3 +1,14 @@
<script lang="ts" context="module">
import { signedIn } from '$lib/stores';
export async function load({ session }) {
if (session.authenticated) {
signedIn.set(true);
}
return {};
}
</script>
<script lang="ts">
import { navbarVisible } from '$lib/stores';
import { getLocalization } from '$lib/i18n';
+2 -1
View File
@@ -19,8 +19,9 @@
import { DateTime } from 'luxon';
import { getLocalization } from '$lib/i18n';
import Footer from '$lib/footer.svelte';
import { navbarVisible } from '$lib/stores';
import { navbarVisible, signedIn } from '$lib/stores';
signedIn.set(true);
navbarVisible.set(true);
const { t } = getLocalization();
+5 -1
View File
@@ -1,5 +1,9 @@
<script context="module" lang="ts">
export async function load({ url }) {
import { signedIn } from '$lib/stores';
export async function load({ url, session }) {
if (session.authenticated) {
signedIn.set(true);
}
const token = url.searchParams.get('pin');
return {
props: {