diff --git a/web/_css/style.css b/web/_css/style.css index 1335af0a..88bf02cd 100644 --- a/web/_css/style.css +++ b/web/_css/style.css @@ -388,7 +388,7 @@ .period-group { transition: box-shadow 0.15s ease-in-out; } -@media (prefers-reduced-motion:reduce) { +@media (prefers-reduced-motion: reduce) { .period-group { transition: none; } diff --git a/web/_js/draw.js b/web/_js/draw.js index ceceed00..a500be91 100644 --- a/web/_js/draw.js +++ b/web/_js/draw.js @@ -481,9 +481,9 @@ function initDraw() { // Displays coordinates as zero instead of NaN if (isNaN(pos[0]) == true) { - coords_p.innerText = "0, 0" + coords_p.textContent = "0, 0" } else { - coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]) + coords_p.textContent = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]) } } } diff --git a/web/_js/main.js b/web/_js/main.js index 39f60fa2..3d33aa18 100644 --- a/web/_js/main.js +++ b/web/_js/main.js @@ -37,14 +37,6 @@ let lastPosition = [0, 0] const viewportSize = [0, 0] -// document.getElementById("entriesListDonate").addEventListener("click", function(e){ -// document.getElementById("donateOverlay").style.display = "flex" -// }) - -// document.getElementById("closeDonateButton").addEventListener("click", function(e){ -// document.getElementById("donateOverlay").style.display = "none" -// }) - function applyView() { //console.log(zoomOrigin, scaleZoomOrigin) @@ -416,6 +408,8 @@ async function init() { function mousemove(x, y) { if (dragging) { + container.style.cursor = "move" + const deltaX = x - lastPosition[0] const deltaY = y - lastPosition[1] lastPosition = [x, y] @@ -479,6 +473,11 @@ async function init() { } window.addEventListener("mouseup", function (e) { + if (hovered.length > 0) { + container.style.cursor = "pointer" + } else { + container.style.cursor = "default" + } if (dragging) { e.preventDefault() } diff --git a/web/_js/view.js b/web/_js/view.js index a1e74a1b..774848ae 100644 --- a/web/_js/view.js +++ b/web/_js/view.js @@ -151,6 +151,7 @@ closeObjectsListButton.addEventListener("click", function () { objectsContainer.replaceChildren() updateLines() closeObjectsListButton.classList.add("d-none") + objectsListOverflowNotice.classList.add("d-none") fixed = false render() }) @@ -204,11 +205,12 @@ window.addEventListener("resize", function (e) { function updateLines() { + // Line border linesCanvas.width = linesCanvas.clientWidth linesCanvas.height = linesCanvas.clientHeight linesContext.lineCap = "round" linesContext.lineWidth = Math.max(Math.min(zoom * 1.5, 16 * 1.5), 6) - linesContext.strokeStyle = "#000000" + linesContext.strokeStyle = "#222" for (let i = 0; i < hovered.length; i++) { const element = hovered[i].element @@ -216,20 +218,27 @@ function updateLines() { if (element.getBoundingClientRect().left != 0) { linesContext.beginPath() - //linesContext.moveTo(element.offsetLeft + element.clientWidth - 10, element.offsetTop + 20) - linesContext.moveTo( - element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth / 2 - , element.getBoundingClientRect().top + document.documentElement.scrollTop + 20 - ) + // Align line based on which side the card is on + if ((element.getBoundingClientRect().left + element.clientWidth / 2) < (document.documentElement.clientWidth / 2)) { + linesContext.moveTo( + element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth - 5 + , element.getBoundingClientRect().top + document.documentElement.scrollTop + 20 + ) + } else { + linesContext.moveTo( + element.getBoundingClientRect().left + document.documentElement.scrollLeft + 5 + , element.getBoundingClientRect().top + document.documentElement.scrollTop + 20 + ) + } linesContext.lineTo( ~~(hovered[i].center[0] * zoom) + innerContainer.offsetLeft , ~~(hovered[i].center[1] * zoom) + innerContainer.offsetTop ) linesContext.stroke() - } } + // Line body linesContext.lineWidth = Math.max(Math.min(zoom, 16), 4) linesContext.strokeStyle = "#FFFFFF" @@ -239,10 +248,18 @@ function updateLines() { if (element.getBoundingClientRect().left != 0) { linesContext.beginPath() - linesContext.moveTo( - element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth / 2 - , element.getBoundingClientRect().top + document.documentElement.scrollTop + 20 - ) + // Align line based on which side the card is on + if ((element.getBoundingClientRect().left + element.clientWidth / 2) < (document.documentElement.clientWidth / 2)) { + linesContext.moveTo( + element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth - 5 + , element.getBoundingClientRect().top + document.documentElement.scrollTop + 20 + ) + } else { + linesContext.moveTo( + element.getBoundingClientRect().left + document.documentElement.scrollLeft + 5 + , element.getBoundingClientRect().top + document.documentElement.scrollTop + 20 + ) + } linesContext.lineTo( ~~(hovered[i].center[0] * zoom) + innerContainer.offsetLeft , ~~(hovered[i].center[1] * zoom) + innerContainer.offsetTop @@ -669,9 +686,9 @@ function updateHovering(e, tapped) { // Displays coordinates as zero instead of NaN if (isNaN(pos[0]) == true) { - coords_p.innerText = "0, 0" + coords_p.textContent = "0, 0" } else { - coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]) + coords_p.textContent = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]) } if (pos[0] <= 2200 && pos[0] >= -100 && pos[0] <= 2200 && pos[0] >= -100) { @@ -843,8 +860,12 @@ function initExplore() { , (e.clientY - (container.clientHeight / 2 - innerContainer.clientHeight / 2 + zoomOrigin[1] + container.offsetTop)) / zoom ] const coords_p = document.getElementById("coords_p") - coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]) - + // Displays coordinates as zero instead of NaN + if (isNaN(pos[0]) == true) { + coords_p.textContent = "0, 0" + } else { + coords_p.textContent = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]) + } } }