From f7eb02255c0376d32dce70aa2224685128153b86 Mon Sep 17 00:00:00 2001 From: Sandra Harshitha Date: Sun, 14 Jun 2026 16:22:52 +0530 Subject: [PATCH 1/2] fix: updated rank change visibility and added hover details closes #153 --- frontend/js/leaderboard/render.js | 20 +++++++++++----- frontend/styles/main.css | 40 +++++++++++++++++++++++++++++++ 2 files changed, 54 insertions(+), 6 deletions(-) diff --git a/frontend/js/leaderboard/render.js b/frontend/js/leaderboard/render.js index b601959c..0fa6d0b2 100644 --- a/frontend/js/leaderboard/render.js +++ b/frontend/js/leaderboard/render.js @@ -22,24 +22,32 @@ document.addEventListener("click", (e) => { .querySelectorAll(".mobile-score.active") .forEach((el) => el.classList.remove("active")); }); -// Creates a rank change DOM element (safe — values are internally generated) + function createRankChangeElement(rankChange) { if (!rankChange) return null; + if (rankChange === "=") { + return null; + } var span = document.createElement("span"); span.className = "rank-change"; if (rankChange === "NEW") { span.classList.add("rank-neutral"); span.textContent = "[new]"; - } else if (rankChange === "=") { - span.classList.add("rank-neutral"); - span.textContent = "[==]"; - } else if (rankChange.startsWith("+")) { + span.setAttribute("data-tooltip", "Newly added to the leaderboard"); + } + else if (rankChange.startsWith("+")) { span.classList.add("rank-up"); span.textContent = "[" + rankChange + "]"; - } else { + var placesUp = rankChange.replace("+", ""); + span.setAttribute("data-tooltip", "Rank increased by " + placesUp + " places today"); + } + else { span.classList.add("rank-down"); span.textContent = "[" + rankChange + "]"; + var placesDown = rankChange.replace("-", ""); + span.setAttribute("data-tooltip", "Rank dropped by " + placesDown + " places today"); } + return span; } diff --git a/frontend/styles/main.css b/frontend/styles/main.css index 4a4b2a7d..1761d9e2 100644 --- a/frontend/styles/main.css +++ b/frontend/styles/main.css @@ -2804,3 +2804,43 @@ body::-webkit-scrollbar-thumb { .changes-content-line.no-icon::before { display: none; } + +.rank-change { + position: relative; + cursor: help; + display: inline-block; + user-select: none; + font-family: "Fira Code", monospace; + font-weight: 600; + margin-left: 4px; +} +.rank-change[data-tooltip]::before { + content: attr(data-tooltip); + position: absolute; + bottom: 140%; + left: 50%; + transform: translateX(-50%); + background: var(--bg-raised); + color: var(--text); + border: 1px solid var(--green); + padding: 6px 12px; + font-family: "Fira Code", monospace; + font-size: 0.75rem; + line-height: 1.4; + white-space: nowrap; + border-radius: 4px; + z-index: 99999; + opacity: 0; + pointer-events: none; + transition: opacity 0.15s ease-in-out; + box-shadow: 0 0 15px rgba(0, 255, 65, 0.2); +} +.rank-change[data-tooltip]:hover::before { + opacity: 1; +} +@media (max-width: 480px) { + .rank-change[data-tooltip]::before { + bottom: auto; + top: 140%; + } +} \ No newline at end of file From 8248169652c15352cc152cf2bf264f34305a22fb Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Mon, 15 Jun 2026 14:14:56 +0000 Subject: [PATCH 2/2] style: auto-format code with Prettier (/format) --- frontend/js/leaderboard/render.js | 22 +++++++++++++--------- frontend/styles/main.css | 12 ++++++------ 2 files changed, 19 insertions(+), 15 deletions(-) diff --git a/frontend/js/leaderboard/render.js b/frontend/js/leaderboard/render.js index 1888a424..4b0ffe1b 100644 --- a/frontend/js/leaderboard/render.js +++ b/frontend/js/leaderboard/render.js @@ -26,7 +26,7 @@ document.addEventListener("click", (e) => { function createRankChangeElement(rankChange) { if (!rankChange) return null; if (rankChange === "=") { - return null; + return null; } var span = document.createElement("span"); span.className = "rank-change"; @@ -34,18 +34,22 @@ function createRankChangeElement(rankChange) { span.classList.add("rank-neutral"); span.textContent = "[new]"; span.setAttribute("data-tooltip", "Newly added to the leaderboard"); - } - else if (rankChange.startsWith("+")) { + } else if (rankChange.startsWith("+")) { span.classList.add("rank-up"); span.textContent = "[" + rankChange + "]"; - var placesUp = rankChange.replace("+", ""); - span.setAttribute("data-tooltip", "Rank increased by " + placesUp + " places today"); - } - else { + var placesUp = rankChange.replace("+", ""); + span.setAttribute( + "data-tooltip", + "Rank increased by " + placesUp + " places today", + ); + } else { span.classList.add("rank-down"); span.textContent = "[" + rankChange + "]"; - var placesDown = rankChange.replace("-", ""); - span.setAttribute("data-tooltip", "Rank dropped by " + placesDown + " places today"); + var placesDown = rankChange.replace("-", ""); + span.setAttribute( + "data-tooltip", + "Rank dropped by " + placesDown + " places today", + ); } return span; diff --git a/frontend/styles/main.css b/frontend/styles/main.css index 041d6a80..d9fcf7e8 100644 --- a/frontend/styles/main.css +++ b/frontend/styles/main.css @@ -2821,7 +2821,7 @@ body::-webkit-scrollbar-thumb { .rank-change { position: relative; - cursor: help; + cursor: help; display: inline-block; user-select: none; font-family: "Fira Code", monospace; @@ -2829,11 +2829,11 @@ body::-webkit-scrollbar-thumb { margin-left: 4px; } .rank-change[data-tooltip]::before { - content: attr(data-tooltip); + content: attr(data-tooltip); position: absolute; bottom: 140%; left: 50%; - transform: translateX(-50%); + transform: translateX(-50%); background: var(--bg-raised); color: var(--text); border: 1px solid var(--green); @@ -2841,9 +2841,9 @@ body::-webkit-scrollbar-thumb { font-family: "Fira Code", monospace; font-size: 0.75rem; line-height: 1.4; - white-space: nowrap; + white-space: nowrap; border-radius: 4px; - z-index: 99999; + z-index: 99999; opacity: 0; pointer-events: none; transition: opacity 0.15s ease-in-out; @@ -2855,7 +2855,7 @@ body::-webkit-scrollbar-thumb { @media (max-width: 480px) { .rank-change[data-tooltip]::before { bottom: auto; - top: 140%; + top: 140%; } }