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

reworked leaderboards media queries. should fix #2488

Browse source
This commit is contained in:
Miodec 2022-02-19 15:52:14 +01:00
parent f0313d6524
commit c3825ab54e
3 changed files with 104 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
frontend/src/styles/leaderboards.scss
View file

@ -1,14 +1,15 @@
#leaderboardsWrapper {
#leaderboards {
min-width: 300px;
width: 85vw;
// height: calc(95vh - 5rem);
overflow-y: auto;
background: var(--bg-color);
border-radius: var(--roundness);
padding: 2rem;
padding: 1rem;
display: grid;
gap: 2rem 0;
grid-template-rows: 3rem auto;
gap: 1rem 0;
grid-template-rows: 2rem auto;
grid-template-areas:
"title buttons"
"tables tables";
@ -27,8 +28,8 @@
}
.mainTitle {
font-size: 3rem;
line-height: 3rem;
font-size: 2.5rem;
line-height: 2.5rem;
grid-area: title;
}
@ -37,7 +38,7 @@
}
.title {
font-size: 2rem;
font-size: 1.5rem;
line-height: 2rem;
margin-bottom: 0.5rem;
}
@ -67,10 +68,10 @@
grid-template-columns: 1fr auto;
.buttons {
display: grid;
grid-template-columns: auto 1fr 1fr;
grid-template-columns: 1fr 1fr;
align-items: center;
// margin-top: .1rem;
gap: 1rem;
gap: 0.5rem;
color: var(--sub-color);
.button {
padding-left: 1rem;
@ -82,7 +83,7 @@
.title {
grid-area: 1/1;
margin-bottom: 0;
line-height: 2.5rem;
line-height: 2rem;
}
.subtitle {
@ -95,7 +96,7 @@
.leftTableWrapper,
.rightTableWrapper {
height: calc(100vh - 22rem);
height: calc(100vh - 12rem);
@extend .ffscroll;
overflow-y: scroll;
overflow-x: auto;

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

@ -1,12 +1,34 @@
@media only screen and (max-width: 1200px) {
#leaderboardsWrapper {
#leaderboards {
.tables {
grid-template-columns: unset;
@media only screen and (max-width: 1250px) {
#leaderboardsWrapper #leaderboards {
grid-template-rows: 1.5rem auto;
padding: 1rem;
gap: 1rem;
.mainTitle {
font-size: 2rem;
line-height: 2rem;
}
.title {
font-size: 1rem;
}
.leaderboardsTop {
.buttonGroup {
gap: 0.1rem !important;
.button {
padding: 0.4rem !important;
font-size: 0.7rem !important;
}
}
.tables .rightTableWrapper,
.tables .leftTableWrapper {
height: calc(50vh - 12rem);
}
.tables table {
tr td:first-child {
padding-left: 0.25rem;
}
tr td:last-child {
padding-right: 0.25rem;
}
td {
padding: 0.25rem 0.5rem;
}
}
}
@ -61,6 +83,13 @@
}
}
}
#leaderboardsWrapper #leaderboards {
.tables table {
tr td:nth-child(5) {
display: none;
}
}
}
}
@media only screen and (max-width: 900px) {
@ -173,17 +202,19 @@
#commandLineInput {
width: 600px !important;
}
}
@media only screen and (max-width: 700px) {
#leaderboardsWrapper {
#leaderboards {
.leaderboardsTop {
flex-direction: column;
align-items: baseline;
#leaderboardsWrapper #leaderboards {
.tables table {
tr td:nth-child(4) {
display: none;
}
tr td:last-child {
width: 30%;
}
}
}
}
@media only screen and (max-width: 700px) {
.pageAccount {
.triplegroup {
grid-template-columns: 1fr 1fr;
@ -265,6 +296,23 @@
.pageSettings .section.fullWidth .buttons {
grid-template-columns: 1fr 1fr;
}
#leaderboardsWrapper {
#leaderboards {
grid-template-rows: 2.5rem auto;
.leaderboardsTop {
flex-direction: column;
align-items: baseline;
}
.tables {
grid-template-columns: unset;
}
.tables .rightTableWrapper,
.tables .leftTableWrapper {
height: calc(50vh - 8rem);
}
}
}
}
@media only screen and (max-width: 600px) {
@ -314,38 +362,7 @@
}
}
}
#leaderboardsWrapper #leaderboards {
padding: 1rem;
gap: 1rem;
.mainTitle {
font-size: 2rem;
line-height: 2rem;
}
.title {
font-size: 1rem;
}
.leaderboardsTop {
.buttonGroup {
gap: 0.1rem !important;
.button {
padding: 0.4rem !important;
font-size: 0.7rem !important;
}
}
}
.tables table {
tr td:first-child {
padding-left: 0.25rem;
}
tr td:last-child {
padding-right: 0.25rem;
}
td {
padding: 0.25rem;
}
}
}
.pageAccount {
.group.history {
table {
@ -518,26 +535,11 @@
#commandLineInput {
width: 400px !important;
}
#leaderboardsWrapper #leaderboards {
.tables .titleAndTable .titleAndButtons {
grid-template-columns: unset;
}
.tables table {
thead,
tbody,
tfoot {
font-size: 0.5rem;
}
tr td:first-child {
padding-left: 0.25rem;
}
tr td:last-child {
padding-right: 0.25rem;
}
td {
padding: 0.25rem;
}
width: 85vw;
.tables .rightTableWrapper,
.tables .leftTableWrapper {
height: calc(50vh - 7rem);
}
}
}
@ -579,6 +581,31 @@
#commandLineInput {
width: 300px !important;
}
#leaderboardsWrapper #leaderboards {
.tables .titleAndTable .titleAndButtons {
grid-template-columns: unset;
}
.tables table {
thead,
tbody,
tfoot {
// font-size: 0.5rem;
}
tr td:first-child {
padding-left: 0.25rem;
}
tr td:last-child {
padding-right: 0.25rem;
}
td {
padding: 0.25rem;
}
}
.tables .rightTableWrapper,
.tables .leftTableWrapper {
height: calc(50vh - 9rem);
}
}
}
@media only screen and (max-width: 350px) {

2
frontend/static/index.html
View file

@ -638,7 +638,6 @@
></i>
</div>
<div class="buttons">
Jump to:
<div class="button leftTableJumpToTop">
<i class="fas fa-fw fas fa-crown"></i>
<!-- Top -->
@ -683,7 +682,6 @@
></i>
</div>
<div class="buttons">
Jump to:
<div class="button rightTableJumpToTop">
<i class="fas fa-fw fas fa-crown"></i>
<!-- Top -->