diff options
| author | Fuwn <[email protected]> | 2023-12-28 20:04:27 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2023-12-28 20:04:27 -0800 |
| commit | 48b0892454f981b5b3e964b85e30daa087c44814 (patch) | |
| tree | 92662db368dd4457f3dabef6d57100c098f5b73d /src/lib/Media/HoverCover.svelte | |
| parent | feat(media): all title formats (diff) | |
| download | due.moe-48b0892454f981b5b3e964b85e30daa087c44814.tar.xz due.moe-48b0892454f981b5b3e964b85e30daa087c44814.zip | |
refactor(schedule): move hover cover to component
Diffstat (limited to 'src/lib/Media/HoverCover.svelte')
| -rw-r--r-- | src/lib/Media/HoverCover.svelte | 33 |
1 files changed, 33 insertions, 0 deletions
diff --git a/src/lib/Media/HoverCover.svelte b/src/lib/Media/HoverCover.svelte new file mode 100644 index 00000000..a3aea9d6 --- /dev/null +++ b/src/lib/Media/HoverCover.svelte @@ -0,0 +1,33 @@ +<script lang="ts"> + import type { Media } from '$lib/AniList/media'; + import type { SubsPleaseEpisode } from './Anime/Airing/Subtitled/subsPlease'; + + export let hoveredItem: SubsPleaseEpisode | null = null; + export let hoveredMedia: Media | null = null; + export let imageStyle = ''; +</script> + +{#if hoveredItem} + <img + class="hover-image show" + src={hoveredMedia + ? hoveredMedia.coverImage.extraLarge + : `https://subsplease.org${hoveredItem.image_url}`} + alt="Media Cover" + style={imageStyle} + /> +{/if} + +<style> + .hover-image { + position: fixed; + z-index: 1000; + width: 300px; + height: auto; + display: none; + } + + .show { + display: block; + } +</style> |