aboutsummaryrefslogtreecommitdiff
path: root/src/lib/Layout
diff options
context:
space:
mode:
authorFuwn <[email protected]>2024-10-09 00:41:20 -0700
committerFuwn <[email protected]>2024-10-09 00:41:43 -0700
commit998b63a35256ac985a5a2714dd1ca451af4dfd8a (patch)
tree50796121a9d5ab0330fdc5d7e098bda2860d9726 /src/lib/Layout
parentfeat(graphql): add badgeCount field (diff)
downloaddue.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.svelte232
-rw-r--r--src/lib/Layout/NumberTicker.svelte46
-rw-r--r--src/lib/Layout/Popup.svelte98
-rw-r--r--src/lib/Layout/TextTransition.svelte36
-rw-r--r--src/lib/Layout/Username.svelte2
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>