diff options
| -rw-r--r-- | src/routes/user/[user]/badges/+page.svelte | 55 |
1 files changed, 33 insertions, 22 deletions
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} |