Skeleton UI rewrite

This commit is contained in:
Neshura 2023-09-13 16:30:24 +02:00
parent c14a11ebe4
commit 872645e1b0
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
19 changed files with 912 additions and 651 deletions
src/routes

View file

@ -1,18 +1,24 @@
<script lang="ts">
import { browser } from "$app/environment";
import Modal from "$lib/components/Modal.svelte";
import Button from "$lib/components/Button.svelte";
import AuthTokenStore from "$lib/stores/AuthTokenStore";
import { fade } from "svelte/transition";
import { getModalStore } from "@skeletonlabs/skeleton";
import { fade, slide } from "svelte/transition";
export let showSettings: boolean;
const modalStore = getModalStore();
let showAuthSaved = false;
let showPlaceholder = true;
const saveAuth = () => {
showAuthSaved = true;
showPlaceholder = false;
setTimeout(function() {
showAuthSaved = false;
}, 2000);
setTimeout(function() {
showPlaceholder = true;
}, 195);
}, 1000);
document.cookie = "authToken=" + authToken;
$AuthTokenStore = authToken;
}
@ -23,55 +29,38 @@
$AuthTokenStore = authToken;
}
const toggleSettings = () => {
showSettings = !showSettings;
}
const handleSubmit = () => {
console.log("submitted ", gameGroupSettings);
showSettings = false;
document.cookie = "authToken=" + authToken;
modalStore.close();
}
let gameGroupSettings: [] = [];
const formInput = "bg-surface-200-700-token focus:brightness-105 hover:brightness-105 border-token border-surface-400-500-token rounded-token px-3 w-[6rem]"
</script>
<Modal showModal={showSettings} on:click={toggleSettings}>
<h3>Settings</h3>
<div class="settings-modal">
<div class="card p-4 w-modal-slim shadow-xl space-y-4 text-center rounded-xl">
<h2>Settings</h2>
<div class="p-4 space-y-4">
<form on:submit|preventDefault={handleSubmit} class="modal-form">
<label for="authTokenInput" class="label my-2 gap-1 grid grid-cols-[20%,30%,30%,10%,10%]">
<span></span>
<span>Auth Token:</span>
<input class={formInput} id="authTokenInput" bind:value={authToken} on:input={saveAuth} type="text">
{#if showAuthSaved}
<span transition:fade={{duration: 200}}>Saved!</span>
{/if}
<form on:submit|preventDefault={handleSubmit}>
<label for="authTokenInput">Auth Token:</label>
<input id="authTokenInput" bind:value={authToken} on:input={saveAuth} type="text">
{#if showAuthSaved}
<label for="authTokenInput" in:fade={{duration: 200}} out:fade={{duration: 200}}>Saved!</label>
{/if}
</label>
<br>
<br>
<!-- <b>Show Game Groups:</b><br>
<input type="checkbox" bind:group={gameGroupSettings} value="b">Group B<br>
<input type="checkbox" bind:group={gameGroupSettings} value="-">Ungrouped<br> -->
<div class="settings-modal-save">
<button>Save</button>
</div>
<Button text="Save"/>
</form>
</div>
</Modal>
<style>
.settings-modal {
text-align: left;
}
.settings-modal input {
margin-left: 1rem;
}
.settings-modal-save {
text-align: center;
}
</style>
</div>