diff options
| author | Fuwn <[email protected]> | 2024-04-22 01:41:22 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-04-22 01:41:22 -0700 |
| commit | 136f3497544872e23d0d9a17af9cc35cba450c71 (patch) | |
| tree | 00604292490e7732b746b8fad7d47b076c1f84b4 /src/lib/List | |
| parent | refactor(lib): move componenets to modules (diff) | |
| download | due.moe-136f3497544872e23d0d9a17af9cc35cba450c71.tar.xz due.moe-136f3497544872e23d0d9a17af9cc35cba450c71.zip | |
feat(list): parallax covers
Diffstat (limited to 'src/lib/List')
| -rw-r--r-- | src/lib/List/Anime/CleanAnimeList.svelte | 10 | ||||
| -rw-r--r-- | src/lib/List/Manga/CleanMangaList.svelte | 10 | ||||
| -rw-r--r-- | src/lib/List/covers.css | 2 |
3 files changed, 13 insertions, 9 deletions
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; |