RomanNum3ral
/
vert
mirror of https://github.com/VERT-sh/VERT.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: blur and tooltip fixes 

tooltip appends to body to fix overflow issues, fix scroll
This commit is contained in:
Maya 2025-09-02 21:06:39 +08:00
parent 858703c0fc
commit 416eed8e48
2 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/lib/components/visual/Tooltip.svelte
View File

@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts">
import { fade } from "$lib/animation"; import { fade } from "$lib/animation";
interface Props { interface Props {
children: () => any; children: () => any;
text: string; text: string;
@ -12,6 +11,7 @@
let showTooltip = $state(false); let showTooltip = $state(false);
let timeout: number = 0; let timeout: number = 0;
let triggerElement: HTMLElement; let triggerElement: HTMLElement;
let tooltipElement = $state<HTMLElement>();
let tooltipPosition = $state({ x: 0, y: 0 }); let tooltipPosition = $state({ x: 0, y: 0 });
function show() { function show() {
@ -53,6 +53,18 @@
showTooltip = false; showTooltip = false;
clearTimeout(timeout); clearTimeout(timeout);
} }
$effect(() => {
if (showTooltip && tooltipElement) {
document.body.appendChild(tooltipElement);
}
return () => {
if (tooltipElement && tooltipElement.parentNode === document.body) {
document.body.removeChild(tooltipElement);
}
};
});
</script> </script>
<span <span
@ -71,6 +83,7 @@
{#if showTooltip} {#if showTooltip}
<span <span
bind:this={tooltipElement}
class="tooltip tooltip-{position}" class="tooltip tooltip-{position}"
style="left: {tooltipPosition.x}px; top: {tooltipPosition.y}px;" style="left: {tooltipPosition.x}px; top: {tooltipPosition.y}px;"
transition:fade={{ transition:fade={{

22
src/routes/+page.svelte
View File

@ -76,7 +76,7 @@
return ""; return "";
}; };
let scrollContainers: HTMLElement[] = []; let scrollContainers: HTMLElement[] = $state([]);
// svelte-ignore state_referenced_locally // svelte-ignore state_referenced_locally
let showBlur = $state(Array(Object.keys(status).length).fill(false)); let showBlur = $state(Array(Object.keys(status).length).fill(false));
@ -159,7 +159,7 @@
defer defer
> >
<div <div
class="flex flex-col gap-4 h-[12.25rem]" class="flex flex-col gap-4 h-[12.25rem] relative"
bind:this={scrollContainers[i]} bind:this={scrollContainers[i]}
> >
{#if key === "Video"} {#if key === "Video"}
@ -210,7 +210,7 @@
](), ](),
})} })}
</p> </p>
<div class="flex flex-col items-center"> <div class="flex flex-col items-center relative">
<b <b
>{m[ >{m[
"upload.cards.supported_formats" "upload.cards.supported_formats"
@ -226,7 +226,7 @@
? format.slice(0, -1) ? format.slice(0, -1)
: format} : format}
<span <span
class="text-sm font-normal flex items-center" class="text-sm font-normal flex items-center relative"
> >
{#if isPartial} {#if isPartial}
<Tooltip <Tooltip
@ -249,15 +249,15 @@
{/each} {/each}
</p> </p>
</div> </div>
<!-- blur at bottom if scrollable -->
{#if showBlur[i]}
<div
class="absolute left-0 bottom-0 w-full h-10 pointer-events-none"
style={`background: linear-gradient(to top, var(--bg-panel), transparent 100%);`}
></div>
{/if}
</div> </div>
</OverlayScrollbarsComponent> </OverlayScrollbarsComponent>
<!-- blur at bottom if scrollable - positioned relative to the card container -->
{#if showBlur[i]}
<div
class="absolute left-0 bottom-0 w-full h-10 pointer-events-none"
style={`background: linear-gradient(to top, var(--bg-panel), transparent 100%);`}
></div>
{/if}
</div> </div>
</div> </div>
{/each} {/each}