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

tweaks

Browse source
This commit is contained in:
Miodec 2025-08-24 18:43:19 +02:00 • committed by Christian Fehmer
parent 42fedbdaec
commit 584eb743fa
3 changed files with 67 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
frontend/src/html/pages/friends.html
View file

@ -13,8 +13,9 @@
<div class="content">
<div class="pendingRequests">
<div class="bigtitle">
<h2>Pending Friend Requests</h2>
<div class="bigTitle">
<i class="fas fa-user-plus fa-fw"></i>
Incoming Requests
</div>
<div class="error hidden">
<i class="fas fa-times"></i>
@ -33,18 +34,22 @@
</div>
<div class="friends">
<h2>
Friends
<div class="titleAndButton">
<div class="bigTitle">
<i class="fas fa-user-friends fa-fw"></i>
Friends
</div>
<button
id="friendAdd"
class="button"
class="button friendAdd"
aria-label="add friend"
data-balloon-pos="right"
data-balloon-pos="left"
>
<i class="fas fa-user-plus fa-fw"></i>
<i class="fas fa-plus fa-fw"></i>
add friend
</button>
</h2>
</div>
<div class="loading hidden">
<i class="fas fa-circle-notch fa-spin"></i>
</div>
@ -58,7 +63,7 @@
<thead>
<tr>
<td data-sort-property="name">name</td>
<td data-sort-property="addedAt">friend since</td>
<td data-sort-property="addedAt">friends for</td>
<td data-sort-property="xp">level</td>
<td
data-sort-property="completedTests"

26
frontend/src/styles/friends.scss
View file

@ -1,12 +1,24 @@
.pageFriends {
h2 {
.bigTitle {
color: var(--sub-color);
font-size: 2rem;
margin-bottom: 1rem;
font-weight: normal;
}
.titleAndButton {
display: grid;
grid-template-columns: 1fr auto;
margin-bottom: 1rem;
}
.nodata {
color: var(--sub-color);
padding: 5rem 0;
text-align: center;
}
.pendingRequests,
.friends {
margin-bottom: 1rem;
margin-bottom: 4rem;
table {
border-spacing: 0;
border-collapse: collapse;
@ -18,6 +30,10 @@
font-size: 0.75rem;
}
tr.me {
color: var(--main-color);
}
tbody tr:nth-child(odd) td {
background: var(--sub-alt-color);
}
@ -70,7 +86,7 @@
}
.entryName {
text-decoration: none;
color: var(--text-color);
color: inherit;
cursor: pointer;
}
.avatarPlaceholder,

48
frontend/src/ts/pages/friends.ts
View file

@ -112,13 +112,13 @@ async function updatePendingRequests(): Promise<void> {
}?isUid" router-link>${item.initiatorName}</a></td>
<td>${formatAge(item.addedAt)} ago</td>
<td class="actions">
<button class="accepted" aria-label="accept friend" data-balloon-pos="up">
<button class="accepted" aria-label="accept" data-balloon-pos="up">
<i class="fas fa-check fa-fw"></i>
</button>
<button class="rejected" aria-label="reject friend" data-balloon-pos="up">
<button class="rejected" aria-label="reject" data-balloon-pos="up">
<i class="fas fa-times fa-fw"></i>
</button>
<button class="blocked" aria-label="block user from sending friend requests" data-balloon-pos="up">
<button class="blocked" aria-label="block" data-balloon-pos="up">
<i class="fas fa-shield-alt fa-fw"></i>
</button>
</td>
@ -174,8 +174,22 @@ function buildFriendRow(entry: Friend): HTMLTableRowElement {
const top60 = formatPb(entry.top60);
const element = document.createElement("tr");
element.dataset["id"] = entry.friendRequestId;
element.innerHTML = `<tr data-id="${entry.friendRequestId}">
element.dataset["id"] = entry.uid;
const isMe = entry.uid === getAuthenticatedUser()?.uid;
let actions = "";
if (isMe) {
element.classList.add("me");
} else {
actions = `<button class="rejected" aria-label="reject friend" data-balloon-pos="up">
<i class="fas fa-user-times fa-fw"></i>
</button>
<button class="blocked" aria-label="block user from sending friend requests" data-balloon-pos="up">
<i class="fas fa-user-shield fa-fw"></i>
</button>`;
}
element.innerHTML = `<tr>
<td>
<div class="avatarNameBadge">
<div class="avatarPlaceholder"></div>
@ -193,7 +207,9 @@ function buildFriendRow(entry: Friend): HTMLTableRowElement {
</div>
</div>
</td>
<td>${formatAge(entry.addedAt, "short")}</td>
<td>${
entry.addedAt !== undefined ? formatAge(entry.addedAt, "short") : "-"
}</td>
<td><span aria-label="total xp: ${
isSafeNumber(entry.xp) ? formatXp(entry.xp) : ""
}" data-balloon-pos="up">
@ -218,20 +234,16 @@ function buildFriendRow(entry: Friend): HTMLTableRowElement {
<td><span aria-label="${
top15?.details
}" data-balloon-pos="up" data-balloon-break="">${
top15?.wpm
}<div class="sub">${top15?.acc}</div><span></td>
top15?.wpm ?? "-"
}<div class="sub">${top15?.acc ?? "-"}</div><span></td>
<td><span aria-label="${
top60?.details
}" data-balloon-pos="up" data-balloon-break="">${
top60?.wpm
}<div class="sub">${top60?.acc}</div></span></td>
<td class="actions">
<button class="rejected" aria-label="reject friend" data-balloon-pos="up">
<i class="fas fa-user-times fa-fw"></i>
</button>
<button class="blocked" aria-label="block user from sending friend requests" data-balloon-pos="up">
<i class="fas fa-user-shield fa-fw"></i>
</button>
top60?.wpm ?? "-"
}<div class="sub">${top60?.acc ?? "-"}</div></span></td>
<td class="actions">
${actions}
</td>
</tr>`;
@ -312,7 +324,7 @@ function formatStreak(length?: number, prefix?: string): string {
: "";
}
$("#friendAdd").on("click", () => {
$(".pageFriends button.friendAdd").on("click", () => {
addFriendModal.show(undefined, {});
});