Add MsgBox Lib & Try out custom error pages
This commit is contained in:
parent
d61a05c0de
commit
285287a9cb
5 changed files with 86 additions and 1 deletions
|
@ -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;
|
||||||
|
|
1
src/lib/modules/Modal.svelte
Normal file
1
src/lib/modules/Modal.svelte
Normal file
|
@ -0,0 +1 @@
|
||||||
|
<!-- WIP -->
|
65
src/lib/modules/MsgBox.svelte
Normal file
65
src/lib/modules/MsgBox.svelte
Normal 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
6
src/routes/+error.svelte
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
<script>
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<h1>{$page.status}: {$page.error.message}</h1>
|
||||||
|
<p>AHDJIUASHDILAUHSDIUSHD ERRORRRRS</p>
|
13
src/routes/examples/+page.svelte
Normal file
13
src/routes/examples/+page.svelte
Normal 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}
|
||||||
|
|
Loading…
Reference in a new issue