fix(index): alignment on hide mix

1 files changed, 19 insertions, 13 deletions

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index df5e60b1..3a00a98b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { onDestroy, onMount } from 'svelte';
-	import AnimeList from '$lib/List/Anime/DueAnimeList.svelte';
 	import MangaListTemplate from '$lib/List/Manga/MangaListTemplate.svelte';
 	import UpcomingAnimeList from '$lib/List/Anime/UpcomingAnimeList.svelte';
 	import userIdentity from '$stores/identity.js';
@@ -12,6 +11,7 @@
 	import Skeleton from '$lib/Loading/Skeleton.svelte';
 	import locale from '$stores/locale.js';
 	import Landing from '$lib/Landing.svelte';
+	import IndexColumn from '$lib/List/Anime/DueIndexColumn.svelte';
 
 	export let data;
 
@@ -33,7 +33,18 @@
 
 	<Landing />
 {:else}
-	<div class="grid-container">
+	<div
+		class="grid-container"
+		style={`
+			grid-template-columns: ${
+				[!$settings.disableUpcomingAnime, !$settings.disableAnime, !$settings.disableManga]
+					.map(Number)
+					.reduce((a, b) => a + b) > 1
+					? '1fr 1fr'
+					: '1fr'
+			}
+		`}
+	>
 		<div class="left-column">
 			{#if !$settings.disableUpcomingAnime}
 				<details open={!$settings.displayUpcomingAnimeCollapsed} class="list list-upcoming">
@@ -47,20 +58,16 @@
 				</details>
 			{/if}
 
-			{#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>
+			{#if !$settings.disableAnime && !$settings.disableManga}
+				<IndexColumn user={data.user} userIdentity={$userIdentity} />
 			{/if}
 		</div>
 
 		<div class="right-column">
+			{#if !$settings.disableAnime && $settings.disableManga}
+				<IndexColumn user={data.user} userIdentity={$userIdentity} />
+			{/if}
+
 			{#if !$settings.disableManga}
 				<details open={!$settings.displayMangaCollapsed} class="list list-manga">
 					{#if $userIdentity.id !== -2}
@@ -89,7 +96,6 @@
 <style>
 	.grid-container {
 		display: grid;
-		grid-template-columns: 1fr 1fr;
 		gap: 1rem;
 	}