diff --git a/static/css/github-style.css b/static/css/github-style.css index d001ff8..16f3fa6 100644 --- a/static/css/github-style.css +++ b/static/css/github-style.css @@ -111,6 +111,10 @@ body { user-select: none; } +.details-reset>summary { + outline: none; +} + @media (max-width: 768px) { .Header { padding-left: 24px!important; diff --git a/static/js/github-style.js b/static/js/github-style.js index 12dc245..fa0fca3 100644 --- a/static/js/github-style.js +++ b/static/js/github-style.js @@ -247,12 +247,12 @@ style="display: none;">Sat document.querySelector('#graph-svg').innerHTML = html; } -let svgElem; +let svgElem = document.createElement('div'); +svgElem.style.cssText = 'pointer-events: none; display: none;'; +svgElem.classList.add(...["svg-tip", "svg-tip-one-line"]); +document.body.appendChild(svgElem); function svgTip(elem, count, dateStr) { - svgElem = document.createElement('div'); - svgElem.style.cssText = 'pointer-events: none; display: none;'; - svgElem.classList.add(...["svg-tip", "svg-tip-one-line"]); const rect = getCoords(elem); const date = new Date(dateStr); const dateFmt = `${months[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`; @@ -261,14 +261,14 @@ function svgTip(elem, count, dateStr) { } else { svgElem.innerHTML = `No posts on ${dateFmt}`; } - svgElem.style.top = `${rect.top - 50}px`; - svgElem.style.left = `${rect.left - 78}px`; svgElem.style.display = 'block'; - document.body.appendChild(svgElem); + const tipRect = svgElem.getBoundingClientRect(); + svgElem.style.top = `${rect.top - 50}px`; + svgElem.style.left = `${rect.left - tipRect.width / 2 + rect.width / 2}px`; } function hideTip() { - svgElem.remove(); + svgElem.style.display = 'none'; } function getCoords(elem) { @@ -286,7 +286,7 @@ function getCoords(elem) { var top = box.top + scrollTop - clientTop; var left = box.left + scrollLeft - clientLeft; - return { top: Math.round(top), left: Math.round(left) }; + return { top, left, width: box.width, height: box.height }; } function relativeTime(dateStr) {