From 151fdd371334d68ae8bca9cfd33b91bd46bf64d1 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 25 Jan 2024 04:38:58 -0800
Subject: feat(schedule): better fitting skeletion loading

---
 src/lib/Skeleton.svelte          | 7 ++++---
 src/routes/schedule/+page.svelte | 4 ++--
 2 files changed, 6 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/lib/Skeleton.svelte b/src/lib/Skeleton.svelte
index bd907b67..f42e5a75 100644
--- a/src/lib/Skeleton.svelte
+++ b/src/lib/Skeleton.svelte
@@ -61,8 +61,9 @@
 	}
 
 	.grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-		grid-gap: 1rem;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		row-gap: 1em;
 	}
 </style>
diff --git a/src/routes/schedule/+page.svelte b/src/routes/schedule/+page.svelte
index 0bfedff6..3b27db12 100644
--- a/src/routes/schedule/+page.svelte
+++ b/src/routes/schedule/+page.svelte
@@ -66,7 +66,7 @@
 
 	<p /> -->
 
-	<Skeleton grid={true} count={100} />
+	<Skeleton grid={true} count={7} height="15em" width="49.5%" />
 {:then subsPlease}
 	{#if subsPlease}
 		{#await scheduledMediaPromise}
@@ -74,7 +74,7 @@
 
 			<p /> -->
 
-			<Skeleton grid={true} count={100} />
+			<Skeleton grid={true} count={7} height="15em" width="49.5%" />
 		{:then scheduledMedia}
 			{#if scheduledMedia}
 				{@const columnCount = Math.ceil(Object.keys(subsPlease.schedule).length / 2)}
-- 
cgit v1.2.3