BUGFIX: we cannot dynamically create classes

This commit is contained in:
Jeroen De Meerleer 2023-08-17 17:31:20 +02:00
parent 561715e039
commit 4802b55124
Signed by: JeroenED
GPG Key ID: 28CCCB8F62BFADD6
4 changed files with 33 additions and 16 deletions

View File

@ -2,7 +2,7 @@
// The ordering of these imports is critical to your app working properly // The ordering of these imports is critical to your app working properly
import '@skeletonlabs/skeleton/themes/theme-skeleton.css'; import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering // If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
import '@skeletonlabs/skeleton/styles/all.css'; import '@skeletonlabs/skeleton/styles/skeleton.css';
import '$lib/scss/icons.scss' import '$lib/scss/icons.scss'
// Most of your app wide CSS should be put in this file // Most of your app wide CSS should be put in this file
import '../app.postcss'; import '../app.postcss';
@ -27,10 +27,23 @@
globalvars = value; globalvars = value;
}); });
</script> </script>
<style lang="scss">
.alert {
&.error {
@apply variant-filled-error;
}
&.warning {
@apply variant-filled-warning;
}
&.success {
@apply variant-filled-success;
}
}
</style>
<svelte:head>{@html `<script>${autoModeWatcher.toString()} autoModeWatcher();</script>`}</svelte:head> <svelte:head>{@html `<script>${autoModeWatcher.toString()} autoModeWatcher();</script>`}</svelte:head>
{#if typeof globalvars.user !== 'undefined' } {#if typeof globalvars.user !== 'undefined' }
{#each alertsvar as alert, i} {#each alertsvar as alert, i}
<aside class="alert variant-filled-{alert.class}"> <aside class="alert {alert.class}">
<!-- Icon --> <!-- Icon -->
<div><i class="text-2xl icon icon-exclamation-triangle"></i></div> <div><i class="text-2xl icon icon-exclamation-triangle"></i></div>
<!-- Message --> <!-- Message -->

View File

@ -1,6 +1,4 @@
<script> <script>
import { goto } from '$app/navigation';
import { onMount } from 'svelte';
import {globals} from "$lib/stores.js"; import {globals} from "$lib/stores.js";
let globalvars; let globalvars;
@ -8,15 +6,11 @@
globals.subscribe(value => { globals.subscribe(value => {
globalvars = value; globalvars = value;
}); });
onMount(async () => {
if(typeof globalvars.user === 'undefined') {
goto("/account/login");
}
});
</script> </script>
{#if typeof globalvars.user !== 'undefined'} {#if typeof globalvars.user !== 'undefined'}
<h1>Welcome {globalvars.user.name}</h1> <h1>Welcome {globalvars.user.name}</h1>
{:else}
<h1 class="h1">Blackbird Chess</h1>
<a href="/account/login" class="anchor">Go to login page</a>
{/if} {/if}

View File

@ -1,9 +1,9 @@
<div class="container h-full mx-auto flex justify-center items-center flex-col"> <div class="container h-full mx-auto flex justify-center items-center flex-col">
<h1 class="my-3">Blackbird Chess</h1> <h1 class="my-3 h1">Blackbird Chess</h1>
{#if typeof globalvars.user == 'undefined' } {#if typeof globalvars.user == 'undefined' }
{#each alertsvar as alert, i} {#each alertsvar as alert, i}
<aside class="alert variant-filled-{alert.class} mb-3"> <aside class="alert {alert.class} mb-3">
<!-- Icon --> <!-- Icon -->
<div><i class="text-2xl icon icon-exclamation-triangle"></i></div> <div><i class="text-2xl icon icon-exclamation-triangle"></i></div>
<!-- Message --> <!-- Message -->
@ -22,7 +22,17 @@
</div> </div>
<style lang="scss"> <style lang="scss">
.alert {
&.error {
@apply variant-filled-error;
}
&.warning {
@apply variant-filled-warning;
}
&.success {
@apply variant-filled-success;
}
}
</style> </style>
<script lang="js"> <script lang="js">

View File

@ -14,10 +14,10 @@
<div class="flex justify-between"> <div class="flex justify-between">
{#if globalvars.server.caps.register } {#if globalvars.server.caps.register }
<a href="/account/register">Register</a> <a href="/account/register" class="anchor">Register</a>
{/if} {/if}
{#if globalvars.server.caps.reset } {#if globalvars.server.caps.reset }
<a href="/account/reset">Reset your password</a> <a href="/account/reset" class="anchor">Reset your password</a>
{/if} {/if}
</div> </div>