Add MsgBox Lib & Try out custom error pages

This commit is contained in:
Sangelo 2023-06-08 11:07:37 +02:00
parent d61a05c0de
commit 285287a9cb
5 changed files with 86 additions and 1 deletions

View file

@ -4,7 +4,7 @@
/* Write your global styles here, in SCSS syntax. Variables and mixins from the src/variables.scss file are available here without importing */ /* Write your global styles here, in SCSS syntax. Variables and mixins from the src/variables.scss file are available here without importing */
body { h1, h2, body {
font-family: 'IBM Plex Mono', monospace; font-family: 'IBM Plex Mono', monospace;
// background-color: #ffffff; // background-color: #ffffff;
// color: #000000; // color: #000000;

View file

@ -0,0 +1 @@
<!-- WIP -->

View file

@ -0,0 +1,65 @@
<script>
import { onMount } from 'svelte';
export let type, message, prefix;
const colors = {
info: ['rgba(0, 123, 255, 0.2)', '#004690', '#007bff', '#b7d7ff'],
warning: ['rgba(255, 193, 7, 0.2)', '#644c03', '#ffc107', '#ffd067'],
error: ['rgba(220, 53, 69, 0.2)', '#691a22', '#dc3545', '#ff818d'],
default: ['rgba(0, 0, 0, 0.1)', '#333', '#929292', '#d3d3d3']
};
let [backgroundColor, fontColor, borderColor, darkFontColor] = colors[type] || colors.default;
prefix = prefix || (type === 'info' ? 'Info:' : type === 'warning' ? 'Warning:' : type === 'error' ? 'Error:' : '');
let bgStyle = `background-color: ${backgroundColor}; color: ${fontColor}; border-color: ${borderColor}`;
const changeColorScheme = (event) => {
fontColor = event.matches ? darkFontColor : colors[type][1];
bgStyle = `background-color: ${backgroundColor}; color: ${fontColor}; border-color: ${borderColor}`;
};
onMount(() => {
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
mediaQuery.addEventListener('change', changeColorScheme);
changeColorScheme(mediaQuery);
});
</script>
<div class="msg-box {type}" style="{bgStyle}">
<p>
{#if prefix}<b>{prefix}</b>{/if}
{@html message}
</p>
</div>
<style>
.msg-box {
display: inline-block;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
font-weight: normal;
border-width: 1px;
border-style: solid;
}
.msg-box p {
margin: 0;
line-height: 1.4;
}
.msg-box.bright {
background-color: var(--backgroundColor);
color: var(--fontColor);
border-color: var(--borderColor);
}
@media (prefers-color-scheme: dark) {
.msg-box.bright {
color: var(--darkFontColor);
}
}
</style>

6
src/routes/+error.svelte Normal file
View file

@ -0,0 +1,6 @@
<script>
import { page } from '$app/stores';
</script>
<h1>{$page.status}: {$page.error.message}</h1>
<p>AHDJIUASHDILAUHSDIUSHD ERRORRRRS</p>

View file

@ -0,0 +1,13 @@
<script>
import Modal from "$lib/modules/Modal.svelte";
let showModal = false;
const openModal = () => {
showModal = true;
};
</script>
<button on:click={openModal}>Open Modal</button>
{#if showModal}
<Modal title="Modal Title" msg="Modal Message" submit="https://example.com" bind:isOpen={showModal} />
{/if}