From 53e090964799e1155316466ae630dbeb0fe4fa45 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sat, 30 Dec 2023 05:26:28 -0800
Subject: feat(index): fancy auto-sizing

---
 src/routes/+page.svelte | 27 ++++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

(limited to 'src/routes')

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>
-- 
cgit v1.2.3