feat: use floating-ui for better popover positioning
This commit is contained in:
parent
c1b8fe1221
commit
ffe22689eb
@ -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", () => {
|
||||
|
@ -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;
|
||||
|
||||
|
@ -44,6 +44,9 @@
|
||||
<script src="{{$darkMode.Permalink}}"></script>
|
||||
{{partial "katex.html" .}}
|
||||
|
||||
|
||||
<script src="https://unpkg.com/@floating-ui/core@0.7.3"></script>
|
||||
<script src="https://unpkg.com/@floating-ui/dom@0.5.4"></script>
|
||||
{{ $popover := resources.Get "js/popover.js" | resources.Fingerprint "md5" |
|
||||
resources.Minify }}
|
||||
<script src="{{$popover.Permalink}}"></script>
|
||||
|
Loading…
Reference in New Issue
Block a user