diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/Image/ParallaxImage.svelte | 7 | ||||
| -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 |
4 files changed, 17 insertions, 12 deletions
diff --git a/src/lib/Image/ParallaxImage.svelte b/src/lib/Image/ParallaxImage.svelte index cebbfa2b..69f53b67 100644 --- a/src/lib/Image/ParallaxImage.svelte +++ b/src/lib/Image/ParallaxImage.svelte @@ -8,8 +8,9 @@ export let alternativeText: string; export let classes = ''; export let style = ''; - export const factor = 1.25; - const limit = 300 * 1.75; + export let factor = 1.25; + export let limit = 300 * 1.75; + export let borderRadius = '8px'; let badgeReference: HTMLImageElement; const mouse = tweened({ x: 0, y: 0 }, { duration, easing }); @@ -37,7 +38,7 @@ bind:this={badgeReference} style={`transform: perspective(1000px) rotateX(${$mouse.y / 10}deg) rotateY(${ -$mouse.x / 10 - }deg); ${style}`} + }deg); border-radius: ${borderRadius}; ${style}`} alt={alternativeText} on:mousemove={handleMouseMove} on:mouseleave={handleMouseLeave} 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; |