diff options
| author | Fuwn <[email protected]> | 2023-08-31 15:55:18 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2023-08-31 15:55:18 -0700 |
| commit | 320c68dfb59b519144e9c063cd55ccd255b97a32 (patch) | |
| tree | 8a0902e704de5eee8848a18a458e64587a601c8e /src/routes | |
| parent | format(list): a11y anchor warnings (diff) | |
| download | due.moe-320c68dfb59b519144e9c063cd55ccd255b97a32.tar.xz due.moe-320c68dfb59b519144e9c063cd55ccd255b97a32.zip | |
feat(app): responsive
Diffstat (limited to 'src/routes')
| -rw-r--r-- | src/routes/+page.svelte | 100 |
1 files changed, 57 insertions, 43 deletions
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 3d226606..6235fa58 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -28,51 +28,65 @@ <p /> -{#if data.user === undefined} - Please log in to view due media. -{:else} - <p /> +<div id="list-container"> + {#if data.user === undefined} + Please log in to view due media. + {:else} + <p /> - <details open={false}> - {#if currentUserIdentity.id != -1} - <UpcomingAnimeList - user={data.user} - identity={currentUserIdentity} - displayUnresolved={displayingUnresolved} - /> - {:else} - <summary>Upcoming Episodes [...] <small style="opacity: 50%">...s</small></summary> - <ul><li>Loading ...</li></ul> - {/if} - </details> + <details open={animeClosed} class="list"> + {#if currentUserIdentity.id != -1} + <UpcomingAnimeList + user={data.user} + identity={currentUserIdentity} + displayUnresolved={displayingUnresolved} + /> + {:else} + <summary>Upcoming Episodes [...] <small style="opacity: 50%">...s</small></summary> + <ul><li>Loading ...</li></ul> + {/if} + </details> - <p /> + <p /> - <details open={animeClosed}> - {#if currentUserIdentity.id != -1} - <AnimeList - user={data.user} - identity={currentUserIdentity} - displayUnresolved={displayingUnresolved} - /> - {:else} - <summary>Anime [...] <small style="opacity: 50%">...s</small></summary> - <ul><li>Loading ...</li></ul> - {/if} - </details> + <details open={animeClosed} class="list"> + {#if currentUserIdentity.id != -1} + <AnimeList + user={data.user} + identity={currentUserIdentity} + displayUnresolved={displayingUnresolved} + /> + {:else} + <summary>Anime [...] <small style="opacity: 50%">...s</small></summary> + <ul><li>Loading ...</li></ul> + {/if} + </details> - <p /> + <p /> - <details open={mangaClosed}> - {#if currentUserIdentity.id != -1} - <MangaList - user={data.user} - identity={currentUserIdentity} - displayUnresolved={displayingUnresolved} - /> - {:else} - <summary>Manga [...] <small style="opacity: 50%">...s</small></summary> - <ul><li>Loading ...</li></ul> - {/if} - </details> -{/if} + <details open={mangaClosed} class="list"> + {#if currentUserIdentity.id != -1} + <MangaList + user={data.user} + identity={currentUserIdentity} + displayUnresolved={displayingUnresolved} + /> + {:else} + <summary>Manga [...] <small style="opacity: 50%">...s</small></summary> + <ul><li>Loading ...</li></ul> + {/if} + </details> + {/if} +</div> + +<style> + .list { + width: 100%; + } + + @media (min-width: 960px) { + #list-container { + display: flex; + } + } +</style> |