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 | |
| 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')
| -rw-r--r-- | src/lib/Layout/Dropdown.svelte | 232 | ||||
| -rw-r--r-- | src/lib/Layout/NumberTicker.svelte | 46 | ||||
| -rw-r--r-- | src/lib/Layout/Popup.svelte | 98 | ||||
| -rw-r--r-- | src/lib/Layout/TextTransition.svelte | 36 | ||||
| -rw-r--r-- | src/lib/Layout/Username.svelte | 2 |
5 files changed, 207 insertions, 207 deletions
diff --git a/src/lib/Layout/Dropdown.svelte b/src/lib/Layout/Dropdown.svelte index dd48af45..fb270dfe 100644 --- a/src/lib/Layout/Dropdown.svelte +++ b/src/lib/Layout/Dropdown.svelte @@ -1,127 +1,127 @@ <script lang="ts"> - interface Item { - name: string; - url: string; - onClick?: () => void; - preventDefault?: boolean; - } - - export let items: Item[] = []; - export let title: string | undefined = undefined; - export let header = true; - export let center = false; - - let open = false; - - const handleClickOutside = (event: any) => { - if (!event.target.closest('.dropdown')) open = false; - }; + interface Item { + name: string; + url: string; + onClick?: () => void; + preventDefault?: boolean; + } + + export let items: Item[] = []; + export let title: string | undefined = undefined; + export let header = true; + export let center = false; + + let open = false; + + const handleClickOutside = (event: any) => { + if (!event.target.closest('.dropdown')) open = false; + }; </script> <svelte:window on:click={handleClickOutside} /> <div - class="dropdown" - id="dropdown" - style={`--dropdown-left: ${center ? '50%' : 'unset'}; --dropdown-transform: ${ - center ? 'translateX(-50%)' : 'unset' - };`} + class="dropdown" + id="dropdown" + style={`--dropdown-left: ${center ? '50%' : 'unset'}; --dropdown-transform: ${ + center ? 'translateX(-50%)' : 'unset' + };`} > - <span - class={`${header ? 'header-item' : ''} dropdown-toggle`} - id="dropdown-toggle" - on:click|preventDefault={() => (open = !open)} - on:keydown={() => {}} - role="button" - tabindex="0" - > - {#if title} - {title} - {:else} - <slot name="title" /> - {/if} - </span> - - <div class={`dropdown-content card card-small ${open ? 'dropdown-open' : ''}`}> - {#each items as item} - <a - href={item.url} - class="header-item" - on:click={(e) => { - if (item.preventDefault) e.preventDefault(); - if (item.onClick) item.onClick(); - }} - > - {item.name} - </a> - {/each} - </div> + <span + class={`${header ? 'header-item' : ''} dropdown-toggle`} + id="dropdown-toggle" + on:click|preventDefault={() => (open = !open)} + on:keydown={() => {}} + role="button" + tabindex="0" + > + {#if title} + {title} + {:else} + <slot name="title" /> + {/if} + </span> + + <div class={`dropdown-content card card-small ${open ? 'dropdown-open' : ''}`}> + {#each items as item} + <a + href={item.url} + class="header-item" + on:click={(e) => { + if (item.preventDefault) e.preventDefault(); + if (item.onClick) item.onClick(); + }} + > + {item.name} + </a> + {/each} + </div> </div> <style lang="scss"> - a { - color: var(--base06); - } - - .header-item { - margin: 0 0.5rem; - } - - .header-item:hover { - text-decoration: none; - } - - .header-item:active { - outline: none; - } - - .dropdown { - position: relative; - display: inline-block; - } - - .dropdown-content { - display: block; - position: absolute; - min-width: max-content; - padding: 0.5em 0; - opacity: 0; - transform: translateY(-20px); - visibility: hidden; - $delay: 0.25s; - transition: opacity $delay ease, transform $delay ease, visibility 0s linear $delay; - left: var(--dropdown-left); - transform: var(--dropdown-transform); - z-index: 1; - } - - .dropdown-open { - opacity: 1; - transform: translateY(0); - visibility: visible; - transition-delay: 0s, 0s, 0s; - left: var(--dropdown-left); - transform: var(--dropdown-transform); - } - - .dropdown:hover .dropdown-content { - opacity: 1; - transform: translateY(0); - visibility: visible; - transition-delay: 0s, 0s, 0s; - left: var(--dropdown-left); - transform: var(--dropdown-transform); - } - - .dropdown-content a { - padding: 0.5em 0.75em; - text-decoration: none; - display: block; - } - - .dropdown-content a:hover { - border-radius: 8px; - backdrop-filter: blur(160px); - background-color: var(--base01); - } + a { + color: var(--base06); + } + + .header-item { + margin: 0 0.5rem; + } + + .header-item:hover { + text-decoration: none; + } + + .header-item:active { + outline: none; + } + + .dropdown { + position: relative; + display: inline-block; + } + + .dropdown-content { + display: block; + position: absolute; + min-width: max-content; + padding: 0.5em 0; + opacity: 0; + transform: translateY(-20px); + visibility: hidden; + $delay: 0.25s; + transition: opacity $delay ease, transform $delay ease, visibility 0s linear $delay; + left: var(--dropdown-left); + transform: var(--dropdown-transform); + z-index: 1; + } + + .dropdown-open { + opacity: 1; + transform: translateY(0); + visibility: visible; + transition-delay: 0s, 0s, 0s; + left: var(--dropdown-left); + transform: var(--dropdown-transform); + } + + .dropdown:hover .dropdown-content { + opacity: 1; + transform: translateY(0); + visibility: visible; + transition-delay: 0s, 0s, 0s; + left: var(--dropdown-left); + transform: var(--dropdown-transform); + } + + .dropdown-content a { + padding: 0.5em 0.75em; + text-decoration: none; + display: block; + } + + .dropdown-content a:hover { + border-radius: 8px; + backdrop-filter: blur(160px); + background-color: var(--base01); + } </style> diff --git a/src/lib/Layout/NumberTicker.svelte b/src/lib/Layout/NumberTicker.svelte index 1d09c3ef..b5e2f49c 100644 --- a/src/lib/Layout/NumberTicker.svelte +++ b/src/lib/Layout/NumberTicker.svelte @@ -1,36 +1,36 @@ <script> - import { tweened } from 'svelte/motion'; - import { cubicOut } from 'svelte/easing'; + import { tweened } from 'svelte/motion'; + import { cubicOut } from 'svelte/easing'; - export let start = 0; - export let end = 100; - export let duration = 2000; - export let delay = 0; + export let start = 0; + export let end = 100; + export let duration = 2000; + export let delay = 0; - const count = tweened(start, { - duration: duration, - easing: cubicOut, - delay: delay - }); + const count = tweened(start, { + duration: duration, + easing: cubicOut, + delay: delay + }); - $: { - count.set(end); - } + $: { + count.set(end); + } </script> <span class="counter" class:visible={$count !== start}> - {Math.round($count)} + {Math.round($count)} </span> <style lang="scss"> - .counter { - $duration: 0.2s; + .counter { + $duration: 0.2s; - opacity: 0; - transition: opacity $duration ease-out, transform $duration ease-out; - } + opacity: 0; + transition: opacity $duration ease-out, transform $duration ease-out; + } - .counter.visible { - opacity: 1; - } + .counter.visible { + opacity: 1; + } </style> 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> diff --git a/src/lib/Layout/TextTransition.svelte b/src/lib/Layout/TextTransition.svelte index bd7814de..35cfe1ea 100644 --- a/src/lib/Layout/TextTransition.svelte +++ b/src/lib/Layout/TextTransition.svelte @@ -1,28 +1,28 @@ <script> - import { tweened } from 'svelte/motion'; - import { cubicOut } from 'svelte/easing'; + import { tweened } from 'svelte/motion'; + import { cubicOut } from 'svelte/easing'; - export let text = ''; - export let opacityTransitionDuration = 50; - export let blurTransitionDuration = opacityTransitionDuration; - export let easing = cubicOut; + export let text = ''; + export let opacityTransitionDuration = 50; + export let blurTransitionDuration = opacityTransitionDuration; + export let easing = cubicOut; - let previousValue = ''; - let opacity = tweened(1, { duration: opacityTransitionDuration, easing }); - let blur = tweened(0, { duration: blurTransitionDuration, easing }); + let previousValue = ''; + let opacity = tweened(1, { duration: opacityTransitionDuration, easing }); + let blur = tweened(0, { duration: blurTransitionDuration, easing }); - $: { - if (text !== previousValue) - Promise.all([opacity.set(0), blur.set(10)]).then(() => { - previousValue = text; + $: { + if (text !== previousValue) + Promise.all([opacity.set(0), blur.set(10)]).then(() => { + previousValue = text; - Promise.all([opacity.set(1), blur.set(0)]); - }); - } + Promise.all([opacity.set(1), blur.set(0)]); + }); + } </script> <span - style="opacity: {$opacity}; filter: blur({$blur}px); transition: opacity {opacityTransitionDuration}ms, filter {blurTransitionDuration}ms;" + style="opacity: {$opacity}; filter: blur({$blur}px); transition: opacity {opacityTransitionDuration}ms, filter {blurTransitionDuration}ms;" > - {previousValue} + {previousValue} </span> diff --git a/src/lib/Layout/Username.svelte b/src/lib/Layout/Username.svelte index 23c9de8f..8b89b708 100644 --- a/src/lib/Layout/Username.svelte +++ b/src/lib/Layout/Username.svelte @@ -1,5 +1,5 @@ <script lang="ts"> - export let username: string; + export let username: string; </script> <a href={`https://anilist.co/user/${username}/`}>@{username}</a> |