mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-09-10 08:37:24 +08:00
fix(leaderboards): content overflow on smaller screens (@byseif21, @miodec) (#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 #6732 --------- Co-authored-by: Miodec <jack@monkeytype.com>
This commit is contained in:
Seif Soliman
GitHub
parent
a4de8dfda6
commit
3f678932f8
8 changed files with 125 additions and 35 deletions
|
|
@ -23,7 +23,7 @@
|
|||
<div class="title timer">Updates in: -</div>
|
||||
|
||||
<div class="jumpButtons">
|
||||
<div class="updating hidden">
|
||||
<div class="updating">
|
||||
<i class="fas fa-circle-notch fa-spin"></i>
|
||||
</div>
|
||||
<button data-action="firstPage"><i class="fas fa-crown"></i></button>
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
wpm
|
||||
<div class="sub">accuracy</div>
|
||||
</td>
|
||||
<td class="stat narrow">
|
||||
<td class="stat narrow rawAndConsistency">
|
||||
raw
|
||||
<div class="sub">consistency</div>
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -389,16 +389,18 @@ key {
|
|||
display: grid;
|
||||
grid-template-columns: max-content auto;
|
||||
align-items: baseline;
|
||||
--spacing: 0.5em;
|
||||
--horizontalScale: 1.25;
|
||||
.fas,
|
||||
.far {
|
||||
margin-right: 0.3rem;
|
||||
margin-left: 0.3rem;
|
||||
margin-top: 0.3rem;
|
||||
margin-bottom: 0.3rem;
|
||||
margin-right: calc(var(--spacing) * var(--horizontalScale));
|
||||
margin-left: calc(var(--spacing) * var(--horizontalScale));
|
||||
margin-top: var(--spacing);
|
||||
margin-bottom: var(--spacing);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.text {
|
||||
margin-right: 0.3rem;
|
||||
margin-right: calc(var(--spacing) * var(--horizontalScale));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@
|
|||
height: 100%;
|
||||
|
||||
.bigtitle {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
.text {
|
||||
grid-area: text;
|
||||
}
|
||||
|
|
@ -50,12 +50,12 @@
|
|||
|
||||
.titleAndButtons {
|
||||
align-items: center;
|
||||
font-size: 1rem;
|
||||
font-size: 1em;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
justify-content: space-between;
|
||||
button {
|
||||
width: 3rem;
|
||||
width: 3em;
|
||||
}
|
||||
.title {
|
||||
font-size: 1rem;
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
.updating {
|
||||
font-size: 1.5em;
|
||||
color: var(--sub-color);
|
||||
margin-right: 0.5em;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -87,8 +87,8 @@
|
|||
.bigUser {
|
||||
// color: var(--main-color);
|
||||
font-size: 1em;
|
||||
margin-bottom: 2rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2em;
|
||||
margin-top: 2em;
|
||||
background: var(--sub-alt-color);
|
||||
padding: 1em 2em;
|
||||
border-radius: var(--roundness);
|
||||
|
|
@ -121,6 +121,9 @@
|
|||
.sub {
|
||||
opacity: 0.5;
|
||||
}
|
||||
&:last-child {
|
||||
text-wrap-mode: nowrap;
|
||||
}
|
||||
}
|
||||
.date {
|
||||
font-size: 0.75em;
|
||||
|
|
@ -143,15 +146,6 @@
|
|||
// }
|
||||
}
|
||||
}
|
||||
.avatarNameBadge {
|
||||
display: grid;
|
||||
grid-template-columns: min-content max-content auto;
|
||||
gap: 0.5rem;
|
||||
place-items: center left;
|
||||
.avatarPlaceholder {
|
||||
color: var(--sub-color);
|
||||
}
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-spacing: 0;
|
||||
|
|
@ -187,7 +181,7 @@
|
|||
text-align: right;
|
||||
}
|
||||
&.date {
|
||||
width: 20ch;
|
||||
width: 1px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
|
@ -199,14 +193,11 @@
|
|||
gap: 0.5em;
|
||||
place-items: center left;
|
||||
.avatarPlaceholder {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
font-size: 1.25em;
|
||||
// background: var(--sub-color);
|
||||
color: var(--sub-color);
|
||||
// display: grid;
|
||||
// place-content: center center;
|
||||
border-radius: 100%;
|
||||
i {
|
||||
font-size: 1.29em;
|
||||
}
|
||||
}
|
||||
.entryName {
|
||||
text-decoration: none;
|
||||
|
|
@ -215,11 +206,13 @@
|
|||
}
|
||||
.avatarPlaceholder,
|
||||
.avatar {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
grid-row: 1/2;
|
||||
grid-column: 1/2;
|
||||
}
|
||||
.badge {
|
||||
font-size: 0.6em;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
.flagsAndBadge {
|
||||
display: flex;
|
||||
|
|
@ -244,6 +237,7 @@
|
|||
}
|
||||
|
||||
td.date {
|
||||
text-wrap-mode: nowrap;
|
||||
text-align: right;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,4 +57,48 @@
|
|||
#testActivity {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pageLeaderboards {
|
||||
.content .tableAndUser {
|
||||
//font-size: 0.7rem;
|
||||
.bigUser {
|
||||
gap: 1em;
|
||||
padding-left: 0.75em;
|
||||
.stat.narrow:last-child {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
.userInfo {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.rank {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
.titleAndButtons {
|
||||
// grid-template-columns: 1fr;
|
||||
.title {
|
||||
// text-align: center;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
table {
|
||||
.avatarNameBadge .flagsAndBadge .badge .text {
|
||||
display: block;
|
||||
}
|
||||
tbody td.date {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
.avatarNameBadge {
|
||||
grid-template-columns: 1.25em 1fr;
|
||||
grid-template-areas:
|
||||
"avatar name"
|
||||
"badges badges";
|
||||
.flagsAndBadge {
|
||||
grid-area: badges;
|
||||
// justify-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
27
frontend/src/styles/media-queries-gray.scss
Normal file
27
frontend/src/styles/media-queries-gray.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
//this is very overkill for the modern world so dont worry too much about this width
|
||||
@media only screen and (max-width: 330px) {
|
||||
#mediaQueryDebug {
|
||||
background: gray;
|
||||
&::before {
|
||||
content: "gray";
|
||||
}
|
||||
}
|
||||
.pageLeaderboards .content .tableAndUser {
|
||||
.titleAndButtons {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.5em;
|
||||
.title {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.rawAndConsistency {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
header {
|
||||
gap: 0.25rem;
|
||||
nav .textButton {
|
||||
padding: 0.5em 0.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -22,11 +22,33 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pageLeaderboards {
|
||||
.content .bigtitle .text:after {
|
||||
left: 0.1rem;
|
||||
transform: none;
|
||||
}
|
||||
.content .tableAndUser {
|
||||
font-size: clamp(0.7rem, 2.8vw, 0.9rem);
|
||||
.bigUser {
|
||||
gap: 1.5em;
|
||||
}
|
||||
table {
|
||||
td {
|
||||
padding: 0.5em;
|
||||
}
|
||||
.avatarNameBadge .flagsAndBadge .badge .text {
|
||||
display: none;
|
||||
}
|
||||
tbody td:nth-child(2) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.bigUser {
|
||||
padding: 0.5em;
|
||||
padding-left: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
header {
|
||||
nav {
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@ body {
|
|||
@import "media-queries-blue";
|
||||
@import "media-queries-purple";
|
||||
@import "media-queries-brown";
|
||||
@import "media-queries-gray";
|
||||
|
||||
@media only screen and (max-width: 1875px) {
|
||||
.ad.ad-v {
|
||||
|
|
|
|||
|
|
@ -512,7 +512,7 @@ function buildTableRow(entry: LeaderboardEntry, me = false): string {
|
|||
<div class="sub">${formatted.acc}</div>
|
||||
</td>
|
||||
</td>
|
||||
<td class="stat narrow">
|
||||
<td class="stat narrow rawAndConsistency">
|
||||
${formatted.raw}
|
||||
<div class="sub">${formatted.con}</div>
|
||||
</td>
|
||||
|
|
@ -778,7 +778,7 @@ function fillUser(): void {
|
|||
<div>${formatted.wpm}</div>
|
||||
<div class="sub">${formatted.acc}</div>
|
||||
</div>
|
||||
<div class="stat narrow">
|
||||
<div class="stat narrow rawAndConsistency">
|
||||
<div>${formatted.raw}</div>
|
||||
<div class="sub">${formatted.con}</div>
|
||||
</div>
|
||||
|
|
@ -880,7 +880,7 @@ function fillUser(): void {
|
|||
|
||||
function updateContent(): void {
|
||||
$(".page.pageLeaderboards .loading").addClass("hidden");
|
||||
$(".page.pageLeaderboards .updating").addClass("hidden");
|
||||
$(".page.pageLeaderboards .updating").addClass("invisible");
|
||||
$(".page.pageLeaderboards .error").addClass("hidden");
|
||||
|
||||
if (state.error !== undefined) {
|
||||
|
|
@ -892,7 +892,7 @@ function updateContent(): void {
|
|||
|
||||
if (state.updating) {
|
||||
disableButtons();
|
||||
$(".page.pageLeaderboards .updating").removeClass("hidden");
|
||||
$(".page.pageLeaderboards .updating").removeClass("invisible");
|
||||
return;
|
||||
} else if (state.loading) {
|
||||
disableButtons();
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue