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

♻️ Moved buttons into own components

Browse Source
This commit is contained in:
Mawoka
2023-01-27 22:25:57 +01:00
parent 0083b1552a
commit 2d05ee26bd
6 changed files with 102 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/buttons/brown.svelte
+33
View File
@@ -0,0 +1,33 @@
<!--
- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
-->
<script lang="ts">
export let disabled = false;
export let flex = false;
export let href: undefined | string = undefined;
</script>
{#if href}
<a
{href}
class="text-black hover:bg-opacity-80 w-full px-4 py-2 leading-5 text-black transition-all duration-200 transform bg-[#B07156] rounded text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 outline-none"
on:click
class:flex
class:justify-center={flex}
>
<slot />
</a>
{:else}
<button
{disabled}
class="text-black hover:opacity-80 w-full px-4 py-2 leading-5 text-black transition-all duration-200 transform bg-[#B07156] rounded text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 outline-none"
on:click
class:flex
class:justify-center={flex}
>
<slot />
</button>
{/if}
frontend/src/lib/components/buttons/gray.svelte
+28
View File
@@ -0,0 +1,28 @@
<script lang="ts">
export let disabled = false;
export let flex = false;
export let href: undefined | string = undefined;
</script>
{#if href}
<a
{href}
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"
on:click
class:flex
class:justify-center={flex}
>
<slot />
</a>
{: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"
on:click
class:flex
class:justify-center={flex}
>
<slot />
</button>
{/if}
frontend/src/lib/dashboard/main_slider.svelte
+10 -14
View File
@@ -16,6 +16,7 @@
import { onMount } from 'svelte';
import viewport from './useViewportAction.js';
import Spinner from '$lib/Spinner.svelte';
import GrayButton from '$lib/components/buttons/gray.svelte';
let copy_toast_open = false;
let start_game = null;
@@ -224,24 +225,21 @@
</div>
<div class="flex justify-center pb-10 pt-8">
<div class="grid grid-cols-2 gap-3 w-1/3">
<a
href="/edit?quiz_id={quiz.id}"
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-300 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-600"
>{$t('words.edit')}</a
<GrayButton href="/edit?quiz_id={quiz.id}"
>{$t('words.edit')}</GrayButton
>
<button
<GrayButton
on:click={() => {
start_game = quiz.id;
}}
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-300 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-600"
>
{$t('words.start')}
</button>
<button
</GrayButton>
<GrayButton
on:click={() => {
deleteQuiz(quiz.id);
}}
class="py-2 w-full flex justify-center 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"
flex={true}
>
<!-- heroicons/trash -->
<svg
@@ -258,10 +256,8 @@
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
</button>
<a
href="/api/v1/eximport/{quiz.id}"
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"
</GrayButton>
<GrayButton href="/api/v1/eximport/{quiz.id}" flex={true}
><!-- heroicons/download -->
<svg
class="w-5 h-5"
@@ -277,7 +273,7 @@
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
/>
</svg>
</a>
</GrayButton>
</div>
</div>
<div class="flex justify-center">
frontend/src/routes/account/settings/+page.svelte
+11 -12
View File
@@ -9,6 +9,7 @@
import { UAParser } from 'ua-parser-js';
import Spinner from '$lib/Spinner.svelte';
import { onMount } from 'svelte';
import BrownButton from '$lib/components/buttons/brown.svelte';
const { t } = getLocalization();
@@ -176,11 +177,11 @@
</p>
</div>
<div class="p-4 flex justify-center">
<a
href="/account/settings/security"
class="text-lg rounded-lg bg-[#B07156] p-2 hover:bg-opacity-80 transition h-fit m-auto"
>Security-Settings</a
>
<div class="m-auto">
<BrownButton href="/account/settings/security"
>Security-Settings
</BrownButton>
</div>
</div>
</div>
<div>
@@ -206,13 +207,11 @@
bind:value={changePasswordData.newPasswordConfirm}
/></label
>
<button
class="border-2 px-2 py-1 rounded-md border-black text-slate-100 hover:bg-amber-700 hover:text-indigo-100 transition duration-75 disabled:cursor-not-allowed disabled:opacity-50"
disabled={!passwordChangeDataValid}
type="submit"
>
{$t('settings_page.change_password_submit')}
</button>
<div>
<BrownButton disabled={!passwordChangeDataValid} type="submit">
{$t('settings_page.change_password_submit')}
</BrownButton>
</div>
</form>
<div>
<button on:click={add_api_key}>Add API-Key</button>
frontend/src/routes/account/settings/security/+page.svelte
+14 -23
View File
@@ -9,6 +9,7 @@
import { startRegistration } from '@simplewebauthn/browser';
import TotpSetup from './totp_setup.svelte';
import BackupCodes from './backup_codes.svelte';
import BrownButton from '$lib/components/buttons/brown.svelte';
let user_data: object | undefined;
let security_keys: Array<{ id: number }> | undefined;
@@ -102,11 +103,9 @@
<div class="h-full w-full border-r-2 border-black">
<h2 class="text-center text-2xl">Backup-Code</h2>
<div class="flex h-full w-full justify-center">
<button
class="m-auto text-lg rounded-lg bg-[#B07156] p-4 hover:bg-opacity-80 transition"
on:click={get_backup_code}
>Get Backup-Codes
</button>
<div class="m-auto">
<BrownButton on:click={get_backup_code}>Get Backup-Codes</BrownButton>
</div>
</div>
</div>
<div class="h-full w-full">
@@ -171,11 +170,9 @@
{/if}
</div>
<div class="flex justify-center">
<button
on:click={add_security_key}
class="m-auto rounded-lg bg-[#B07156] p-2 hover:bg-opacity-80 transition m-2"
>Add Security-Key</button
>
<div class="m-auto">
<BrownButton on:click={add_security_key}>Add Security-Key</BrownButton>
</div>
</div>
<div class="flex justify-center">
<ul class="list-disc block">
@@ -203,19 +200,13 @@
</div>
<div class="flex justify-center">
{#if totp_activated}
<button
on:click={disable_totp}
class="m-auto rounded-lg bg-[#B07156] p-2 hover:bg-opacity-80 transition m-2"
>Disable Totp</button
>
{:else}
<button
on:click={enable_totp}
class="m-auto rounded-lg bg-[#B07156] p-2 hover:bg-opacity-80 transition m-2"
>Enable Totp</button
>
{/if}
<div class="m-auto">
{#if totp_activated}
<BrownButton on:click={disable_totp}>Disable Totp</BrownButton>
{:else}
<BrownButton on:click={enable_totp}>Enable Totp</BrownButton>
{/if}
</div>
</div>
</div>
</div>
frontend/src/routes/dashboard/+page.svelte
+6 -20
View File
@@ -10,6 +10,7 @@
import { navbarVisible, signedIn } from '$lib/stores';
import Spinner from '$lib/Spinner.svelte';
import Fuse from 'fuse.js';
import BrownButton from '$lib/components/buttons/brown.svelte';
interface QuizData {
id: string;
@@ -100,27 +101,12 @@
Primary
</button>-->
<div class="w-full grid grid-cols-4 gap-2">
<a
href="/create"
class="px-4 py-2 leading-5 text-black dark:text-white transition-colors duration-200 transform bg-[#B07156] rounded text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-600 text-white"
>{$t('words.create')}
</a>
<a
href="/import"
class="px-4 py-2 leading-5 text-black dark:text-white transition-colors duration-200 transform bg-[#B07156] rounded text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-600 text-white"
>{$t('words.import')}
</a>
<a
href="/api/v1/users/logout"
class="px-4 py-2 leading-5 text-black dark:text-white transition-colors duration-200 transform bg-[#B07156] rounded text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-600 text-white"
>{$t('words.logout')}
</a>
<a
href="/account/settings"
class="px-4 py-2 leading-5 text-black dark:text-white transition-colors duration-200 transform bg-[#B07156] rounded text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-600 text-white"
>
<BrownButton href="/create">{$t('words.create')}</BrownButton>
<BrownButton href="/import">{$t('words.import')}</BrownButton>
<BrownButton href="/api/v1/users/logout">{$t('words.logout')}</BrownButton>
<BrownButton href="/account/settings">
{$t('words.settings')}
</a>
</BrownButton>
</div>
{#if quizzes.length !== 0}
{#await import('$lib/dashboard/main_slider.svelte')}