alrayyes/wiki
1
0
Fork 0
mirror of https://github.com/alrayyes/wiki.git synced 2024-11-26 13:26:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

feat: use floating-ui for better popover positioning

Browse source
This commit is contained in:
Jacky Zhao 2022-07-13 15:01:50 -07:00
parent c1b8fe1221
commit ffe22689eb
3 changed files with 16 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
assets/js/popover.js
View file

@ -46,7 +46,18 @@ function initPopover(baseURL, useContextualBacklinks, renderLatex) {
throwOnError: false throwOnError: false
}) })
} }
li.addEventListener("mouseover", () => { 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") el.classList.add("visible")
}) })
li.addEventListener("mouseout", () => { li.addEventListener("mouseout", () => {

9
assets/styles/base.scss
View file

@ -389,7 +389,7 @@ header {
cursor: pointer; cursor: pointer;
& > p { & > p {
display: inline; display: inline;
padding-left: 0.5em; padding: 0 0.5em 0 1em;
} }
} }
@ -534,12 +534,10 @@ header {
1% { 1% {
display: inline-block; display: inline-block;
opacity: 0; opacity: 0;
transform: translate(-50%, 40%);
} }
100% { 100% {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
transform: translate(-50%, 20%);
} }
} }
@ -550,9 +548,9 @@ header {
display: none; display: none;
background-color: var(--light); background-color: var(--light);
padding: 1em; padding: 1em;
margin: 1em;
border: 1px solid var(--outlinegray); border: 1px solid var(--outlinegray);
border-radius: 5px; border-radius: 5px;
transform: translate(-50%, 40%);
pointer-events: none; pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease; transition: opacity 0.2s ease, transform 0.2s ease;
user-select: none; user-select: none;
@ -566,7 +564,6 @@ header {
&.visible { &.visible {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
transform: translate(-50%, 20%);
display: inline-block; display: inline-block;
animation: dropin 0.2s ease; animation: dropin 0.2s ease;
} }
@ -590,8 +587,6 @@ header {
} }
} }
#contact_buttons ul { #contact_buttons ul {
list-style-type: none; list-style-type: none;

3
layouts/partials/head.html
View file

@ -44,6 +44,9 @@
<script src="{{$darkMode.Permalink}}"></script> <script src="{{$darkMode.Permalink}}"></script>
{{partial "katex.html" .}} {{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" | {{ $popover := resources.Get "js/popover.js" | resources.Fingerprint "md5" |
resources.Minify }} resources.Minify }}
<script src="{{$popover.Permalink}}"></script> <script src="{{$popover.Permalink}}"></script>