diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/List/Anime/DueIndexColumn.svelte | 21 | ||||
| -rw-r--r-- | src/routes/+page.svelte | 32 |
2 files changed, 40 insertions, 13 deletions
diff --git a/src/lib/List/Anime/DueIndexColumn.svelte b/src/lib/List/Anime/DueIndexColumn.svelte new file mode 100644 index 00000000..6d81a661 --- /dev/null +++ b/src/lib/List/Anime/DueIndexColumn.svelte @@ -0,0 +1,21 @@ +<script lang="ts"> + import type { AniListAuthorisation } from '$lib/Data/AniList/identity'; + import Skeleton from '$lib/Loading/Skeleton.svelte'; + import locale from '$stores/locale'; + import settings from '$stores/settings'; + import ListTitle from '../ListTitle.svelte'; + import AnimeList from '$lib/List/Anime/DueAnimeList.svelte'; + + export let userIdentity: { id: number }; + export let user: AniListAuthorisation; +</script> + +<details open={!$settings.displayAnimeCollapsed} class="list list-due"> + {#if userIdentity.id !== -2} + <AnimeList {user} /> + {:else} + <ListTitle title={$locale().lists.due.episodes} /> + + <Skeleton card={false} count={5} height="0.9rem" list /> + {/if} +</details> diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index df5e60b1..3a00a98b 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,6 +1,5 @@ <script lang="ts"> import { onDestroy, onMount } from 'svelte'; - import AnimeList from '$lib/List/Anime/DueAnimeList.svelte'; import MangaListTemplate from '$lib/List/Manga/MangaListTemplate.svelte'; import UpcomingAnimeList from '$lib/List/Anime/UpcomingAnimeList.svelte'; import userIdentity from '$stores/identity.js'; @@ -12,6 +11,7 @@ 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; @@ -33,7 +33,18 @@ <Landing /> {:else} - <div class="grid-container"> + <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' + } + `} + > <div class="left-column"> {#if !$settings.disableUpcomingAnime} <details open={!$settings.displayUpcomingAnimeCollapsed} class="list list-upcoming"> @@ -47,20 +58,16 @@ </details> {/if} - {#if !$settings.disableAnime} - <details open={!$settings.displayAnimeCollapsed} class="list list-due"> - {#if $userIdentity.id !== -2} - <AnimeList user={data.user} /> - {:else} - <ListTitle title={$locale().lists.due.episodes} /> - - <Skeleton card={false} count={5} height="0.9rem" list /> - {/if} - </details> + {#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} @@ -89,7 +96,6 @@ <style> .grid-container { display: grid; - grid-template-columns: 1fr 1fr; gap: 1rem; } |