diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/Popup.svelte | 11 | ||||
| -rw-r--r-- | src/routes/+error.svelte | 25 |
2 files changed, 25 insertions, 11 deletions
diff --git a/src/lib/Popup.svelte b/src/lib/Popup.svelte index 6a40517d..badd4f2c 100644 --- a/src/lib/Popup.svelte +++ b/src/lib/Popup.svelte @@ -7,6 +7,7 @@ export let fullscreen = false; export let show = true; export let locked = false; + export let center = false; const handleClickOutside = (event: any) => { if (!locked && event.target.classList.contains('popup')) { @@ -21,7 +22,9 @@ {#if show} <div class={`popup ${fullscreen ? 'popup-fullscreen' : ''}`}> - <span class={card ? `card ${smallCard ? 'card-small' : ''}` : ''}> + <span + class={`${card ? `card ${smallCard ? 'card-small' : ''}` : ''} ${center ? 'centered' : ''}`} + > <slot /> </span> </div> @@ -31,4 +34,10 @@ .popup { z-index: 3; } + + .centered { + display: flex; + justify-content: center; + align-items: center; + } </style> diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte index e8b9d0f1..03e5bfc0 100644 --- a/src/routes/+error.svelte +++ b/src/routes/+error.svelte @@ -1,8 +1,9 @@ <script lang="ts"> - import { browser } from '$app/environment'; + import { page } from '$app/stores'; import { closest } from '$lib/Error/path'; + import Popup from '$lib/Popup.svelte'; - $: suggestion = closest(browser ? window.location.pathname : '...', [ + $: suggestion = closest($page.url.pathname, [ 'birthdays', 'completed', 'schedule', @@ -15,12 +16,16 @@ ]); </script> -<p>Page not found.</p> +<Popup> + <p style="text-align: center;"> + <a href={$page.url.pathname}>{$page.url.pathname}</a> not found + </p> -<blockquote> - Did you mean "<a - href={suggestion} - style={suggestion === '...' ? 'pointer-events: none; color: inherit;' : ''} - >{suggestion.charAt(0).toUpperCase() + suggestion.slice(1)}</a - >"? -</blockquote> + <blockquote style="margin: 0 0 0 1.5rem;"> + Did you mean "<a + href={suggestion} + style={suggestion === '...' ? 'pointer-events: none; color: inherit;' : ''} + >{suggestion.charAt(0).toUpperCase() + suggestion.slice(1)}</a + >"? + </blockquote> +</Popup> |