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/routes/+page.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/routes/+page.svelte')
| -rw-r--r-- | src/routes/+page.svelte | 212 |
1 files changed, 106 insertions, 106 deletions
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 3f130f96..653c3836 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,25 +1,25 @@ <script lang="ts"> - import { onDestroy, onMount } from 'svelte'; - import MangaListTemplate from '$lib/List/Manga/MangaListTemplate.svelte'; - import UpcomingAnimeList from '$lib/List/Anime/UpcomingAnimeList.svelte'; - import userIdentity from '$stores/identity.js'; - import settings from '$stores/settings'; - import ListTitle from '$lib/List/ListTitle.svelte'; - import HeadTitle from '$lib/Home/HeadTitle.svelte'; - import LastActivity from '$lib/Home/LastActivity.svelte'; - import { createHeightObserver } from '$lib/Utility/html.js'; - import Skeleton from '$lib/Loading/Skeleton.svelte'; - import locale from '$stores/locale.js'; - import Landing from '$lib/Landing.svelte'; - import IndexColumn from '$lib/List/Anime/DueIndexColumn.svelte'; - - export let data; - - let heightObserver: NodeJS.Timeout; - - onMount(() => (heightObserver = setInterval(() => createHeightObserver(), 0))); - - onDestroy(() => clearInterval(heightObserver)); + import { onDestroy, onMount } from 'svelte'; + import MangaListTemplate from '$lib/List/Manga/MangaListTemplate.svelte'; + import UpcomingAnimeList from '$lib/List/Anime/UpcomingAnimeList.svelte'; + import userIdentity from '$stores/identity.js'; + import settings from '$stores/settings'; + import ListTitle from '$lib/List/ListTitle.svelte'; + import HeadTitle from '$lib/Home/HeadTitle.svelte'; + import LastActivity from '$lib/Home/LastActivity.svelte'; + import { createHeightObserver } from '$lib/Utility/html.js'; + import Skeleton from '$lib/Loading/Skeleton.svelte'; + import locale from '$stores/locale.js'; + import Landing from '$lib/Landing.svelte'; + import IndexColumn from '$lib/List/Anime/DueIndexColumn.svelte'; + + export let data; + + let heightObserver: NodeJS.Timeout; + + onMount(() => (heightObserver = setInterval(() => createHeightObserver(), 0))); + + onDestroy(() => clearInterval(heightObserver)); </script> <HeadTitle /> @@ -27,97 +27,97 @@ <LastActivity user={data.user} /> {#if data.user === undefined} - <div class="card">Please log in to view due media.</div> + <div class="card">Please log in to view due media.</div> - <p /> + <p /> - <Landing /> + <Landing /> {:else} - <div - class="grid-container" - style={` + <div + class="grid-container" + style={` grid-template-columns: ${ - [!$settings.disableUpcomingAnime, !$settings.disableAnime, !$settings.disableManga] - .map(Number) - .reduce((a, b) => a + b) > 1 - ? '1fr 1fr' - : '1fr' - } + [!$settings.disableUpcomingAnime, !$settings.disableAnime, !$settings.disableManga] + .map(Number) + .reduce((a, b) => a + b) > 1 + ? '1fr 1fr' + : '1fr' + } `} - > - <div class="left-column"> - {#if !$settings.disableUpcomingAnime} - <details open={!$settings.displayUpcomingAnimeCollapsed} class="list list-upcoming"> - {#if $userIdentity.id !== -2} - <UpcomingAnimeList user={data.user} /> - {:else} - <ListTitle title={$locale().lists.upcoming.episodes} /> - - <Skeleton card={false} count={5} height="0.9rem" list /> - {/if} - </details> - {/if} - - {#if !$settings.disableAnime && !$settings.disableManga} - <IndexColumn user={data.user} userIdentity={$userIdentity} /> - {/if} - </div> - - <div class="right-column"> - {#if !$settings.disableAnime && $settings.disableManga} - <IndexColumn user={data.user} userIdentity={$userIdentity} /> - {/if} - - {#if !$settings.disableManga} - <details open={!$settings.displayMangaCollapsed} class="list list-manga"> - {#if $userIdentity.id !== -2} - <MangaListTemplate - user={data.user} - displayUnresolved={$settings.displayUnresolved} - due={true} - /> - {:else} - <ListTitle title={$locale().lists.due.mangaAndLightNovels} /> - - <Skeleton card={false} count={5} height="0.9rem" list /> - {/if} - </details> - {/if} - </div> - - {#if $settings.disableUpcomingAnime && $settings.disableAnime && $settings.disableManga} - <video src="https://video.twimg.com/tweet_video/Do_eDPnX0AAKV9f.mp4" autoplay loop> - <track kind="captions" /> - </video> - {/if} - </div> + > + <div class="left-column"> + {#if !$settings.disableUpcomingAnime} + <details open={!$settings.displayUpcomingAnimeCollapsed} class="list list-upcoming"> + {#if $userIdentity.id !== -2} + <UpcomingAnimeList user={data.user} /> + {:else} + <ListTitle title={$locale().lists.upcoming.episodes} /> + + <Skeleton card={false} count={5} height="0.9rem" list /> + {/if} + </details> + {/if} + + {#if !$settings.disableAnime && !$settings.disableManga} + <IndexColumn user={data.user} userIdentity={$userIdentity} /> + {/if} + </div> + + <div class="right-column"> + {#if !$settings.disableAnime && $settings.disableManga} + <IndexColumn user={data.user} userIdentity={$userIdentity} /> + {/if} + + {#if !$settings.disableManga} + <details open={!$settings.displayMangaCollapsed} class="list list-manga"> + {#if $userIdentity.id !== -2} + <MangaListTemplate + user={data.user} + displayUnresolved={$settings.displayUnresolved} + due={true} + /> + {:else} + <ListTitle title={$locale().lists.due.mangaAndLightNovels} /> + + <Skeleton card={false} count={5} height="0.9rem" list /> + {/if} + </details> + {/if} + </div> + + {#if $settings.disableUpcomingAnime && $settings.disableAnime && $settings.disableManga} + <video src="https://video.twimg.com/tweet_video/Do_eDPnX0AAKV9f.mp4" autoplay loop> + <track kind="captions" /> + </video> + {/if} + </div> {/if} <style> - .grid-container { - display: grid; - gap: 1rem; - } - - .left-column { - display: grid; - gap: 1rem; - align-content: start; - } - - .right-column { - align-self: start; - } - - .list { - overflow-y: auto; - break-inside: avoid; - page-break-inside: avoid; - } - - @media (max-width: 800px) { - .grid-container { - grid-template-columns: 1fr !important; - } - } + .grid-container { + display: grid; + gap: 1rem; + } + + .left-column { + display: grid; + gap: 1rem; + align-content: start; + } + + .right-column { + align-self: start; + } + + .list { + overflow-y: auto; + break-inside: avoid; + page-break-inside: avoid; + } + + @media (max-width: 800px) { + .grid-container { + grid-template-columns: 1fr !important; + } + } </style> |