From d4c420f7a387d91e50d5995d311c23b84050040b Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 18 Apr 2024 16:33:49 -0700
Subject: feat(badges): use linked tooltip for edit mode

---
 src/routes/user/[user]/badges/+page.svelte | 55 ++++++++++++++++++------------
 1 file changed, 33 insertions(+), 22 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 4aa205d9..80316ea3 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -24,6 +24,7 @@
 	import type { UserPreferences } from '$lib/Database/userPreferences.js';
 	import { browser } from '$app/environment';
 	// import { io } from 'socket.io-client';
+	import Tooltip from '$lib/Tooltip/LinkedTooltip.svelte';
 
 	export let data;
 
@@ -767,34 +768,44 @@
 									<div class="badges">
 										{#each badges as badge}
 											{#if editMode}
-												<a
-													href={`#`}
-													on:click={() => {
-														selectedBadge = badge;
-
-														const hiddenInput = document.querySelector('input[name="hidden"]');
-
-														if (hiddenInput instanceof HTMLInputElement)
-															hiddenInput.value = badge.hidden ? 'Hidden' : 'Shown';
-													}}
-													id={`badge-${badge.id}`}
-													title={`${
+												<Tooltip
+													content={`${
 														badge.time
 															? $locale().dateFormatter(databaseTimeToDate(badge.time))
 															: ''
-													}${badge.description ? `, ${badge.description}` : ''}${
+													}${badge.description ? `\n${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"
 												>
-													<FallbackImage
-														source={cdn(thumbnail(badge.image))}
-														alternative={badge.description}
-														fallback={thumbnail(badge.image)}
-														style={badge.hidden ? 'filter: grayscale(100%); opacity: 50%;' : ''}
-													/>
-												</a>
+													<a
+														href={`#`}
+														on:click={() => {
+															selectedBadge = badge;
+
+															const hiddenInput = document.querySelector('input[name="hidden"]');
+
+															if (hiddenInput instanceof HTMLInputElement)
+																hiddenInput.value = badge.hidden ? 'Hidden' : 'Shown';
+														}}
+														title={`${
+															badge.time
+																? $locale().dateFormatter(databaseTimeToDate(badge.time))
+																: ''
+														}${badge.description ? `, ${badge.description}` : ''}${
+															badge.designer ? `\nDesigner: ${badge.designer}` : ''
+														}${badge.source ? `\nSource: ${badge.source}` : ''}`}
+													>
+														<FallbackImage
+															source={cdn(thumbnail(badge.image))}
+															alternative={badge.description}
+															fallback={thumbnail(badge.image)}
+															style={badge.hidden ? 'filter: grayscale(100%); opacity: 50%;' : ''}
+														/>
+													</a>
+												</Tooltip>
 											{:else}
 												<FallbackBadge
 													{badge}
-- 
cgit v1.2.3