From 247d33f6df4e61d807c7543036a2518fc90fca77 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Tue, 5 Sep 2023 23:55:06 -0700
Subject: feat: show completed anime section

---
 src/routes/+page.svelte | 42 ++++++++++++++----------------------------
 1 file changed, 14 insertions(+), 28 deletions(-)

(limited to 'src/routes/+page.svelte')

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e981ea3f..fdae3fcb 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,6 +6,7 @@
 	import UpcomingAnimeList from '$lib/List/UpcomingAnimeList.svelte';
 	import userIdentity from '../stores/userIdentity';
 	import settings from '../stores/settings';
+	import WatchingAnimeList from '$lib/List/WatchingAnimeList.svelte';
 
 	export let data;
 
@@ -31,8 +32,6 @@
 	{#if data.user === undefined}
 		Please log in to view due media.
 	{:else}
-		<p />
-
 		<details open={!$settings.closeAnimeByDefault} class="list">
 			{#if currentUserIdentity.id != -1}
 				<UpcomingAnimeList
@@ -46,8 +45,6 @@
 			{/if}
 		</details>
 
-		<p />
-
 		<details open={!$settings.closeAnimeByDefault} class="list">
 			{#if currentUserIdentity.id != -1}
 				<AnimeList
@@ -61,8 +58,6 @@
 			{/if}
 		</details>
 
-		<p />
-
 		<details open={!$settings.closeMangaByDefault} class="list">
 			{#if currentUserIdentity.id != -1}
 				<MangaList
@@ -75,32 +70,23 @@
 				<ul><li>Loading ...</li></ul>
 			{/if}
 		</details>
+
+		{#if $settings.showCompletedAnime}
+			<details open={!$settings.closeAnimeByDefault} class="list">
+				{#if currentUserIdentity.id != -1}
+					<WatchingAnimeList user={data.user} identity={currentUserIdentity} />
+				{:else}
+					<summary>Completed Anime [...] <small style="opacity: 50%">...s</small></summary>
+					<ul><li>Loading ...</li></ul>
+				{/if}
+			</details>
+		{/if}
 	{/if}
 </div>
 
 <style>
 	#list-container {
-		display: flex;
-		flex-wrap: wrap;
-	}
-
-	/* (1440 / 2) + (1440/8) = 720 + 180 = 900 */
-	@media (max-width: 900px) {
-		.list {
-			flex: 0 0 100%;
-		}
-	}
-
-	/* (1920 / 2) + (1920 / 4) = 960 + 480 = 1440 */
-	@media (min-width: 901px) and (max-width: 1440px) {
-		.list {
-			flex: 0 0 50%;
-		}
-	}
-
-	@media (min-width: 1441px) {
-		.list {
-			flex: 0 0 33.33%;
-		}
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 	}
 </style>
-- 
cgit v1.2.3