monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2024-09-22 16:26:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

updated leaderboard media queries to avoid scrollbars

Browse source 
closes #3400
This commit is contained in:
Miodec 2022-08-22 14:53:31 +02:00
parent 6f41db5575
commit b899cf65a8
1 changed files with 89 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

159
frontend/src/styles/z_media-queries.scss
View file

@ -1,13 +1,4 @@
@media only screen and (max-width: 1330px) {
.ad.ad-v {
display: none;
}
#app {
grid-template-columns: auto;
}
}
@media only screen and (max-width: 1250px) {
@media only screen and (max-width: 1450px) {
#leaderboardsWrapper #leaderboards {
.mainTitle {
font-size: 2rem;
@ -37,6 +28,25 @@
}
}
}
}
@media only screen and (max-width: 1330px) {
.ad.ad-v {
display: none;
}
#app {
grid-template-columns: auto;
}
}
@media only screen and (max-width: 1250px) {
#leaderboardsWrapper #leaderboards {
.tables table {
tr td:nth-child(5) {
display: none;
}
}
}
#quoteSearchPopupWrapper #quoteSearchPopup #quoteSearchControlsWrapper {
grid-template-columns: 1fr 1fr max-content;
}
@ -80,6 +90,50 @@
width: 50% !important;
}
}
#leaderboardsWrapper {
#leaderboards {
.leaderboardsTop {
flex-direction: column;
align-items: baseline;
grid-template-areas:
"title title"
"subtitle subtitle"
"yesterday yesterday"
"buttons buttons";
grid-template-columns: 1fr;
.buttons {
margin-top: 0.5rem;
}
.buttonGroup {
grid-auto-flow: column;
}
.showYesterdayButton {
margin-left: 0;
}
}
.tables {
grid-template-columns: unset;
table {
.avatarNameBadge .badge .text {
display: block;
}
tr td:last-child {
width: 30%;
}
}
}
.tables .rightTableWrapper,
.tables .leftTableWrapper {
height: calc(50vh - 10rem);
}
.tables table {
tr td:nth-child(5) {
display: table-cell;
width: auto;
}
}
}
}
}
@media only screen and (max-width: 1000px) {
@ -102,13 +156,6 @@
}
}
}
#leaderboardsWrapper #leaderboards {
.tables table {
tr td:nth-child(5) {
display: none;
}
}
}
}
@media only screen and (max-width: 900px) {
@ -294,41 +341,13 @@
#commandLineInput {
width: 600px !important;
}
#leaderboardsWrapper {
#leaderboards {
.leaderboardsTop {
flex-direction: column;
align-items: baseline;
grid-template-areas:
"title title"
"subtitle subtitle"
"yesterday yesterday"
"buttons buttons";
grid-template-columns: 1fr;
.buttons {
margin-top: 0.5rem;
}
.buttonGroup {
grid-auto-flow: column;
}
.showYesterdayButton {
margin-left: 0;
}
}
.tables {
grid-template-columns: unset;
table {
.avatarNameBadge .badge .text {
display: block;
}
tr td:last-child {
width: 30%;
}
}
}
.tables .rightTableWrapper,
.tables .leftTableWrapper {
height: calc(50vh - 10rem);
}
@media only screen and (max-width: 750px) {
#leaderboardsWrapper #leaderboards {
.tables table {
tr td:nth-child(5) {
display: none;
}
}
}
@ -371,6 +390,24 @@
}
@media only screen and (max-width: 650px) {
#leaderboardsWrapper #leaderboards {
width: 85vw;
.tables .rightTableWrapper,
.tables .leftTableWrapper {
height: calc(50vh - 10rem);
}
.tables {
grid-template-columns: unset;
table {
.avatarNameBadge .badge .text {
display: block;
}
tr td:nth-child(4) {
display: none;
}
}
}
}
.profile {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
@ -767,24 +804,6 @@
#commandLineInput {
width: 400px !important;
}
#leaderboardsWrapper #leaderboards {
width: 85vw;
.tables .rightTableWrapper,
.tables .leftTableWrapper {
height: calc(50vh - 10rem);
}
.tables {
grid-template-columns: unset;
table {
.avatarNameBadge .badge .text {
display: block;
}
tr td:nth-child(4) {
display: none;
}
}
}
}
}
@media only screen and (max-width: 400px) {