🐛 Formatted and fixed stuff
This commit is contained in:
Mawoka
@@ -4,59 +4,56 @@
|
||||
let expanded = false;
|
||||
</script>
|
||||
|
||||
<div class='collapsible'>
|
||||
<div class="collapsible">
|
||||
<h3>
|
||||
<button aria-expanded={expanded} on:click={() => expanded = !expanded}>{headerText}
|
||||
<svg viewBox='0 0 20 20' fill='none'>
|
||||
<path class='vert' d='M10 1V19' stroke='black' stroke-width='2' />
|
||||
<path d='M1 10L19 10' stroke='black' stroke-width='2' />
|
||||
<button aria-expanded={expanded} on:click={() => (expanded = !expanded)}
|
||||
>{headerText}
|
||||
<svg viewBox="0 0 20 20" fill="none">
|
||||
<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}>
|
||||
<slot></slot>
|
||||
<div class="contents" class:hidden={!expanded}>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.collapsible {
|
||||
border-bottom: 1px solid var(--gray-light, #eee);
|
||||
}
|
||||
.collapsible {
|
||||
border-bottom: 1px solid var(--gray-light, #eee);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: var(--background, #fff);
|
||||
color: var(--gray-darkest, #282828);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 1em 0.5em;
|
||||
}
|
||||
button {
|
||||
background-color: var(--background, #fff);
|
||||
color: var(--gray-darkest, #282828);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 1em 0.5em;
|
||||
}
|
||||
|
||||
button[aria-expanded="true"] {
|
||||
border-bottom: 1px solid var(--gray-light, #eee);
|
||||
}
|
||||
button[aria-expanded='true'] {
|
||||
border-bottom: 1px solid var(--gray-light, #eee);
|
||||
}
|
||||
|
||||
button[aria-expanded="true"] .vert {
|
||||
display: none;
|
||||
}
|
||||
button[aria-expanded='true'] .vert {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button:focus svg {
|
||||
outline: 2px solid;
|
||||
}
|
||||
button:focus svg {
|
||||
outline: 2px solid;
|
||||
}
|
||||
|
||||
button [aria-expanded="true"] rect {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 0.7em;
|
||||
width: 0.7em;
|
||||
}
|
||||
</style>
|
||||
svg {
|
||||
height: 0.7em;
|
||||
width: 0.7em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -16,145 +16,143 @@
|
||||
</script>
|
||||
|
||||
<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'
|
||||
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"
|
||||
>
|
||||
<section class='w-full lg:w-max flex justify-between'>
|
||||
<a href='/' class='font-black tracking-tight text-xl text-black marck-script link-hover'
|
||||
>ClassQuiz</a
|
||||
<section class="w-full lg:w-max flex justify-between">
|
||||
<a href="/" class="font-black tracking-tight text-xl text-black marck-script link-hover"
|
||||
>ClassQuiz</a
|
||||
>
|
||||
|
||||
<button
|
||||
class='lg:hidden'
|
||||
id='open-menu'
|
||||
class="lg:hidden"
|
||||
id="open-menu"
|
||||
on:click={toggleMenu}
|
||||
class:hidden={!openMenu}
|
||||
aria-label='Open navbar'
|
||||
aria-label="Open navbar"
|
||||
>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='24'
|
||||
height='24'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
stroke-width='2'
|
||||
stroke-linecap='round'
|
||||
stroke-linejoin='round'
|
||||
display='block'
|
||||
id='TextAlignJustified'
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
display="block"
|
||||
id="TextAlignJustified"
|
||||
>
|
||||
<path d='M3 6h18M3 12h18M3 18h18' />
|
||||
<path d="M3 6h18M3 12h18M3 18h18" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Close menu -->
|
||||
<button
|
||||
class='hidden'
|
||||
id='close-menu'
|
||||
class="hidden"
|
||||
id="close-menu"
|
||||
class:hidden={!closeMenu}
|
||||
on:click={toggleMenu}
|
||||
aria-label='Close navbar'
|
||||
aria-label="Close navbar"
|
||||
>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='14'
|
||||
height='14'
|
||||
viewBox='0 0 24 24'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
stroke-width='3'
|
||||
stroke-linecap='round'
|
||||
stroke-linejoin='round'
|
||||
display='block'
|
||||
id='Cross'
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="3"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
display="block"
|
||||
id="Cross"
|
||||
>
|
||||
<path d='M20 20L4 4m16 0L4 20' />
|
||||
<path d="M20 20L4 4m16 0L4 20" />
|
||||
</svg>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<ul
|
||||
id='menu-items'
|
||||
class='lg:flex w-full flex-col lg:flex-row lg:pl-6'
|
||||
id="menu-items"
|
||||
class="lg:flex w-full flex-col lg:flex-row lg:pl-6"
|
||||
class:hidden={!menuItems}
|
||||
>
|
||||
{#if $signedIn}
|
||||
<li class='py-2'>
|
||||
<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
|
||||
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'>
|
||||
<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
|
||||
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'>
|
||||
<li class="py-2">
|
||||
<a
|
||||
class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
|
||||
href='/explore'>Explore</a
|
||||
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
|
||||
href="/explore">Explore</a
|
||||
>
|
||||
</li>
|
||||
<li class='py-2'>
|
||||
<li class="py-2">
|
||||
<a
|
||||
class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
|
||||
href='/search'>Search</a
|
||||
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
|
||||
href="/search">Search</a
|
||||
>
|
||||
<!--TODO: Add translation -->
|
||||
|
||||
</li>
|
||||
<li class='py-2'>
|
||||
<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
|
||||
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>
|
||||
{:else}
|
||||
<li class='py-2'>
|
||||
<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
|
||||
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'>
|
||||
<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
|
||||
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'>
|
||||
<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
|
||||
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'>
|
||||
<li class="py-2">
|
||||
<a
|
||||
class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
|
||||
href='/explore'>Explore</a
|
||||
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
|
||||
href="/explore">Explore</a
|
||||
>
|
||||
</li>
|
||||
<li class='py-2'>
|
||||
<li class="py-2">
|
||||
<a
|
||||
class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
|
||||
href='/search'>Search</a
|
||||
class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
|
||||
href="/search">Search</a
|
||||
>
|
||||
<!--TODO: Add translation -->
|
||||
|
||||
</li>
|
||||
<li class='py-2'>
|
||||
<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
|
||||
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'>
|
||||
<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
|
||||
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}
|
||||
|
||||
@@ -1,19 +1,3 @@
|
||||
/// <reference types="@sveltejs/kit" />
|
||||
|
||||
// See https://kit.svelte.dev/docs/types#the-app-namespace
|
||||
// for information about these interfaces
|
||||
declare namespace App {
|
||||
// interface Locals {}
|
||||
// interface Platform {}
|
||||
interface Session {
|
||||
authenticated: boolean;
|
||||
token: string | null;
|
||||
email: string | null;
|
||||
}
|
||||
|
||||
// interface Stuff {}
|
||||
}
|
||||
|
||||
export interface QuizData {
|
||||
title: string;
|
||||
description: string;
|
||||
|
||||
Reference in New Issue
Block a user