aboutsummaryrefslogtreecommitdiff
path: root/src/routes/+page.svelte
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/routes/+page.svelte
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/routes/+page.svelte')
-rw-r--r--src/routes/+page.svelte212
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>