diff options
| author | Fuwn <[email protected]> | 2024-04-16 20:09:13 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-04-16 20:09:13 -0700 |
| commit | b86c92cdf2a4de03a83bf2ce3b795b42dc7b658d (patch) | |
| tree | 1e8f14ba476e237e58da89c4acf816da2f1dba60 /src/lib | |
| parent | feat(tooltip): better list implementation (diff) | |
| download | due.moe-b86c92cdf2a4de03a83bf2ce3b795b42dc7b658d.tar.xz due.moe-b86c92cdf2a4de03a83bf2ce3b795b42dc7b658d.zip | |
feat(badges): use sliding tooltip for badge wall
Diffstat (limited to 'src/lib')
| -rw-r--r-- | src/lib/FallbackBadge.svelte | 43 | ||||
| -rw-r--r-- | src/lib/List/Anime/Tooltip.svelte | 2 |
2 files changed, 22 insertions, 23 deletions
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> |