Fix detail reset outline style and svgtip

This commit is contained in:
bLue
2020-12-19 10:09:07 +08:00
parent 0940df5659
commit f98f41b8ea
2 changed files with 13 additions and 9 deletions

View File

@@ -111,6 +111,10 @@ body {
user-select: none; user-select: none;
} }
.details-reset>summary {
outline: none;
}
@media (max-width: 768px) { @media (max-width: 768px) {
.Header { .Header {
padding-left: 24px!important; padding-left: 24px!important;

View File

@@ -247,12 +247,12 @@ style="display: none;">Sat</text>
document.querySelector('#graph-svg').innerHTML = html; document.querySelector('#graph-svg').innerHTML = html;
} }
let svgElem; let svgElem = document.createElement('div');
function svgTip(elem, count, dateStr) {
svgElem = document.createElement('div');
svgElem.style.cssText = 'pointer-events: none; display: none;'; svgElem.style.cssText = 'pointer-events: none; display: none;';
svgElem.classList.add(...["svg-tip", "svg-tip-one-line"]); svgElem.classList.add(...["svg-tip", "svg-tip-one-line"]);
document.body.appendChild(svgElem);
function svgTip(elem, count, dateStr) {
const rect = getCoords(elem); const rect = getCoords(elem);
const date = new Date(dateStr); const date = new Date(dateStr);
const dateFmt = `${months[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`; const dateFmt = `${months[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
@@ -261,14 +261,14 @@ function svgTip(elem, count, dateStr) {
} else { } else {
svgElem.innerHTML = `<strong>No posts</strong> on ${dateFmt}`; svgElem.innerHTML = `<strong>No posts</strong> on ${dateFmt}`;
} }
svgElem.style.top = `${rect.top - 50}px`;
svgElem.style.left = `${rect.left - 78}px`;
svgElem.style.display = 'block'; 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() { function hideTip() {
svgElem.remove(); svgElem.style.display = 'none';
} }
function getCoords(elem) { function getCoords(elem) {
@@ -286,7 +286,7 @@ function getCoords(elem) {
var top = box.top + scrollTop - clientTop; var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft; 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) { function relativeTime(dateStr) {