monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-12-29 03:20:46 +08:00
Code Issues Projects Releases Packages Wiki Activity

optimised media queries for the account page

Browse source
This commit is contained in:
Jack 2021-10-25 01:21:58 +01:00
parent 6c51980479
commit f3616fe2ae
3 changed files with 86 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/sass/account.scss
View file

@ -122,6 +122,14 @@
color: var(--sub-color);
}
&.personalBestTables {
.tables {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}
&.history {
.active {
animation: flashHighlight 4s linear 0s 1;

74
src/sass/z_media-queries.scss
View file

@ -78,6 +78,25 @@
padding: 0.25rem 0;
}
}
.pageAccount {
.group.personalBestTables {
.tables {
grid-template-columns: 1fr;
}
}
.group.history {
table {
thead,
tbody {
td:nth-child(1),
td:nth-child(8),
td:nth-child(9) {
display: none;
}
}
}
}
}
}
@media only screen and (max-width: 800px) {
@ -149,6 +168,32 @@
}
}
}
.pageAccount {
.triplegroup {
grid-template-columns: 1fr 1fr;
.emptygroup {
display: none;
}
}
.group.chart .below {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.group.topFilters .buttonsAndTitle .buttons {
display: grid;
justify-content: unset;
}
.group.history {
table {
thead,
tbody {
td:nth-child(6) {
display: none;
}
}
}
}
}
}
@media only screen and (max-width: 650px) {
@ -269,6 +314,19 @@
}
}
}
.pageAccount {
.group.history {
table {
thead,
tbody {
td:nth-child(7),
td:nth-child(5) {
display: none;
}
}
}
}
}
}
@media only screen and (max-width: 500px) {
@ -302,6 +360,22 @@
}
}
.pageAccount {
.triplegroup {
grid-template-columns: 1fr;
}
.group.history {
table {
thead,
tbody {
td:nth-child(3) {
display: none;
}
}
}
}
}
#top {
align-items: self-end;
.logo {

14
static/index.html
View file

@ -4049,15 +4049,9 @@
</div>
</div>
<div class="group createdDate">Account created on -</div>
<div class="group">
<div class="group personalBestTables">
<div class="title">personal bests</div>
<div
style="
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
"
>
<div class="tables">
<div class="titleAndTable timePbTable">
<table width="100%">
<thead>
@ -4360,7 +4354,7 @@
</div>
<div class="val">-</div>
</div>
<div></div>
<div class="emptygroup"></div>
<div class="group avgAcc">
<div class="title">avg accuracy</div>
<div class="val">-</div>
@ -4373,7 +4367,7 @@
</div>
<div class="val">-</div>
</div>
<div></div>
<div class="emptygroup"></div>
<div class="group avgCons">
<div class="title">avg consistency</div>
<div class="val">-</div>