Animation for Cookie Saving
This commit is contained in:
parent
c15f96916e
commit
4fe42ca663
1 changed files with 13 additions and 3 deletions
|
@ -1,13 +1,22 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { browser } from "$app/environment";
|
import { browser } from "$app/environment";
|
||||||
import Modal from "$lib/components/Modal.svelte";
|
import Modal from "$lib/components/Modal.svelte";
|
||||||
|
import { fade } from "svelte/transition";
|
||||||
|
|
||||||
export let showSettings: boolean;
|
export let showSettings: boolean;
|
||||||
|
|
||||||
let showAuthSaved = false;
|
let showAuthSaved = false;
|
||||||
|
let showFiller = true;
|
||||||
|
|
||||||
const saveAuth = () => {
|
const saveAuth = () => {
|
||||||
showAuthSaved = true;
|
showAuthSaved = true;
|
||||||
|
showFiller = false;
|
||||||
|
setTimeout(function() {
|
||||||
|
showAuthSaved = false;
|
||||||
|
setTimeout(function() {
|
||||||
|
showFiller = true;
|
||||||
|
}, 200);
|
||||||
|
}, 2000);
|
||||||
document.cookie = "authToken=" + authToken;
|
document.cookie = "authToken=" + authToken;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -41,10 +50,11 @@
|
||||||
<label for="authTokenInput">Auth Token:</label>
|
<label for="authTokenInput">Auth Token:</label>
|
||||||
<input id="authTokenInput" bind:value={authToken} on:input={saveAuth} type="text">
|
<input id="authTokenInput" bind:value={authToken} on:input={saveAuth} type="text">
|
||||||
{#if showAuthSaved}
|
{#if showAuthSaved}
|
||||||
<p>Saved!</p>
|
<div in:fade={{duration: 200}} out:fade={{duration: 200}}>Saved!</div>
|
||||||
|
{:else if showFiller}
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
{/if}
|
{/if}
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<b>Show Game Groups:</b><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="b">Group B<br>
|
||||||
<input type="checkbox" bind:group={gameGroupSettings} value="-">Ungrouped<br>
|
<input type="checkbox" bind:group={gameGroupSettings} value="-">Ungrouped<br>
|
||||||
|
|
Reference in a new issue