From 136f3497544872e23d0d9a17af9cc35cba450c71 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Mon, 22 Apr 2024 01:41:22 -0700
Subject: feat(list): parallax covers

---
 src/lib/List/Anime/CleanAnimeList.svelte | 10 ++++++----
 src/lib/List/Manga/CleanMangaList.svelte | 10 ++++++----
 src/lib/List/covers.css                  |  2 +-
 3 files changed, 13 insertions(+), 9 deletions(-)

(limited to 'src/lib/List')

diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 6d6f038d..58b8236f 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -17,6 +17,7 @@
 	import identity from '$stores/identity';
 	import Tooltip from '../../Tooltip/LinkedTooltip.svelte';
 	import '../covers.css';
+	import ParallaxImage from '$lib/Image/ParallaxImage.svelte';
 
 	export let media: Media[];
 	export let title: any;
@@ -101,12 +102,13 @@
 							target="_blank"
 						>
 							<span class="cover-container">
-								<img
-									class={`cover${
+								<ParallaxImage
+									source={anime.coverImage.extraLarge}
+									alternativeText="Cover"
+									limit={12.5}
+									classes={`cover${
 										anime.isAdult && $settings.displayBlurAdultContent ? ' adult' : ''
 									}`}
-									src={anime.coverImage.extraLarge}
-									alt="Cover"
 								/>
 							</span>
 						</a>
diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index 8d76931e..384ec706 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -15,6 +15,7 @@
 	import Tooltip from '../../Tooltip/LinkedTooltip.svelte';
 	import '../covers.css';
 	import { mediaTitle } from '../mediaTitle';
+	import ParallaxImage from '$lib/Image/ParallaxImage.svelte';
 
 	export let media: Media[];
 	export let cleanCache: () => void;
@@ -120,12 +121,13 @@
 							target="_blank"
 						>
 							<span class="cover-container">
-								<img
-									class={`cover${
+								<ParallaxImage
+									source={manga.coverImage.extraLarge}
+									alternativeText="Cover"
+									limit={12.5}
+									classes={`cover${
 										manga.isAdult && $settings.displayBlurAdultContent ? ' adult' : ''
 									}`}
-									src={manga.coverImage.extraLarge}
-									alt="Cover"
 								/>
 							</span>
 						</a>
diff --git a/src/lib/List/covers.css b/src/lib/List/covers.css
index 319d5782..3cd89baa 100644
--- a/src/lib/List/covers.css
+++ b/src/lib/List/covers.css
@@ -58,7 +58,7 @@
 }
 
 .cover-container {
-	overflow: hidden;
+	/* overflow: hidden; */
 	display: flex;
 	justify-content: center;
 	align-items: center;
-- 
cgit v1.2.3