diff options
| author | Fuwn <[email protected]> | 2024-04-17 00:56:42 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-04-17 00:56:42 -0700 |
| commit | df30df7d7d5db13b317cd6766030dda98601cc04 (patch) | |
| tree | 06cb696f332f2d355c319906c20ea098ee4dc228 /src | |
| parent | fix(list): hover cover toggle (diff) | |
| download | due.moe-df30df7d7d5db13b317cd6766030dda98601cc04.tar.xz due.moe-df30df7d7d5db13b317cd6766030dda98601cc04.zip | |
feat(page): use grid columning
Diffstat (limited to 'src')
| -rw-r--r-- | src/routes/+page.svelte | 111 |
1 files changed, 60 insertions, 51 deletions
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 514e446a..df5e60b1 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -33,61 +33,50 @@ <Landing /> {:else} - <div - style={`column-width: 300px; column-count: ${ - Number(!$settings.disableAnime) + - Number(!$settings.disableManga) + - Number(!$settings.disableUpcomingAnime) - - Number(!$settings.disableUpcomingAnime && !$settings.disableAnime && !$settings.disableManga) - };`} - > - {#if !$settings.disableUpcomingAnime} - <details open={!$settings.displayUpcomingAnimeCollapsed} class="list"> - {#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 !$settings.disableAnime || !$settings.disableManga} - <p /> + <div class="grid-container"> + <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} - {#if !$settings.disableAnime} - <details open={!$settings.displayAnimeCollapsed} class="list"> - {#if $userIdentity.id !== -2} - <AnimeList user={data.user} /> - {:else} - <ListTitle title={$locale().lists.due.episodes} /> + {#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> + <Skeleton card={false} count={5} height="0.9rem" list /> + {/if} + </details> + {/if} + </div> + <div class="right-column"> {#if !$settings.disableManga} - <p /> + <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} - {/if} - - {#if !$settings.disableManga} - <details open={!$settings.displayMangaCollapsed} class="list"> - {#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> @@ -98,11 +87,31 @@ {/if} <style> + .grid-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + } + + .left-column { + display: grid; + gap: 1rem; + align-content: start; + } + + .right-column { + align-self: start; + } + .list { overflow-y: auto; break-inside: avoid; - /* max-height: 80vh; */ - overflow-y: auto; page-break-inside: avoid; } + + @media (max-width: 800px) { + .grid-container { + grid-template-columns: 1fr; + } + } </style> |