From b86c92cdf2a4de03a83bf2ce3b795b42dc7b658d Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Tue, 16 Apr 2024 20:09:13 -0700
Subject: feat(badges): use sliding tooltip for badge wall

---
 src/lib/FallbackBadge.svelte      | 43 +++++++++++++++++++--------------------
 src/lib/List/Anime/Tooltip.svelte |  2 +-
 2 files changed, 22 insertions(+), 23 deletions(-)

(limited to 'src/lib')

diff --git a/src/lib/FallbackBadge.svelte b/src/lib/FallbackBadge.svelte
index 3a5e39e3..bd056deb 100644
--- a/src/lib/FallbackBadge.svelte
+++ b/src/lib/FallbackBadge.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import locale from '$stores/locale';
 	import type { Badge } from './Database/userBadges';
-	import tooltip from './Tooltip/tooltip';
+	import Tooltip from './List/Anime/Tooltip.svelte';
 	import { databaseTimeToDate } from './Utility/time';
 
 	export let source: string | null | undefined;
@@ -46,32 +46,31 @@
 </script>
 
 {#if replaceCount < maxReplaceCount}
-	<a
-		href={badge.post}
-		target="_blank"
-		id={`badge-${badge.id}`}
-		class="badge-container badge"
-		title={`${badge.time ? $locale().dateFormatter(databaseTimeToDate(badge.time)) : ''}${
+	<Tooltip
+		content={`${badge.time ? $locale().dateFormatter(databaseTimeToDate(badge.time)) : ''}${
 			badge.description ? `, ${badge.description}` : ''
 		}${badge.designer ? `\nDesigner: ${badge.designer}` : ''}${
 			badge.source ? `\nSource: ${badge.source}` : ''
 		}`}
-		use:tooltip
-		data-tooltipPin={`badge-${badge.id}`}
+		id={`badge-${badge.id}`}
+		pin={`badge-${badge.id}`}
+		pinPosition="top"
 	>
-		<img
-			src={source}
-			alt={alternative}
-			loading="lazy"
-			class="badge"
-			bind:this={badgeReference}
-			on:mousemove={handleMouseMove}
-			on:mouseleave={handleMouseLeave}
-			style="transform: perspective(1000px) rotateX({mouseY / 10}deg) rotateY({-mouseX /
-				10}deg); ${style}"
-			on:error={(e) => delayedReplace(e, fallback)}
-		/>
-	</a>
+		<a href={badge.post} target="_blank" class="badge-container badge">
+			<img
+				src={source}
+				alt={alternative}
+				loading="lazy"
+				class="badge"
+				bind:this={badgeReference}
+				on:mousemove={handleMouseMove}
+				on:mouseleave={handleMouseLeave}
+				style="transform: perspective(1000px) rotateX({mouseY / 10}deg) rotateY({-mouseX /
+					10}deg); ${style}"
+				on:error={(e) => delayedReplace(e, fallback)}
+			/>
+		</a>
+	</Tooltip>
 {:else if !hideOnError}
 	<img src={error} alt="Not found" loading="lazy" class="badge" />
 {/if}
diff --git a/src/lib/List/Anime/Tooltip.svelte b/src/lib/List/Anime/Tooltip.svelte
index b9884965..7857a58b 100644
--- a/src/lib/List/Anime/Tooltip.svelte
+++ b/src/lib/List/Anime/Tooltip.svelte
@@ -183,7 +183,7 @@
 				in:fade={{ duration: tooltipTransitionTime }}
 				out:fade={{ duration: tooltipTransitionTime }}
 			>
-				{@html content}
+				{@html content.replace(/\n/g, '<br>')}
 			</span>
 		{/key}
 	</div>
-- 
cgit v1.2.3