diff options
| author | Fuwn <[email protected]> | 2024-04-22 06:48:01 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-04-22 06:48:01 -0700 |
| commit | 7737907cbb4db3095794b6c7cd0a502d7474032d (patch) | |
| tree | a6535358587bc4ec13339d6dbf1662427ccd7818 | |
| parent | feat(list): pin text, transform cover (diff) | |
| download | due.moe-7737907cbb4db3095794b6c7cd0a502d7474032d.tar.xz due.moe-7737907cbb4db3095794b6c7cd0a502d7474032d.zip | |
feat(badges): use static y for tooltip
| -rw-r--r-- | src/lib/User/BadgeWall/FallbackBadge.svelte | 1 | ||||
| -rw-r--r-- | src/routes/user/[user]/badges/+page.svelte | 98 |
2 files changed, 50 insertions, 49 deletions
diff --git a/src/lib/User/BadgeWall/FallbackBadge.svelte b/src/lib/User/BadgeWall/FallbackBadge.svelte index f6eee93f..3e45afc7 100644 --- a/src/lib/User/BadgeWall/FallbackBadge.svelte +++ b/src/lib/User/BadgeWall/FallbackBadge.svelte @@ -65,7 +65,6 @@ }${badge.description ? `\n${badge.description}` : ''}${ badge.designer ? `\nDesigner: ${badge.designer}` : '' }${badge.source ? `\nSource: ${badge.source}` : ''}`} - id={`badge-${badge.id}`} pin={`badge-${badge.id}`} pinPosition="top" relative diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte index 5dd2d554..d0c9e26b 100644 --- a/src/routes/user/[user]/badges/+page.svelte +++ b/src/routes/user/[user]/badges/+page.svelte @@ -831,60 +831,62 @@ <div class="badges"> {#each badges as badge} - {#if editMode} - <Tooltip - content={`${ - badge.time - ? $locale().dateFormatter(databaseTimeToDate(badge.time)) - : '' - }${badge.description ? `\n${badge.description}` : ''}${ - badge.designer ? `\nDesigner: ${badge.designer}` : '' - }${badge.source ? `\nSource: ${badge.source}` : ''}`} - id={`badge-${badge.id}`} - pin={`badge-${badge.id}`} - pinPosition="top" - > - <a - href={`#`} - on:click={() => { - selectedBadge = badge; - - const hiddenInput = document.querySelector('input[name="hidden"]'); - - if (hiddenInput instanceof HTMLInputElement) - hiddenInput.value = badge.hidden ? 'Hidden' : 'Shown'; - }} - title={`${dev ? `${badge.id}\n` : ''}${ + <div id={`badge-${badge.id}`}> + {#if editMode} + <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}` : ''}`} + pin={`badge-${badge.id}`} + pinPosition="top" + relative > - <FallbackImage - source={cdn(thumbnail(badge.image))} - alternative={badge.description} - fallback={thumbnail(badge.image)} - style={badge.hidden || badge.shadow_hidden - ? 'filter: grayscale(100%); opacity: 50%;' - : ''} - /> - </a> - </Tooltip> - {:else} - <FallbackBadge - {badge} - bind:selectedBadge - source={cdn(thumbnail(badge.image))} - alternative={badge.description} - fallback={thumbnail(badge.image)} - hideOnError={preferences.hide_missing_badges} - style={badge.hidden || badge.shadow_hidden - ? 'filter: grayscale(100%); opacity: 50%;' - : ''} - /> - {/if} + <a + href={`#`} + on:click={() => { + selectedBadge = badge; + + const hiddenInput = document.querySelector('input[name="hidden"]'); + + if (hiddenInput instanceof HTMLInputElement) + hiddenInput.value = badge.hidden ? 'Hidden' : 'Shown'; + }} + title={`${dev ? `${badge.id}\n` : ''}${ + 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 || badge.shadow_hidden + ? 'filter: grayscale(100%); opacity: 50%;' + : ''} + /> + </a> + </Tooltip> + {:else} + <FallbackBadge + {badge} + bind:selectedBadge + source={cdn(thumbnail(badge.image))} + alternative={badge.description} + fallback={thumbnail(badge.image)} + hideOnError={preferences.hide_missing_badges} + style={badge.hidden || badge.shadow_hidden + ? 'filter: grayscale(100%); opacity: 50%;' + : ''} + /> + {/if} + </div> {/each} </div> </details> |