diff options
| -rw-r--r-- | src/routes/+page.svelte | 27 |
1 files changed, 18 insertions, 9 deletions
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 525ac825..cb7bfed5 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -79,7 +79,15 @@ </p> {/if} -<div id="list-container"> +<div + id="list-container" + style={`column-width: 300px; column-count: ${ + Number(!$settings.disableAnime) + + Number(!$settings.disableManga) + + Number(!$settings.disableUpcomingAnime) - + Number(!$settings.disableUpcomingAnime && !$settings.disableAnime && !$settings.disableManga) + };`} +> {#if data.user === undefined} Please log in to view due media. {:else} @@ -93,6 +101,10 @@ <ul><li>Loading user identity ... 50%</li></ul> {/if} </details> + + {#if !$settings.disableAnime || !$settings.disableManga} + <p /> + {/if} {/if} {#if !$settings.disableAnime} @@ -105,6 +117,10 @@ <ul><li>Loading user identity ... 50%</li></ul> {/if} </details> + + {#if !$settings.disableManga} + <p /> + {/if} {/if} {#if !$settings.disableManga} @@ -133,15 +149,8 @@ </div> <style> - #list-container { - display: flex; - flex-wrap: wrap; - align-items: start; - } - .list { overflow-y: auto; - min-width: 300px; - flex: 1 1 300px; + break-inside: avoid-column; } </style> |