monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-10-30 02:39:05 +08:00
Code Issues Projects Releases Packages Wiki Activity

added sticky headers and footers to the lb table

Browse source
This commit is contained in:
Jack 2020-07-17 00:18:58 +01:00
parent 1e0e6641a6
commit d4cdfaf4e3
3 changed files with 68 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
public/css/style.scss
View file

@ -254,6 +254,13 @@ a:hover {
thead {
color: var(--sub-color);
font-size: .75rem;
td {
background: var(--bg-color);
position: -webkit-sticky;
position: sticky;
top: 0;
}
}
tbody {
@ -263,6 +270,17 @@ a:hover {
background: rgba(0, 0, 0, .1);
}
}
tfoot {
td {
position: -webkit-sticky;
position: sticky;
bottom: 0;
background: var(--bg-color);
color: var(--main-color);
z-index: 4;
}
}
}
}

22
public/index.html
View file

@ -269,6 +269,17 @@
<td>-<br>-</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>-</td>
<td>You</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-<br>-</td>
</tr>
</tfoot>
</table>
</div>
</div>
@ -474,6 +485,17 @@
<td>-<br>-</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>-</td>
<td>You</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-<br>-</td>
</tr>
</tfoot>
</table>
</div>
</div>

30
public/js/leaderboards.js
View file

@ -125,7 +125,20 @@ function updateLeaderboards() {
if (dailyData.board !== undefined) {
dailyData.board.forEach((entry, index) => {
let meClassString = "";
if (entry.currentUser) meClassString = ' class="me"';
if (entry.currentUser) {
meClassString = ' class="me"';
$("#leaderboardsWrapper table.daily tfoot").html(`
<tr>
<td>${index + 1}</td>
<td>You</td>
<td>${entry.wpm}</td>
<td>${entry.raw}</td>
<td>${entry.acc}%</td>
<td>${entry.mode} ${entry.mode2}</td>
<td>${moment(entry.timestamp).format("DD MMM YYYY<br>HH:mm")}</td>
</tr>
`);
}
$("#leaderboardsWrapper table.daily tbody").append(`
<tr>
<td>${
@ -164,7 +177,20 @@ function updateLeaderboards() {
if (globalData.board !== undefined) {
globalData.board.forEach((entry, index) => {
let meClassString = "";
if (entry.currentUser) meClassString = ' class="me"';
if (entry.currentUser) {
meClassString = ' class="me"';
$("#leaderboardsWrapper table.global tfoot").html(`
<tr>
<td>${index + 1}</td>
<td>You</td>
<td>${entry.wpm}</td>
<td>${entry.raw}</td>
<td>${entry.acc}%</td>
<td>${entry.mode} ${entry.mode2}</td>
<td>${moment(entry.timestamp).format("DD MMM YYYY<br>HH:mm")}</td>
</tr>
`);
}
$("#leaderboardsWrapper table.global tbody").append(`
<tr>
<td>${