From 416127fa5af2b627373f6f5577195007a6b48354 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Fri, 26 Apr 2024 17:00:07 -0700
Subject: feat(schedule): better tooltip

---
 src/lib/Schedule/Days.svelte | 93 ++++++++++++++++++++++++++++----------------
 1 file changed, 59 insertions(+), 34 deletions(-)

(limited to 'src/lib')

diff --git a/src/lib/Schedule/Days.svelte b/src/lib/Schedule/Days.svelte
index de749d8c..c0cacb0e 100644
--- a/src/lib/Schedule/Days.svelte
+++ b/src/lib/Schedule/Days.svelte
@@ -9,6 +9,7 @@
 	import CoverBypass from './CoverBypass.svelte';
 	import '$lib/List/covers.css';
 	import ParallaxImage from '$lib/Image/ParallaxImage.svelte';
+	import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
 
 	export let subsPlease: SubsPlease;
 	export let scheduledMedia: Partial<Media[]>;
@@ -69,7 +70,7 @@
 	};
 </script>
 
-{#each Object.entries(shiftSubsPleaseSchedule(subsPlease.schedule)) as [day, scheduleEntry]}
+{#each Object.entries(shiftSubsPleaseSchedule(subsPlease.schedule)) as [day, scheduleEntry], dayIndex}
 	<details
 		open
 		class="list"
@@ -79,42 +80,50 @@
 
 		{#if !$settings.displayScheduleListMode && !forceListMode}
 			<div class="covers">
-				{#each Object.values(scheduleEntry) as entry}
+				{#each Object.values(scheduleEntry) as entry, entryIndex}
 					{@const media = associateMedia(scheduledMedia, entry.title)}
 
-					<div class="cover-card">
-						<a
-							href={outboundLink(
-								media ? media : null,
-								'anime',
-								$settings.displayOutboundLinksTo,
-								media === null,
-								entry.title
-							)}
-							target="_blank"
+					<div class="cover-card" id={`cover-${dayIndex}-${entryIndex}`}>
+						<LinkedTooltip
+							content={media ? media.title.english || media.title.romaji : entry.title}
+							pin={`cover-${dayIndex}-${entryIndex}`}
 						>
-							<div class="cover-card-image">
-								<ParallaxImage
-									source={media
-										? media.coverImage.extraLarge
-										: `https://subsplease.org${entry.image_url}`}
-									limit={12.5}
-									alternativeText="Cover"
-								/>
+							<a
+								href={outboundLink(
+									media ? media : null,
+									'anime',
+									$settings.displayOutboundLinksTo,
+									media === null,
+									entry.title
+								)}
+								target="_blank"
+							>
+								<div class="cover-card-image">
+									<ParallaxImage
+										source={media
+											? media.coverImage.extraLarge
+											: `https://subsplease.org${entry.image_url}`}
+										limit={12.5}
+										alternativeText="Cover"
+									/>
+								</div>
+							</a>
+
+							<div class="cover-title">
+								<div class="cover-title-element">
+									<CoverBypass {media} {entry} cover={false} showTooltip={false} />
+								</div>
+
+								<span class:countdown={$settings.displayCountdownRightAligned}>
+									{#if media && media.nextAiringEpisode}
+										<span class="opaque">
+											{episode(media, day)}{media.episodes ? `/${media.episodes}` : ''} at
+										</span>
+									{/if}
+									{entry.time}
+								</span>
 							</div>
-						</a>
-
-						<div class="cover-title">
-							<CoverBypass {media} {entry} cover={false} showTooltip={false} />
-							<span class:countdown={$settings.displayCountdownRightAligned}>
-								{#if media && media.nextAiringEpisode}
-									<span class="opaque">
-										{episode(media, day)}{media.episodes ? `/${media.episodes}` : ''} at
-									</span>
-								{/if}
-								{entry.time}
-							</span>
-						</div>
+						</LinkedTooltip>
 					</div>
 				{/each}
 			</div>
@@ -145,7 +154,7 @@
 
 <style>
 	.covers {
-		grid-template-columns: repeat(auto-fill, minmax(11.5%, 1fr));
+		grid-template-columns: repeat(auto-fill, minmax(12%, 1fr));
 	}
 
 	.countdown {
@@ -162,4 +171,20 @@
 		break-inside: avoid-column;
 		page-break-inside: avoid;
 	}
+
+	@media (max-width: 800px) {
+		.cover-title {
+			display: none;
+		}
+
+		.cover-card-image {
+			margin-bottom: 0em;
+		}
+	}
+
+	@media (max-width: 1600px) {
+		.cover-title {
+			display: none;
+		}
+	}
 </style>
-- 
cgit v1.2.3