diff options
| author | Fuwn <[email protected]> | 2023-09-05 23:55:06 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2023-09-05 23:55:06 -0700 |
| commit | 247d33f6df4e61d807c7543036a2518fc90fca77 (patch) | |
| tree | 2a944f5afe89067ad5b7c42b2e9faee79bff58f3 /src/routes | |
| parent | feat(anime): optionally link to livechart.me (diff) | |
| download | due.moe-247d33f6df4e61d807c7543036a2518fc90fca77.tar.xz due.moe-247d33f6df4e61d807c7543036a2518fc90fca77.zip | |
feat: show completed anime section
Diffstat (limited to 'src/routes')
| -rw-r--r-- | src/routes/+page.svelte | 42 | ||||
| -rw-r--r-- | src/routes/settings/+page.svelte | 10 |
2 files changed, 24 insertions, 28 deletions
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index e981ea3f..fdae3fcb 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -6,6 +6,7 @@ import UpcomingAnimeList from '$lib/List/UpcomingAnimeList.svelte'; import userIdentity from '../stores/userIdentity'; import settings from '../stores/settings'; + import WatchingAnimeList from '$lib/List/WatchingAnimeList.svelte'; export let data; @@ -31,8 +32,6 @@ {#if data.user === undefined} Please log in to view due media. {:else} - <p /> - <details open={!$settings.closeAnimeByDefault} class="list"> {#if currentUserIdentity.id != -1} <UpcomingAnimeList @@ -46,8 +45,6 @@ {/if} </details> - <p /> - <details open={!$settings.closeAnimeByDefault} class="list"> {#if currentUserIdentity.id != -1} <AnimeList @@ -61,8 +58,6 @@ {/if} </details> - <p /> - <details open={!$settings.closeMangaByDefault} class="list"> {#if currentUserIdentity.id != -1} <MangaList @@ -75,32 +70,23 @@ <ul><li>Loading ...</li></ul> {/if} </details> + + {#if $settings.showCompletedAnime} + <details open={!$settings.closeAnimeByDefault} class="list"> + {#if currentUserIdentity.id != -1} + <WatchingAnimeList user={data.user} identity={currentUserIdentity} /> + {:else} + <summary>Completed Anime [...] <small style="opacity: 50%">...s</small></summary> + <ul><li>Loading ...</li></ul> + {/if} + </details> + {/if} {/if} </div> <style> #list-container { - display: flex; - flex-wrap: wrap; - } - - /* (1440 / 2) + (1440/8) = 720 + 180 = 900 */ - @media (max-width: 900px) { - .list { - flex: 0 0 100%; - } - } - - /* (1920 / 2) + (1920 / 4) = 960 + 480 = 1440 */ - @media (min-width: 901px) and (max-width: 1440px) { - .list { - flex: 0 0 50%; - } - } - - @media (min-width: 1441px) { - .list { - flex: 0 0 33.33%; - } + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } </style> diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte index 54add148..5889caf9 100644 --- a/src/routes/settings/+page.svelte +++ b/src/routes/settings/+page.svelte @@ -54,6 +54,16 @@ > <br /> + <a + href={'#'} + on:click={() => + $settings.showCompletedAnime + ? settings.setKey('showCompletedAnime', false) + : settings.setKey('showCompletedAnime', true)} + >{$settings.showCompletedAnime ? 'Hide' : 'Show'} completed anime</a + > + <br /> + <p /> <a |