From ffe22689eb43f42afc2d6bcf9b8b190b19a7e5d1 Mon Sep 17 00:00:00 2001 From: Jacky Zhao Date: Wed, 13 Jul 2022 15:01:50 -0700 Subject: [PATCH] feat: use floating-ui for better popover positioning --- assets/js/popover.js | 11 +++++++++++ assets/styles/base.scss | 9 ++------- layouts/partials/head.html | 3 +++ 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/assets/js/popover.js b/assets/js/popover.js index 494cd84..8eb637d 100644 --- a/assets/js/popover.js +++ b/assets/js/popover.js @@ -46,7 +46,18 @@ function initPopover(baseURL, useContextualBacklinks, renderLatex) { throwOnError: false }) } + li.addEventListener("mouseover", () => { + // fix tooltip positioning + window.FloatingUIDOM.computePosition(li, el, { + middleware: [window.FloatingUIDOM.offset(15), window.FloatingUIDOM.inline(), window.FloatingUIDOM.shift()], + }).then(({ x, y }) => { + Object.assign(el.style, { + left: `${x}px`, + top: `${y}px`, + }) + }) + el.classList.add("visible") }) li.addEventListener("mouseout", () => { diff --git a/assets/styles/base.scss b/assets/styles/base.scss index 4426abb..8898ec3 100644 --- a/assets/styles/base.scss +++ b/assets/styles/base.scss @@ -389,7 +389,7 @@ header { cursor: pointer; & > p { display: inline; - padding-left: 0.5em; + padding: 0 0.5em 0 1em; } } @@ -534,12 +534,10 @@ header { 1% { display: inline-block; opacity: 0; - transform: translate(-50%, 40%); } 100% { opacity: 1; visibility: visible; - transform: translate(-50%, 20%); } } @@ -550,9 +548,9 @@ header { display: none; background-color: var(--light); padding: 1em; + margin: 1em; border: 1px solid var(--outlinegray); border-radius: 5px; - transform: translate(-50%, 40%); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; user-select: none; @@ -566,7 +564,6 @@ header { &.visible { opacity: 1; visibility: visible; - transform: translate(-50%, 20%); display: inline-block; animation: dropin 0.2s ease; } @@ -590,8 +587,6 @@ header { } } - - #contact_buttons ul { list-style-type: none; diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 0890983..e3c6967 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -44,6 +44,9 @@ {{partial "katex.html" .}} + + + {{ $popover := resources.Get "js/popover.js" | resources.Fingerprint "md5" | resources.Minify }}