diff --git a/scripts/js/charts.js b/scripts/js/charts.js index a8d0c5fe..ecb99b61 100644 --- a/scripts/js/charts.js +++ b/scripts/js/charts.js @@ -67,6 +67,7 @@ globalThis.htmlLegendPlugin = { const boxSpan = document.createElement("span"); boxSpan.title = "Toggle visibility"; boxSpan.style.color = item.fillStyle; + boxSpan.style.cursor = "pointer"; boxSpan.innerHTML = ``; boxSpan.addEventListener("click", () => { @@ -91,6 +92,7 @@ globalThis.htmlLegendPlugin = { if (isQueryTypeChart || isForwardDestinationChart) { // Text (link to query log page) link.title = `List ${item.text} queries`; + link.className = "legend-label-text clickable"; if (isQueryTypeChart) { link.href = `queries?type=${item.text}`; @@ -98,10 +100,12 @@ globalThis.htmlLegendPlugin = { // Encode the forward destination as it may contain an "#" character link.href = `queries?upstream=${encodeURIComponent(upstreams[item.text])}`; } + } else { + // no clickable links in other charts + link.className = "legend-label-text"; } link.style.textDecoration = item.hidden ? "line-through" : ""; - link.className = "legend-label-text"; link.textContent = item.text; li.append(boxSpan, link); diff --git a/style/pi-hole.css b/style/pi-hole.css index 49e4847d..fc51792e 100644 --- a/style/pi-hole.css +++ b/style/pi-hole.css @@ -270,6 +270,7 @@ td.lookatme { } .chart-legend li { + cursor: default; position: relative; line-height: 1; margin: 0 0 8px; @@ -300,10 +301,14 @@ td.lookatme { word-break: break-word; } -.chart-legend li a.legend-label-text:hover { +.chart-legend li a.legend-label-text.clickable:hover { text-decoration: underline; } +.chart-legend li a.legend-label-text.clickable { + cursor: pointer; /* Pointer cursor only for clickable items */ +} + /* These are needed because AdmintLTE 2.x doesn't support Font Awesome 5.x */ .sidebar-menu > li > a > .fab, .sidebar-menu > li > a > .far,