From ffe22689eb43f42afc2d6bcf9b8b190b19a7e5d1 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Wed, 13 Jul 2022 22:01:50 +0000
Subject: [PATCH] feat: use floating-ui for better popover positioning
---
assets/styles/base.scss | 9 ++-------
assets/js/popover.js | 11 +++++++++++
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 @@
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 @@
cursor: pointer;
& > p {
display: inline;
- padding-left: 0.5em;
+ padding: 0 0.5em 0 1em;
}
}
@@ -534,12 +534,10 @@
1% {
display: inline-block;
opacity: 0;
- transform: translate(-50%, 40%);
}
100% {
opacity: 1;
visibility: visible;
- transform: translate(-50%, 20%);
}
}
@@ -550,9 +548,9 @@
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 @@
&.visible {
opacity: 1;
visibility: visible;
- transform: translate(-50%, 20%);
display: inline-block;
animation: dropin 0.2s ease;
}
@@ -590,8 +587,6 @@
}
}
-
-
#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 @@
<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>
--
Gitblit v1.10.0