diff options
Diffstat (limited to 'src/lib/AuctionPreviewTooltip.svelte')
| -rw-r--r-- | src/lib/AuctionPreviewTooltip.svelte | 27 |
1 files changed, 16 insertions, 11 deletions
diff --git a/src/lib/AuctionPreviewTooltip.svelte b/src/lib/AuctionPreviewTooltip.svelte index 39a2370..26b01d9 100644 --- a/src/lib/AuctionPreviewTooltip.svelte +++ b/src/lib/AuctionPreviewTooltip.svelte @@ -5,9 +5,11 @@ export let preview: PreviewedAuctionData | null let lastPreview: PreviewedAuctionData | null - $: lastPreview = preview ?? lastPreview + $: { + lastPreview = preview ?? lastPreview + } - function onClick(e: MouseEvent) { + function onMouseMove(e: MouseEvent) { // commented out because it doesn't work: sometimes e.target is null when we click a point if (e.target && !(e.target as HTMLElement).closest('.item-auction-history')) { preview = null @@ -16,29 +18,32 @@ } </script> -<svelte:body on:mousemove={onClick} /> +<svelte:body on:mousemove={onMouseMove} /> {#if lastPreview} <div - id="auction-preview-tooltip" - class:hidden={preview === null} - style="left: {lastPreview.pageX}px; top: {lastPreview.pageY}px" + id="auction-preview-tooltip-container" + style={lastPreview ? `left: ${lastPreview.pageX}px; top: ${lastPreview.pageY}px` : undefined} out:fade={{ duration: 100 }} in:fade={{ duration: 100 }} > - <p><b>{lastPreview.auction.coins.toLocaleString()}</b> coins</p> - <time>{new Date(lastPreview.auction.ts * 1000).toLocaleString()}</time> + <div id="auction-preview-tooltip"> + <p><b>{lastPreview.auction.coins.toLocaleString()}</b> coins</p> + <time>{new Date(lastPreview.auction.ts * 1000).toLocaleString()}</time> + </div> </div> {/if} <style> - #auction-preview-tooltip { + #auction-preview-tooltip-container { position: absolute; + pointer-events: none; + transition: left 200ms linear, top 200ms linear; + } + #auction-preview-tooltip { border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.1); padding: 0.5em; - transition: left 200ms, top 200ms; - pointer-events: none; } p { |