diff options
| author | Fuwn <[email protected]> | 2024-01-24 23:54:58 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-01-24 23:54:58 -0800 |
| commit | 3cdeb60efff8ffbecf2d62b6f1a6e1b5261fa86f (patch) | |
| tree | 8d6d734339bfce5b9b41c06190372886402ac002 | |
| parent | feat(database): add rename category server implementation (diff) | |
| download | due.moe-3cdeb60efff8ffbecf2d62b6f1a6e1b5261fa86f.tar.xz due.moe-3cdeb60efff8ffbecf2d62b6f1a6e1b5261fa86f.zip | |
feat(updates): better list skeleton
| -rw-r--r-- | src/lib/Skeleton.svelte | 8 | ||||
| -rw-r--r-- | src/routes/updates/+page.svelte | 36 |
2 files changed, 22 insertions, 22 deletions
diff --git a/src/lib/Skeleton.svelte b/src/lib/Skeleton.svelte index 7a278429..71078f13 100644 --- a/src/lib/Skeleton.svelte +++ b/src/lib/Skeleton.svelte @@ -4,6 +4,7 @@ export let height = '100px'; export let card = true; export let grid = false; + export let list = false; </script> {#if grid} @@ -18,13 +19,16 @@ </div> {:else} {#each Array(count) as _, i} - <div class={card ? 'card card-small' : ''} style={`width: ${width};`}> + <div + class={card ? 'card card-small' : ''} + style={`width: ${width}; ${list ? 'padding-top: .5rem;' : ''}`} + > <div class="skeleton-container"> <div class="skeleton" style={`width: ${width}; height: ${height};`} /> </div> </div> - {#if i < count - 1} + {#if !list && i < count - 1} <p /> {/if} {/each} diff --git a/src/routes/updates/+page.svelte b/src/routes/updates/+page.svelte index 45ff6409..6e6fd6a9 100644 --- a/src/routes/updates/+page.svelte +++ b/src/routes/updates/+page.svelte @@ -62,10 +62,10 @@ <small style="opacity: 50%">{mangaEndTime ? mangaEndTime / 1000 : '...'}s</small> </summary> - <ul> - {#if feed === null} - <li>Failed to load feed</li> - {:else if feed !== undefined} + {#if feed === null} + Failed to load feed + {:else if feed !== undefined} + <ul> {#each feed.items as item} <li> {#if directLink} @@ -84,12 +84,10 @@ {/if} </li> {/each} - {:else} - <p /> - - <Skeleton card={false} count={5} height="1rem" /> - {/if} - </ul> + </ul> + {:else} + <Skeleton card={false} count={5} height="0.9rem" list /> + {/if} </details> <details open class="list"> @@ -98,10 +96,10 @@ <small style="opacity: 50%">{novelEndTime ? novelEndTime / 1000 : '...'}s</small> </summary> - <ul> - {#if novelFeed === null} - <li>Failed to load feed</li> - {:else if novelFeed !== undefined} + {#if novelFeed === null} + Failed to load feed + {:else if novelFeed !== undefined} + <ul> {#each novelFeed.data.items as item} <li> {#if directLink} @@ -119,12 +117,10 @@ {/if} </li> {/each} - {:else} - <p /> - - <Skeleton card={false} count={5} height="1rem" /> - {/if} - </ul> + </ul> + {:else} + <Skeleton card={false} count={5} height="0.9rem" list /> + {/if} </details> </div> |