monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-11-19 15:34:21 +08:00
Code Issues Projects Releases Packages Wiki Activity

impr(leaderboard): fix icons on friend leaderboards (@fehmer) (#7086)

Browse source
This commit is contained in:
Christian Fehmer 2025-11-06 13:30:19 +01:00 • committed by GitHub
parent 2f5cb164cb
commit 35be4bdfd5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 43 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
frontend/src/html/pages/leaderboards.html
View file

@ -49,8 +49,21 @@
<table>
<thead class="allTimeAndDaily">
<tr>
<td><i class="fas fa-users"></i></td>
<td>#</td>
<td>
<span aria-label="Friends rank" data-balloon-pos="down">
<i class="fas fa-user-friends"></i>
</span>
</td>
<td>
<span
class="globalRank"
aria-label="Global rank"
data-balloon-pos="down"
>
<span>#</span>
<i class="fas fa-users"></i>
</span>
</td>
<td>name</td>
<td class="stat narrow speedUnit">
<span>wpm</span>

16
frontend/src/styles/leaderboards.scss
View file

@ -161,10 +161,26 @@
padding: var(--padding);
}
.globalRank {
i {
display: none;
}
span {
display: inline;
}
}
&.friendsOnly {
td:first-child {
display: table-cell;
}
.globalRank {
i {
display: inline;
}
span {
display: none;
}
}
}
td:first-child {
display: none;

27
frontend/src/ts/pages/leaderboards.ts
View file

@ -444,10 +444,8 @@ function buildTableRow(entry: LeaderboardEntry, me = false): HTMLElement {
}
element.dataset["uid"] = entry.uid;
element.innerHTML = `
<td>${entry.friendsRank ?? ""}</td>
<td>${
entry.rank === 1 ? '<i class="fas fa-fw fa-crown"></i>' : entry.rank
}</td>
<td>${formatRank(entry.friendsRank)}</td>
<td>${formatRank(entry.rank)}</td>
<td>
<div class="avatarNameBadge">
<div class="avatarPlaceholder"></div>
@ -504,9 +502,7 @@ function buildWeeklyTableRow(
element.dataset["uid"] = entry.uid;
element.innerHTML = `
<td></td>
<td>${
entry.rank === 1 ? '<i class="fas fa-fw fa-crown"></i>' : entry.rank
}</td>
<td>${formatRank(entry.rank)}</td>
<td>
<div class="avatarNameBadge">
<div class="avatarPlaceholder"></div>
@ -718,9 +714,7 @@ function fillUser(): void {
};
const html = `
<div class="rank">${
rank === 1 ? '<i class="fas fa-fw fa-crown"></i>' : rank
}</div>
<div class="rank">${formatRank(rank)}</div>
<div class="userInfo">
<div class="top">You (${percentileString})</div>
<div class="bottom">${diffText}</div>
@ -811,11 +805,7 @@ function fillUser(): void {
};
const html = `
<div class="rank">${
userData.rank === 1
? '<i class="fas fa-fw fa-crown"></i>'
: userData.rank
}</div>
<div class="rank">${formatRank(userData.rank)}</div>
<div class="userInfo">
<div class="top">You (${percentileString})</div>
<div class="bottom">${diffText}</div>
@ -1390,6 +1380,13 @@ function updateTimeText(
text.attr("aria-label", localDateString);
}
function formatRank(rank: number | undefined): string {
if (rank === undefined) return "";
if (rank === 1) return '<i class="fas fa-fw fa-crown"></i>';
return rank.toString();
}
$(".page.pageLeaderboards .jumpButtons button").on("click", function () {
const action = $(this).data("action") as Action;
if (action !== "goToPage") {