diff options
Diffstat (limited to 'src/routes/+page.svelte')
| -rw-r--r-- | src/routes/+page.svelte | 42 |
1 files changed, 14 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> |