wassname/template
1
0
Fork 0
mirror of https://github.com/wassname/template.git synced 2026-07-19 11:28:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixing hoverbox bug on safari

Browse Source
This commit is contained in:
Shan Carter
2017-10-24 11:35:13 -07:00
parent 33714c9ca4
commit 4c9c387760
3 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/d-cite.js
+1 -1
View File
@@ -36,7 +36,7 @@ figcaption .citation-number {
}
.container {
position: fixed;
position: absolute;
width: 100%;
left: 0;
z-index: 10000;
src/components/d-footnote.js
+1 -1
View File
@@ -26,7 +26,7 @@ span {
}
.container {
position: fixed;
position: absolute;
width: 100%;
left: 0;
z-index: 10000;
src/helpers/hover-box.js
+22 -22
View File
@@ -1,25 +1,25 @@
function make_hover_css(target_node, pos) {
const pretty = window.innerWidth > 600;
const padding = pretty? 18 : 12;
const outer_padding = pretty ? 18 : 0;
// const bbox = document.querySelector('body').getBoundingClientRect();
const bbox = target_node.offsetParent.getBoundingClientRect();
let left = pos[0] - bbox.left, top = pos[1] - bbox.top;
let width = Math.min(window.innerWidth-2*outer_padding, 648);
left = Math.min(left, window.innerWidth-width-outer_padding);
width = width - 2 * padding;
return (`position: absolute;
background-color: #FFF;
opacity: 0.95;
max-width: ${width}px;
top: ${top}px;
left: ${left}px;
border: 1px solid rgba(0, 0, 0, 0.25);
padding: ${padding}px;
border-radius: ${pretty? 3 : 0}px;
box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.2);
z-index: ${1e6};`);
}
// function make_hover_css(target_node, pos) {
// const pretty = window.innerWidth > 600;
// const padding = pretty? 18 : 12;
// const outer_padding = pretty ? 18 : 0;
// // const bbox = document.querySelector('body').getBoundingClientRect();
// const bbox = target_node.offsetParent.getBoundingClientRect();
// let left = pos[0] - bbox.left, top = pos[1] - bbox.top;
// let width = Math.min(window.innerWidth-2*outer_padding, 648);
// left = Math.min(left, window.innerWidth-width-outer_padding);
// width = width - 2 * padding;
// return (`position: absolute;
// background-color: #FFF;
// opacity: 0.95;
// max-width: ${width}px;
// top: ${top}px;
// left: ${left}px;
// border: 1px solid rgba(0, 0, 0, 0.25);
// padding: ${padding}px;
// border-radius: ${pretty? 3 : 0}px;
// box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.2);
// z-index: ${1e6};`);
// }
export class HoverBox {