diff options
| author | Fuwn <[email protected]> | 2024-01-25 00:02:26 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-01-25 00:02:26 -0800 |
| commit | 427f1a599aaa0869201a212462d8edc2ba78c74f (patch) | |
| tree | b3275472183648df2a8a610668bcab6a33d0bc89 /src/lib | |
| parent | feat(list): list style skeleton loading (diff) | |
| download | due.moe-427f1a599aaa0869201a212462d8edc2ba78c74f.tar.xz due.moe-427f1a599aaa0869201a212462d8edc2ba78c74f.zip | |
feat(anime): badges and list skeleton ui
Diffstat (limited to 'src/lib')
| -rw-r--r-- | src/lib/List/Anime/AnimeListTemplate.svelte | 18 | ||||
| -rw-r--r-- | src/lib/Skeleton.svelte | 3 |
2 files changed, 18 insertions, 3 deletions
diff --git a/src/lib/List/Anime/AnimeListTemplate.svelte b/src/lib/List/Anime/AnimeListTemplate.svelte index 4cfd03fd..46537524 100644 --- a/src/lib/List/Anime/AnimeListTemplate.svelte +++ b/src/lib/List/Anime/AnimeListTemplate.svelte @@ -35,7 +35,14 @@ <ul><li>Loading subtitle release data ... 33%</li></ul> - <Skeleton card={false} count={5} height="0.9rem" list /> + <Skeleton + card={false} + count={5} + pad + height={$settings.displayCoverMode ? '5rem' : '0.9rem'} + list={!$settings.displayCoverMode} + grid={$settings.displayCoverMode} + /> {:then subsPlease} {#await animeLists} {#if previousAnimeList} @@ -56,7 +63,14 @@ <ul><li>Loading anime lists ... 66%</li></ul> - <Skeleton card={false} count={5} height="0.9rem" list /> + <Skeleton + card={false} + count={5} + pad + height={$settings.displayCoverMode ? '5rem' : '0.9rem'} + list={!$settings.displayCoverMode} + grid={$settings.displayCoverMode} + /> {/if} {:then media} <CleanAnimeList diff --git a/src/lib/Skeleton.svelte b/src/lib/Skeleton.svelte index 71078f13..5bb90ab9 100644 --- a/src/lib/Skeleton.svelte +++ b/src/lib/Skeleton.svelte @@ -5,10 +5,11 @@ export let card = true; export let grid = false; export let list = false; + export let pad = false; </script> {#if grid} - <div class="grid"> + <div class="grid" style={pad ? 'padding-top: .5rem;' : ''}> {#each Array(count) as _} <div class={card ? 'card card-small' : ''} style={`width: ${width};`}> <div class="skeleton-container"> |