From df30df7d7d5db13b317cd6766030dda98601cc04 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Wed, 17 Apr 2024 00:56:42 -0700
Subject: feat(page): use grid columning

---
 src/routes/+page.svelte | 111 ++++++++++++++++++++++++++----------------------
 1 file changed, 60 insertions(+), 51 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 514e446a..df5e60b1 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -33,61 +33,50 @@
 
 	<Landing />
 {:else}
-	<div
-		style={`column-width: 300px; column-count: ${
-			Number(!$settings.disableAnime) +
-			Number(!$settings.disableManga) +
-			Number(!$settings.disableUpcomingAnime) -
-			Number(!$settings.disableUpcomingAnime && !$settings.disableAnime && !$settings.disableManga)
-		};`}
-	>
-		{#if !$settings.disableUpcomingAnime}
-			<details open={!$settings.displayUpcomingAnimeCollapsed} class="list">
-				{#if $userIdentity.id !== -2}
-					<UpcomingAnimeList user={data.user} />
-				{:else}
-					<ListTitle title={$locale().lists.upcoming.episodes} />
-
-					<Skeleton card={false} count={5} height="0.9rem" list />
-				{/if}
-			</details>
-
-			{#if !$settings.disableAnime || !$settings.disableManga}
-				<p />
+	<div class="grid-container">
+		<div class="left-column">
+			{#if !$settings.disableUpcomingAnime}
+				<details open={!$settings.displayUpcomingAnimeCollapsed} class="list list-upcoming">
+					{#if $userIdentity.id !== -2}
+						<UpcomingAnimeList user={data.user} />
+					{:else}
+						<ListTitle title={$locale().lists.upcoming.episodes} />
+
+						<Skeleton card={false} count={5} height="0.9rem" list />
+					{/if}
+				</details>
 			{/if}
-		{/if}
 
-		{#if !$settings.disableAnime}
-			<details open={!$settings.displayAnimeCollapsed} class="list">
-				{#if $userIdentity.id !== -2}
-					<AnimeList user={data.user} />
-				{:else}
-					<ListTitle title={$locale().lists.due.episodes} />
+			{#if !$settings.disableAnime}
+				<details open={!$settings.displayAnimeCollapsed} class="list list-due">
+					{#if $userIdentity.id !== -2}
+						<AnimeList user={data.user} />
+					{:else}
+						<ListTitle title={$locale().lists.due.episodes} />
 
-					<Skeleton card={false} count={5} height="0.9rem" list />
-				{/if}
-			</details>
+						<Skeleton card={false} count={5} height="0.9rem" list />
+					{/if}
+				</details>
+			{/if}
+		</div>
 
+		<div class="right-column">
 			{#if !$settings.disableManga}
-				<p />
+				<details open={!$settings.displayMangaCollapsed} class="list list-manga">
+					{#if $userIdentity.id !== -2}
+						<MangaListTemplate
+							user={data.user}
+							displayUnresolved={$settings.displayUnresolved}
+							due={true}
+						/>
+					{:else}
+						<ListTitle title={$locale().lists.due.mangaAndLightNovels} />
+
+						<Skeleton card={false} count={5} height="0.9rem" list />
+					{/if}
+				</details>
 			{/if}
-		{/if}
-
-		{#if !$settings.disableManga}
-			<details open={!$settings.displayMangaCollapsed} class="list">
-				{#if $userIdentity.id !== -2}
-					<MangaListTemplate
-						user={data.user}
-						displayUnresolved={$settings.displayUnresolved}
-						due={true}
-					/>
-				{:else}
-					<ListTitle title={$locale().lists.due.mangaAndLightNovels} />
-
-					<Skeleton card={false} count={5} height="0.9rem" list />
-				{/if}
-			</details>
-		{/if}
+		</div>
 
 		{#if $settings.disableUpcomingAnime && $settings.disableAnime && $settings.disableManga}
 			<video src="https://video.twimg.com/tweet_video/Do_eDPnX0AAKV9f.mp4" autoplay loop>
@@ -98,11 +87,31 @@
 {/if}
 
 <style>
+	.grid-container {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 1rem;
+	}
+
+	.left-column {
+		display: grid;
+		gap: 1rem;
+		align-content: start;
+	}
+
+	.right-column {
+		align-self: start;
+	}
+
 	.list {
 		overflow-y: auto;
 		break-inside: avoid;
-		/* max-height: 80vh; */
-		overflow-y: auto;
 		page-break-inside: avoid;
 	}
+
+	@media (max-width: 800px) {
+		.grid-container {
+			grid-template-columns: 1fr;
+		}
+	}
 </style>
-- 
cgit v1.2.3