diff options
| author | Fuwn <[email protected]> | 2024-01-04 07:01:03 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-01-04 07:01:03 -0800 |
| commit | bee25f2340bb858209fd918066a1abe45de3d3a2 (patch) | |
| tree | 7f723696d38068be15a815da10abe30b0bef9292 /src/lib | |
| parent | fix(html): limit list height (diff) | |
| download | due.moe-bee25f2340bb858209fd918066a1abe45de3d3a2.tar.xz due.moe-bee25f2340bb858209fd918066a1abe45de3d3a2.zip | |
feat(cover): better defaults
Diffstat (limited to 'src/lib')
| -rw-r--r-- | src/lib/Media/Cover/HoverCover.svelte | 5 | ||||
| -rw-r--r-- | src/lib/Media/Cover/hoverCover.ts | 2 | ||||
| -rw-r--r-- | src/lib/Tools/Schedule/Tool.svelte | 4 |
3 files changed, 6 insertions, 5 deletions
diff --git a/src/lib/Media/Cover/HoverCover.svelte b/src/lib/Media/Cover/HoverCover.svelte index b0c15fc5..7e1f0e89 100644 --- a/src/lib/Media/Cover/HoverCover.svelte +++ b/src/lib/Media/Cover/HoverCover.svelte @@ -6,6 +6,7 @@ export let hoveredItem: SubsPleaseEpisode | null = null; export let hoveredMedia: Media | null = null; export let imageStyle = ''; + export let width = 250; </script> {#if hovering} @@ -15,7 +16,7 @@ ? hoveredMedia.coverImage.extraLarge : `https://subsplease.org${hoveredItem?.image_url}`} alt="Media Cover" - style={imageStyle} + style={`width: ${width}px; ${imageStyle}`} /> {/if} @@ -23,9 +24,9 @@ .hover-image { position: fixed; z-index: 1000; - width: 300px; height: auto; display: none; + border-radius: 3px; } .show { diff --git a/src/lib/Media/Cover/hoverCover.ts b/src/lib/Media/Cover/hoverCover.ts index 97a41f35..0a162f3e 100644 --- a/src/lib/Media/Cover/hoverCover.ts +++ b/src/lib/Media/Cover/hoverCover.ts @@ -28,7 +28,7 @@ interface OnMouseMove { style: string; } -export const onMouseMove = (event: MouseEvent, imageWidth = 300) => { +export const onMouseMove = (event: MouseEvent, imageWidth = 250) => { const offset = 10; let imageLeft = 0; let imageTop = 0; diff --git a/src/lib/Tools/Schedule/Tool.svelte b/src/lib/Tools/Schedule/Tool.svelte index d9bdeb94..6c7ee097 100644 --- a/src/lib/Tools/Schedule/Tool.svelte +++ b/src/lib/Tools/Schedule/Tool.svelte @@ -136,7 +136,7 @@ hoveredMedia = response.media; }} on:mousemove={(e) => { - const response = onMouseMove(e); + const response = onMouseMove(e, 300); imageStyle = response.style; }} @@ -190,7 +190,7 @@ <Crunchyroll /> </details> -<HoverCover {hoveredItem} {hoveredMedia} {imageStyle} {hovering} /> +<HoverCover {hoveredItem} {hoveredMedia} {imageStyle} {hovering} width={300} /> <style> #list-container { |