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/app.css                               |  4 ++
 src/lib/Tools/Schedule/Crunchyroll.svelte | 82 ++++++++++++++++++-------------
 src/lib/Tools/Schedule/Tool.svelte        |  7 +--
 src/routes/+layout.svelte                 |  8 ---
 4 files changed, 53 insertions(+), 48 deletions(-)

diff --git a/src/app.css b/src/app.css
index 46e37670..07c1c780 100644
--- a/src/app.css
+++ b/src/app.css
@@ -151,3 +151,7 @@ code {
 .card-small {
 	padding: 0.5rem;
 }
+
+.card-clear {
+	background-color: transparent;
+}
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>
diff --git a/src/lib/Tools/Schedule/Tool.svelte b/src/lib/Tools/Schedule/Tool.svelte
index f000bfbc..fd619fd8 100644
--- a/src/lib/Tools/Schedule/Tool.svelte
+++ b/src/lib/Tools/Schedule/Tool.svelte
@@ -160,7 +160,6 @@
 										<span class:countdown={$settings.displayCountdownRightAligned}>
 											{#if media && media.nextAiringEpisode}
 												<span style="opacity: 50%;">
-													&nbsp;
 													{media.nextAiringEpisode?.episode > 1
 														? media.nextAiringEpisode?.episode - 1
 														: media.nextAiringEpisode?.episode}{media.episodes
@@ -193,11 +192,7 @@
 
 <p />
 
-<details>
-	<summary>Crunchyroll Simulcast Release Calender</summary>
-
-	<Crunchyroll />
-</details>
+<Crunchyroll />
 
 <HoverCover {hoveredItem} {hoveredMedia} {imageStyle} {hovering} width={300} />
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2f0f6140..738c81f7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -110,10 +110,6 @@
 		width: 100%;
 	}
 
-	#separator {
-		display: none;
-	}
-
 	@media (max-width: 640px) {
 		#hover-header {
 			opacity: 1;
@@ -121,10 +117,6 @@
 			padding: 0;
 			/* font-size: 5vw; */
 		}
-
-		#separator {
-			display: block;
-		}
 	}
 
 	#hover-header:hover {
-- 
cgit v1.2.3