From ea72132b4394b64e6461b8a141ddba57b80d1b5a Mon Sep 17 00:00:00 2001
From: Daniel Bulant <danbulant@gmail.com>
Date: Sat, 10 Dec 2022 16:40:31 +0100
Subject: [PATCH] fix art list for non-mangadex images

---
 src/lib/components/artList.svelte | 33 +++++++++++++++++++++++--------
 src/routes/[manga]/+page.svelte   | 12 ++++++-----
 2 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/artList.svelte b/src/lib/components/artList.svelte
index f2f150d..91f529a 100644
--- a/src/lib/components/artList.svelte
+++ b/src/lib/components/artList.svelte
@@ -11,7 +11,9 @@
     }[] = [];
 
     let list: any;
-    $: list = request("cover?manga[]=" + mangaId + "&locales[]=en&locales[]=uk&locales[]=ja");
+    $: list = request(
+        "cover?manga[]=" + mangaId + "&locales[]=en&locales[]=uk&locales[]=ja"
+    );
 
     export var selectedImage = null;
 </script>
@@ -21,14 +23,26 @@
         Loading art
     {:then list}
         {#each list.data.sort((a, b) => a.attributes.volume - b.attributes.volume) as item}
-            <img on:click={() => selectedImage = `${imageproxy}https://uploads.mangadex.org/covers/${mangaId}/${item.attributes.fileName}.512.jpg`} width=512 height=805 src="{imageproxy}https://uploads.mangadex.org/covers/{mangaId}/{item.attributes.fileName}.512.jpg" alt="" draggable={false}>
+            <img
+                on:click={() => (selectedImage = `${imageproxy}https://uploads.mangadex.org/covers/${mangaId}/${item.attributes.fileName}.512.jpg`)}
+                width="512"
+                height="805"
+                src="{imageproxy}https://uploads.mangadex.org/covers/{mangaId}/{item.attributes.fileName}.512.jpg"
+                alt=""
+                draggable={false} />
         {/each}
     {/await}
     {#each additionalList as item}
-        <img on:click={() => selectedImage = item.src} style="{item.color ? "--box-shadow-color: " + item.color : ""};" width={item.width} height={item.height} src="{item.src}" alt="{item.alt}" draggable={false}>
+        <img
+            on:click={() => (selectedImage = item.src)}
+            style="{item.color ? '--box-shadow-color: ' + item.color : ''}; width: 100%; height: 100%; {item.width ? `grid-column: span ${item.width}` : ""}; {item.height ? `grid-row: span ${item.height}` : ""};"
+            src={item.src}
+            alt={item.alt}
+            draggable={false} />
     {/each}
 </div>
-    
+
+
 <style>
     div {
         display: grid;
@@ -43,15 +57,18 @@
         height: 10rem;
         width: auto;
         --box-shadow-color: white;
-        box-shadow: 0 0 0 0 var(--box-shadow-color);
-        transition: box-shadow 0.2s ease-in-out;
+        object-fit: contain;
+        transition: filter 0.2s ease-in-out;
+        filter: drop-shadow(0 0 0 0 var(--box-shadow-color));
     }
     div img:first-child {
         grid-column: 1 / span 2;
         grid-row: 1 / span 2;
         height: 20rem;
     }
-    div img:hover, div img:active, div img:focus {
-        box-shadow: 0 0 0.5rem var(--box-shadow-color);
+    div img:hover,
+    div img:active,
+    div img:focus {
+        filter: drop-shadow(0 0 0.5rem var(--box-shadow-color));
     }
 </style>
\ No newline at end of file
diff --git a/src/routes/[manga]/+page.svelte b/src/routes/[manga]/+page.svelte
index 2378ac2..93192fd 100644
--- a/src/routes/[manga]/+page.svelte
+++ b/src/routes/[manga]/+page.svelte
@@ -54,11 +54,11 @@
     $: if(chapters?.id !== mangaId && !loadingChapters) {
         loadingChapters = true;
         getMangaChapters(mangaId).then(async data => {
-        chapters = data;
-        await tick();
-        swiper.slideToClosest();
+            chapters = data;
+            await tick();
+            swiper.slideToClosest();
             loadingChapters = false;
-    });
+        });
     }
 
 
@@ -319,7 +319,9 @@
             additionalImages.push({
                 src: data.bannerImage,
                 alt: "Banner image",
-                color: data.coverImage.color
+                color: data.coverImage.color,
+                height: 1,
+                width: 3
             });
             additionalImages = additionalImages;
         }