From e5c1064fff4046c7f6fc63ae959dbf3c71ddb368 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 4 Jan 2024 10:48:00 -0800
Subject: feat(schedule): better crunchyroll schedule

---
 src/lib/Tools/Schedule/Crunchyroll.svelte | 82 ++++++++++++++++++-------------
 1 file changed, 48 insertions(+), 34 deletions(-)

(limited to 'src/lib/Tools/Schedule/Crunchyroll.svelte')

diff --git a/src/lib/Tools/Schedule/Crunchyroll.svelte b/src/lib/Tools/Schedule/Crunchyroll.svelte
index efa10a2e..5c6d01ab 100644
--- a/src/lib/Tools/Schedule/Crunchyroll.svelte
+++ b/src/lib/Tools/Schedule/Crunchyroll.svelte
@@ -28,6 +28,8 @@
 		(media) => media.day === 'soon'
 	);
 
+	$: columnCount = Math.ceil(Object.keys(days).length / 2);
+
 	const ordinalSuffix = (i: number) => {
 		const j = i % 10;
 		const k = i % 100;
@@ -40,42 +42,54 @@
 	};
 </script>
 
-<ol>
+<p />
+
+<p>Crunchyroll Releases Calender</p>
+
+<div id="list-container" style={`column-count: ${columnCount};`}>
 	{#each Object.values(days) as day}
 		{@const date = new Date(day[0].year, day[0].month - 1, day[0].day)}
 
-		<p>
-			<li>
-				{date.toLocaleString('default', { month: 'long' })}
-				{ordinalSuffix(day[0].day)}, {day[0].year}
-				<ul>
-					{#each day as media}
-						<li>{media.title}</li>
-					{/each}
-				</ul>
-			</li>
-		</p>
-	{/each}
-
-	<p>
-		<li>
-			Coming soon
-			<ul>
-				{#each soon as media}
-					<li>{media.title}</li>
-				{/each}
-			</ul>
-		</li>
-	</p>
-
-	<p>
-		<li>
-			Continuing from previous season
-			<ul>
-				{#each continuing as media}
+		<div class="card day">
+			{date.toLocaleString('default', { month: 'long' })}
+			{ordinalSuffix(day[0].day)}, {day[0].year}
+			<ol>
+				{#each day as media}
 					<li>{media.title}</li>
 				{/each}
-			</ul>
-		</li>
-	</p>
-</ol>
+			</ol>
+		</div>
+
+		<p />
+	{/each}
+
+	<div class="card day">
+		Coming soon
+		<ol>
+			{#each soon as media}
+				<li>{media.title}</li>
+			{/each}
+		</ol>
+	</div>
+
+	<div class="card day">
+		Continuing from previous season
+		<ol>
+			{#each continuing as media}
+				<li>{media.title}</li>
+			{/each}
+		</ol>
+	</div>
+</div>
+
+<style>
+	#list-container {
+		column-width: 250px;
+		/* break-inside: avoid-column; */
+	}
+
+	.day {
+		overflow-y: auto;
+		break-inside: avoid-column;
+	}
+</style>
-- 
cgit v1.2.3