From 5120f53ef2ec94ddcf3a0b9aff413e55705c0ac8 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Mon, 8 Jan 2024 23:45:57 -0800
Subject: refactor(schedule): unique ids

---
 src/lib/Tools/Schedule/Crunchyroll.svelte | 8 ++------
 src/lib/Tools/Schedule/Tool.svelte        | 7 ++-----
 src/lib/Tools/Schedule/container.css      | 3 +++
 3 files changed, 7 insertions(+), 11 deletions(-)
 create mode 100644 src/lib/Tools/Schedule/container.css

diff --git a/src/lib/Tools/Schedule/Crunchyroll.svelte b/src/lib/Tools/Schedule/Crunchyroll.svelte
index 68a73202..faba0222 100644
--- a/src/lib/Tools/Schedule/Crunchyroll.svelte
+++ b/src/lib/Tools/Schedule/Crunchyroll.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import crunchyroll from '$lib/crunchyroll.json';
+	import './container.css';
 
 	interface CrunchyrollMedia<T = number | 'soon' | 'continuing'> {
 		year: number;
@@ -42,7 +43,7 @@
 	};
 </script>
 
-<div id="list-container" style={`column-count: ${columnCount};`}>
+<div class="list-container" id="crunchyroll" style={`column-count: ${columnCount};`}>
 	{#each Object.values(days) as day}
 		{@const date = new Date(day[0].year, day[0].month - 1, day[0].day)}
 
@@ -91,11 +92,6 @@
 </div>
 
 <style>
-	#list-container {
-		column-width: 250px;
-		/* break-inside: avoid-column; */
-	}
-
 	.day {
 		overflow-y: auto;
 		break-inside: avoid-column;
diff --git a/src/lib/Tools/Schedule/Tool.svelte b/src/lib/Tools/Schedule/Tool.svelte
index 56c02b1c..5fdbb526 100644
--- a/src/lib/Tools/Schedule/Tool.svelte
+++ b/src/lib/Tools/Schedule/Tool.svelte
@@ -21,6 +21,7 @@
 	import HoverCover from '$lib/Media/Cover/HoverCover.svelte';
 	import Crunchyroll from '$lib/Tools/Schedule/Crunchyroll.svelte';
 	import Loading from '$lib/Loading.svelte';
+	import './container.css';
 
 	let subsPleasePromise: Promise<SubsPlease>;
 	let scheduledMediaPromise: Promise<Partial<Media[]>>;
@@ -132,7 +133,7 @@
 			{#if scheduledMedia}
 				{@const columnCount = Math.ceil(Object.keys(subsPlease.schedule).length / 2)}
 
-				<div id="list-container" style={`column-count: ${columnCount}`}>
+				<div class="list-container" id="schedule" style={`column-count: ${columnCount}`}>
 					{#each Object.entries(shiftSubsPleaseSchedule(subsPlease.schedule)) as [day, scheduleEntry]}
 						<details
 							open
@@ -218,10 +219,6 @@
 <HoverCover options={hoverCoverState} width={300} />
 
 <style>
-	#list-container {
-		column-width: 250px;
-	}
-
 	.entry::after {
 		content: '';
 		display: table;
diff --git a/src/lib/Tools/Schedule/container.css b/src/lib/Tools/Schedule/container.css
new file mode 100644
index 00000000..3a3beb1f
--- /dev/null
+++ b/src/lib/Tools/Schedule/container.css
@@ -0,0 +1,3 @@
+.list-container {
+	column-width: 250px;
+}
-- 
cgit v1.2.3