From 320c68dfb59b519144e9c063cd55ccd255b97a32 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 31 Aug 2023 15:55:18 -0700
Subject: feat(app): responsive

---
 src/routes/+page.svelte | 100 +++++++++++++++++++++++++++---------------------
 1 file changed, 57 insertions(+), 43 deletions(-)

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

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3d226606..6235fa58 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -28,51 +28,65 @@
 
 <p />
 
-{#if data.user === undefined}
-	Please log in to view due media.
-{:else}
-	<p />
+<div id="list-container">
+	{#if data.user === undefined}
+		Please log in to view due media.
+	{:else}
+		<p />
 
-	<details open={false}>
-		{#if currentUserIdentity.id != -1}
-			<UpcomingAnimeList
-				user={data.user}
-				identity={currentUserIdentity}
-				displayUnresolved={displayingUnresolved}
-			/>
-		{:else}
-			<summary>Upcoming Episodes [...] <small style="opacity: 50%">...s</small></summary>
-			<ul><li>Loading ...</li></ul>
-		{/if}
-	</details>
+		<details open={animeClosed} class="list">
+			{#if currentUserIdentity.id != -1}
+				<UpcomingAnimeList
+					user={data.user}
+					identity={currentUserIdentity}
+					displayUnresolved={displayingUnresolved}
+				/>
+			{:else}
+				<summary>Upcoming Episodes [...] <small style="opacity: 50%">...s</small></summary>
+				<ul><li>Loading ...</li></ul>
+			{/if}
+		</details>
 
-	<p />
+		<p />
 
-	<details open={animeClosed}>
-		{#if currentUserIdentity.id != -1}
-			<AnimeList
-				user={data.user}
-				identity={currentUserIdentity}
-				displayUnresolved={displayingUnresolved}
-			/>
-		{:else}
-			<summary>Anime [...] <small style="opacity: 50%">...s</small></summary>
-			<ul><li>Loading ...</li></ul>
-		{/if}
-	</details>
+		<details open={animeClosed} class="list">
+			{#if currentUserIdentity.id != -1}
+				<AnimeList
+					user={data.user}
+					identity={currentUserIdentity}
+					displayUnresolved={displayingUnresolved}
+				/>
+			{:else}
+				<summary>Anime [...] <small style="opacity: 50%">...s</small></summary>
+				<ul><li>Loading ...</li></ul>
+			{/if}
+		</details>
 
-	<p />
+		<p />
 
-	<details open={mangaClosed}>
-		{#if currentUserIdentity.id != -1}
-			<MangaList
-				user={data.user}
-				identity={currentUserIdentity}
-				displayUnresolved={displayingUnresolved}
-			/>
-		{:else}
-			<summary>Manga [...] <small style="opacity: 50%">...s</small></summary>
-			<ul><li>Loading ...</li></ul>
-		{/if}
-	</details>
-{/if}
+		<details open={mangaClosed} class="list">
+			{#if currentUserIdentity.id != -1}
+				<MangaList
+					user={data.user}
+					identity={currentUserIdentity}
+					displayUnresolved={displayingUnresolved}
+				/>
+			{:else}
+				<summary>Manga [...] <small style="opacity: 50%">...s</small></summary>
+				<ul><li>Loading ...</li></ul>
+			{/if}
+		</details>
+	{/if}
+</div>
+
+<style>
+	.list {
+		width: 100%;
+	}
+
+	@media (min-width: 960px) {
+		#list-container {
+			display: flex;
+		}
+	}
+</style>
-- 
cgit v1.2.3

