Skeleton UI rewrite
This commit is contained in:
parent
c14a11ebe4
commit
872645e1b0
19 changed files with 912 additions and 651 deletions
src/routes
|
@ -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>
|
||||
|
|
Reference in a new issue