Skip to content

Commit 3f67893

Browse files
byseif21Miodec
byseif21
and
Miodec
authored
fix(leaderboards): content overflow on smaller screens (@byseif21, @Miodec) (monkeytypegame#6733)
### Description * when the table got wider than the screen, it broke the layout and pushed other elements out of view. fixed it by `overflow-x: hidden` * making the table itself more responsive, so it adapts across screen sizes * video ; https://github.com/user-attachments/assets/c84272d1-4c77-4e59-980e-aab09c18d6a1 Closes monkeytypegame#6732 --------- Co-authored-by: Miodec <[email protected]>
1 parent a4de8df commit 3f67893

File tree

8 files changed

+125
-35
lines changed

8 files changed

+125
-35
lines changed

‎frontend/src/html/pages/leaderboards.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<div class="title timer">Updates in: -</div>
2424

2525
<div class="jumpButtons">
26-
<div class="updating hidden">
26+
<div class="updating">
2727
<i class="fas fa-circle-notch fa-spin"></i>
2828
</div>
2929
<button data-action="firstPage"><i class="fas fa-crown"></i></button>
@@ -55,7 +55,7 @@
5555
wpm
5656
<div class="sub">accuracy</div>
5757
</td>
58-
<td class="stat narrow">
58+
<td class="stat narrow rawAndConsistency">
5959
raw
6060
<div class="sub">consistency</div>
6161
</td>

‎frontend/src/styles/core.scss‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -389,16 +389,18 @@ key {
389389
display: grid;
390390
grid-template-columns: max-content auto;
391391
align-items: baseline;
392+
--spacing: 0.5em;
393+
--horizontalScale: 1.25;
392394
.fas,
393395
.far {
394-
margin-right: 0.3rem;
395-
margin-left: 0.3rem;
396-
margin-top: 0.3rem;
397-
margin-bottom: 0.3rem;
396+
margin-right: calc(var(--spacing) * var(--horizontalScale));
397+
margin-left: calc(var(--spacing) * var(--horizontalScale));
398+
margin-top: var(--spacing);
399+
margin-bottom: var(--spacing);
398400
font-size: 0.9em;
399401
}
400402
.text {
401-
margin-right: 0.3rem;
403+
margin-right: calc(var(--spacing) * var(--horizontalScale));
402404
}
403405
}
404406

‎frontend/src/styles/leaderboards.scss‎

Lines changed: 18 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
height: 100%;
1111

1212
.bigtitle {
13-
font-size: 2rem;
14-
margin-bottom: 1rem;
13+
font-size: 2em;
14+
margin-bottom: 1em;
1515
.text {
1616
grid-area: text;
1717
}
@@ -50,12 +50,12 @@
5050

5151
.titleAndButtons {
5252
align-items: center;
53-
font-size: 1rem;
53+
font-size: 1em;
5454
display: grid;
5555
grid-template-columns: 1fr 1fr;
5656
justify-content: space-between;
5757
button {
58-
width: 3rem;
58+
width: 3em;
5959
}
6060
.title {
6161
font-size: 1rem;
@@ -70,7 +70,7 @@
7070
.updating {
7171
font-size: 1.5em;
7272
color: var(--sub-color);
73-
margin-right: 0.5em;
73+
margin-left: 0.5em;
7474
}
7575
}
7676
}
@@ -87,8 +87,8 @@
8787
.bigUser {
8888
// color: var(--main-color);
8989
font-size: 1em;
90-
margin-bottom: 2rem;
91-
margin-top: 2rem;
90+
margin-bottom: 2em;
91+
margin-top: 2em;
9292
background: var(--sub-alt-color);
9393
padding: 1em 2em;
9494
border-radius: var(--roundness);
@@ -121,6 +121,9 @@
121121
.sub {
122122
opacity: 0.5;
123123
}
124+
&:last-child {
125+
text-wrap-mode: nowrap;
126+
}
124127
}
125128
.date {
126129
font-size: 0.75em;
@@ -143,15 +146,6 @@
143146
// }
144147
}
145148
}
146-
.avatarNameBadge {
147-
display: grid;
148-
grid-template-columns: min-content max-content auto;
149-
gap: 0.5rem;
150-
place-items: center left;
151-
.avatarPlaceholder {
152-
color: var(--sub-color);
153-
}
154-
}
155149
table {
156150
width: 100%;
157151
border-spacing: 0;
@@ -187,7 +181,7 @@
187181
text-align: right;
188182
}
189183
&.date {
190-
width: 20ch;
184+
width: 1px;
191185
text-align: right;
192186
}
193187
}
@@ -199,14 +193,11 @@
199193
gap: 0.5em;
200194
place-items: center left;
201195
.avatarPlaceholder {
202-
width: 1.25em;
203-
height: 1.25em;
204-
font-size: 1.25em;
205-
// background: var(--sub-color);
206196
color: var(--sub-color);
207-
// display: grid;
208-
// place-content: center center;
209197
border-radius: 100%;
198+
i {
199+
font-size: 1.29em;
200+
}
210201
}
211202
.entryName {
212203
text-decoration: none;
@@ -215,11 +206,13 @@
215206
}
216207
.avatarPlaceholder,
217208
.avatar {
209+
width: 1.25em;
210+
height: 1.25em;
218211
grid-row: 1/2;
219212
grid-column: 1/2;
220213
}
221214
.badge {
222-
font-size: 0.6em;
215+
font-size: 0.75em;
223216
}
224217
.flagsAndBadge {
225218
display: flex;
@@ -244,6 +237,7 @@
244237
}
245238

246239
td.date {
240+
text-wrap-mode: nowrap;
247241
text-align: right;
248242
font-size: 0.75em;
249243
}

‎frontend/src/styles/media-queries-brown.scss‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,4 +57,48 @@
5757
#testActivity {
5858
display: none;
5959
}
60+
61+
.pageLeaderboards {
62+
.content .tableAndUser {
63+
//font-size: 0.7rem;
64+
.bigUser {
65+
gap: 1em;
66+
padding-left: 0.75em;
67+
.stat.narrow:last-child {
68+
font-size: 0.75em;
69+
}
70+
.userInfo {
71+
font-size: 0.8em;
72+
}
73+
.rank {
74+
margin-right: 0.5em;
75+
}
76+
}
77+
.titleAndButtons {
78+
// grid-template-columns: 1fr;
79+
.title {
80+
// text-align: center;
81+
font-size: 1em;
82+
}
83+
}
84+
table {
85+
.avatarNameBadge .flagsAndBadge .badge .text {
86+
display: block;
87+
}
88+
tbody td.date {
89+
font-size: 0.75em;
90+
}
91+
.avatarNameBadge {
92+
grid-template-columns: 1.25em 1fr;
93+
grid-template-areas:
94+
"avatar name"
95+
"badges badges";
96+
.flagsAndBadge {
97+
grid-area: badges;
98+
// justify-self: center;
99+
}
100+
}
101+
}
102+
}
103+
}
60104
}

‎frontend/src/styles/media-queries-gray.scss‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
//this is very overkill for the modern world so dont worry too much about this width
2+
@media only screen and (max-width: 330px) {
3+
#mediaQueryDebug {
4+
background: gray;
5+
&::before {
6+
content: "gray";
7+
}
8+
}
9+
.pageLeaderboards .content .tableAndUser {
10+
.titleAndButtons {
11+
grid-template-columns: 1fr;
12+
gap: 0.5em;
13+
.title {
14+
text-align: right;
15+
}
16+
}
17+
.rawAndConsistency {
18+
display: none;
19+
}
20+
}
21+
header {
22+
gap: 0.25rem;
23+
nav .textButton {
24+
padding: 0.5em 0.25em;
25+
}
26+
}
27+
}

‎frontend/src/styles/media-queries-purple.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,33 @@
2222
}
2323
}
2424
}
25+
2526
.pageLeaderboards {
2627
.content .bigtitle .text:after {
2728
left: 0.1rem;
2829
transform: none;
2930
}
31+
.content .tableAndUser {
32+
font-size: clamp(0.7rem, 2.8vw, 0.9rem);
33+
.bigUser {
34+
gap: 1.5em;
35+
}
36+
table {
37+
td {
38+
padding: 0.5em;
39+
}
40+
.avatarNameBadge .flagsAndBadge .badge .text {
41+
display: none;
42+
}
43+
tbody td:nth-child(2) {
44+
width: 100%;
45+
}
46+
}
47+
.bigUser {
48+
padding: 0.5em;
49+
padding-left: 1em;
50+
}
51+
}
3052
}
3153
header {
3254
nav {

‎frontend/src/styles/media-queries.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ body {
5050
@import "media-queries-blue";
5151
@import "media-queries-purple";
5252
@import "media-queries-brown";
53+
@import "media-queries-gray";
5354

5455
@media only screen and (max-width: 1875px) {
5556
.ad.ad-v {

‎frontend/src/ts/pages/leaderboards.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -512,7 +512,7 @@ function buildTableRow(entry: LeaderboardEntry, me = false): string {
512512
<div class="sub">${formatted.acc}</div>
513513
</td>
514514
</td>
515-
<td class="stat narrow">
515+
<td class="stat narrow rawAndConsistency">
516516
${formatted.raw}
517517
<div class="sub">${formatted.con}</div>
518518
</td>
@@ -778,7 +778,7 @@ function fillUser(): void {
778778
<div>${formatted.wpm}</div>
779779
<div class="sub">${formatted.acc}</div>
780780
</div>
781-
<div class="stat narrow">
781+
<div class="stat narrow rawAndConsistency">
782782
<div>${formatted.raw}</div>
783783
<div class="sub">${formatted.con}</div>
784784
</div>
@@ -880,7 +880,7 @@ function fillUser(): void {
880880

881881
function updateContent(): void {
882882
$(".page.pageLeaderboards .loading").addClass("hidden");
883-
$(".page.pageLeaderboards .updating").addClass("hidden");
883+
$(".page.pageLeaderboards .updating").addClass("invisible");
884884
$(".page.pageLeaderboards .error").addClass("hidden");
885885

886886
if (state.error !== undefined) {
@@ -892,7 +892,7 @@ function updateContent(): void {
892892

893893
if (state.updating) {
894894
disableButtons();
895-
$(".page.pageLeaderboards .updating").removeClass("hidden");
895+
$(".page.pageLeaderboards .updating").removeClass("invisible");
896896
return;
897897
} else if (state.loading) {
898898
disableButtons();

0 commit comments

Comments
 (0)