diff options
| author | Fuwn <[email protected]> | 2024-10-09 00:41:20 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-10-09 00:41:43 -0700 |
| commit | 998b63a35256ac985a5a2714dd1ca451af4dfd8a (patch) | |
| tree | 50796121a9d5ab0330fdc5d7e098bda2860d9726 /src/lib/Layout/Popup.svelte | |
| parent | feat(graphql): add badgeCount field (diff) | |
| download | due.moe-998b63a35256ac985a5a2714dd1ca451af4dfd8a.tar.xz due.moe-998b63a35256ac985a5a2714dd1ca451af4dfd8a.zip | |
chore(prettier): use spaces instead of tabs
Diffstat (limited to 'src/lib/Layout/Popup.svelte')
| -rw-r--r-- | src/lib/Layout/Popup.svelte | 98 |
1 files changed, 49 insertions, 49 deletions
diff --git a/src/lib/Layout/Popup.svelte b/src/lib/Layout/Popup.svelte index be55adf0..b82e86c2 100644 --- a/src/lib/Layout/Popup.svelte +++ b/src/lib/Layout/Popup.svelte @@ -1,59 +1,59 @@ <script lang="ts"> - import { browser } from '$app/environment'; - import { onMount } from 'svelte'; - - export let onLeave = () => { - return; - }; - export let card = true; - export let smallCard = false; - 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')) { - show = false; - - onLeave(); - } - }; - - onMount(() => { - if (browser) document.body.style.overflow = 'auto'; - }); - - $: { - if (browser) { - document.body.style.overflow = 'auto'; - - if (show) document.body.style.overflow = 'hidden'; - else document.body.style.overflow = 'auto'; - } - } + import { browser } from '$app/environment'; + import { onMount } from 'svelte'; + + export let onLeave = () => { + return; + }; + export let card = true; + export let smallCard = false; + 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')) { + show = false; + + onLeave(); + } + }; + + onMount(() => { + if (browser) document.body.style.overflow = 'auto'; + }); + + $: { + if (browser) { + document.body.style.overflow = 'auto'; + + if (show) document.body.style.overflow = 'hidden'; + else document.body.style.overflow = 'auto'; + } + } </script> <svelte:window on:click={handleClickOutside} /> {#if show} - <div class={`popup ${fullscreen ? 'popup-fullscreen' : ''}`}> - <span - class={`${card ? `card ${smallCard ? 'card-small' : ''}` : ''} ${center ? 'centered' : ''}`} - > - <slot /> - </span> - </div> + <div class={`popup ${fullscreen ? 'popup-fullscreen' : ''}`}> + <span + class={`${card ? `card ${smallCard ? 'card-small' : ''}` : ''} ${center ? 'centered' : ''}`} + > + <slot /> + </span> + </div> {/if} <style> - .popup { - z-index: 3; - } - - .centered { - display: flex; - justify-content: center; - align-items: center; - } + .popup { + z-index: 3; + } + + .centered { + display: flex; + justify-content: center; + align-items: center; + } </style> |