From 6da687ffd3199676f9de369e9b6b70e99cb8774a Mon Sep 17 00:00:00 2001
From: Daniel Bulant <danbulant@gmail.com>
Date: Mon, 12 Dec 2022 16:56:34 +0100
Subject: [PATCH] improved home page styles

---
 src/lib/components/anilistItems.svelte | 39 +++++++++++++++-----------
 src/lib/components/item.svelte         |  7 +----
 src/routes/+page.svelte                |  5 +---
 3 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/src/lib/components/anilistItems.svelte b/src/lib/components/anilistItems.svelte
index fcc4937..e342705 100644
--- a/src/lib/components/anilistItems.svelte
+++ b/src/lib/components/anilistItems.svelte
@@ -6,7 +6,7 @@
     import Item from "./item.svelte";
     import { showType } from "./showTypeChooser.svelte";
 
-    export var entries;
+    export var lists;
 
     var isLoading = false;
     async function find(entry) {
@@ -63,20 +63,23 @@
 {/if}
 
 <div class="items" class:list={$showType == "list"}>
-    {#each entries.sort((a, b) => a.priority - b.priority) as entry (entry.media.id)}
-        <div animate:flip transition:blur>
-            <Item
-                r18={entry.media.isAdult}
-                cover={entry.media.coverImage.large}
-                title={entry.media.title.userPreferred}
-                lastChapter={entry.media.chapters}
-                chapterProgress={entry.progress}
-                score={entry.score || "?"}
-                description={entry.notes}
-                coverColor={entry.media.coverImage.color == "null" ? null : entry.media.coverImage.color}
-                on:click={() => find(entry)}
-                />
-        </div>
+    {#each lists as list}
+        <h2>{list.name}</h2>
+        {#each list.entries.sort((a, b) => a.priority - b.priority) as entry (entry.media.id)}
+            <div animate:flip transition:blur>
+                <Item
+                    r18={entry.media.isAdult}
+                    cover={entry.media.coverImage.large}
+                    title={entry.media.title.userPreferred}
+                    lastChapter={entry.media.chapters}
+                    chapterProgress={entry.progress}
+                    score={entry.score || "?"}
+                    description={entry.notes}
+                    coverColor={entry.media.coverImage.color == "null" ? null : entry.media.coverImage.color}
+                    on:click={() => find(entry)}
+                    />
+            </div>
+        {/each}
     {/each}
 </div>
 
@@ -90,12 +93,16 @@
         z-index: 100;
         background: black;
         color: white;
+    }
+    h2 {
+        grid-column: 1 / -1;
+        margin: 0;
     }
 	.items {
 		display: grid;
   		align-items: flex-start;
 		gap: 1rem;
-		grid-template-columns: repeat(auto-fit, 11rem);
+		grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
 	}
 	.items.list {
 		grid-template-columns: 1fr;
diff --git a/src/lib/components/item.svelte b/src/lib/components/item.svelte
index ad743d4..ae0a2e1 100644
--- a/src/lib/components/item.svelte
+++ b/src/lib/components/item.svelte
@@ -74,10 +74,7 @@
         text-overflow: ellipsis;
     }
     .item.grid {
-        width: 11rem;
-    }
-    .list .item img {
-        height: 10rem;
+        width: 100%;
     }
     h3 {
         margin: 0;
@@ -149,8 +146,6 @@
 	.item img {
         --box-shadow-color: white;
 		border-radius: 5px;
-		max-height: 15rem;
-		width: auto;
         max-width: 100%;
 		box-shadow: 0 0 0 var(--box-shadow-color);
 		transition: .4s box-shadow, .3s max-height, .4s filter;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ded07d1..8165fb0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -149,10 +149,7 @@
 		{:else}
 			<div>
 				{#await userManga then userManga}
-					{#each userManga.data.MediaListCollection.lists as list}
-						<h2>{list.name}</h2>
-						<AnilistItems entries={list.entries} />
-					{/each}
+                    <AnilistItems lists={userManga.data.MediaListCollection.lists} />
 				{/await}
 			</div>
 		{/if}