Skip to content

Commit

Permalink
refactor: media queries (#5329)
Browse files Browse the repository at this point in the history
  • Loading branch information
Miodec committed Apr 24, 2024
1 parent c8e61d5 commit 4039ed8
Show file tree
Hide file tree
Showing 28 changed files with 1,878 additions and 1,170 deletions.
1 change: 0 additions & 1 deletion backend/src/api/schemas/config-schema.ts
Expand Up @@ -105,7 +105,6 @@ const CONFIG_SCHEMA = joi.object({
.valid("off", "average", "pb", "last", "daily", "custom"),
paceCaretCustomSpeed: joi.number().min(0),
repeatedPace: joi.boolean(),
pageWidth: joi.string().valid("100", "125", "150", "200", "max"),
accountChart: joi
.array()
.items(joi.string().valid("on", "off"))
Expand Down
14 changes: 0 additions & 14 deletions frontend/src/html/pages/settings.html
Expand Up @@ -920,20 +920,6 @@
<!-- <div class="text">Change the font family for the site</div> -->
<div class="buttons"></div>
</div>
<div class="section" data-config-name="pageWidth">
<div class="groupTitle">
<i class="fas fa-arrows-alt-h"></i>
<span>page width</span>
</div>
<div class="text">Control the width of the content.</div>
<div class="buttons">
<button data-config-value="100">100%</button>
<button data-config-value="125">125%</button>
<button data-config-value="150">150%</button>
<button data-config-value="200">200%</button>
<button data-config-value="max">max</button>
</div>
</div>
<div class="section" data-config-name="keymapMode">
<div class="groupTitle">
<i class="fas fa-keyboard"></i>
Expand Down
1 change: 1 addition & 0 deletions frontend/src/index.html
Expand Up @@ -3,6 +3,7 @@
<load src="html/head.html" />

<body>
<div id="mediaQueryDebug"></div>
<load src="html/warnings.html" />
<div id="fpsCounter" class="hidden"></div>
<div class="customBackground"></div>
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/styles/about.scss
Expand Up @@ -53,7 +53,8 @@
.supporters,
.contributors {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
// grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
gap: 0.25rem;
color: var(--text-color);
}
Expand Down
11 changes: 8 additions & 3 deletions frontend/src/styles/account.scss
Expand Up @@ -73,7 +73,7 @@

.presetFilterButtons .buttons {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
gap: 1rem;
}

Expand Down Expand Up @@ -263,12 +263,16 @@

.title {
color: var(--sub-color);
margin-bottom: 0.5em;
// margin-bottom: 0.25em;
}

.avgres {
font-size: 0.75em;
}

.val {
font-size: 3rem;
line-height: 3.5rem;
line-height: 1.1;
}

.chartjs-render-monitor {
Expand All @@ -284,6 +288,7 @@
margin-bottom: 1rem;
color: var(--sub-color);
flex-wrap: wrap;
row-gap: 0.5em;

.group {
display: flex;
Expand Down
16 changes: 2 additions & 14 deletions frontend/src/styles/core.scss
Expand Up @@ -43,20 +43,8 @@

#app {
display: grid;
grid-template-columns: auto minmax(0, 1000px) auto;
grid-template-columns: auto 1536px auto;
justify-items: center;
&.wide125 {
grid-template-columns: auto minmax(0, 1250px) auto;
}
&.wide150 {
grid-template-columns: auto minmax(0, 1500px) auto;
}
&.wide200 {
grid-template-columns: auto minmax(0, 2000px) auto;
}
&.widemax {
grid-template-columns: auto minmax(0, 1fr) auto;
}
}

#nocss {
Expand Down Expand Up @@ -129,7 +117,7 @@ body {
}

#contentWrapper {
max-width: 1000px;
max-width: 1536px;
// min-width: 500px;
// margin: 0 auto;
display: grid;
Expand Down
28 changes: 14 additions & 14 deletions frontend/src/styles/footer.scss
Expand Up @@ -4,7 +4,7 @@ footer {
line-height: 1rem;
font-size: 0.75rem;
color: var(--sub-color);
margin: -0.5em;
// margin: -0.5em;

.keyTips {
transition: 0.125s;
Expand All @@ -17,9 +17,10 @@ footer {

#commandLineMobileButton {
display: none;
top: -4rem;
left: 0;
position: absolute;
// top: -4rem;
bottom: 2rem;
left: 2rem;
position: fixed;
font-size: 1rem;
width: 3rem;
height: 3rem;
Expand All @@ -34,10 +35,12 @@ footer {
}

.leftright {
margin: -0.5em;
-webkit-user-select: none;
user-select: none;
display: grid;
grid-template-columns: auto auto;
grid-template-columns: 1fr max-content;
gap: 2rem;
.textButton {
text-decoration: none;
font-size: 0.75rem;
Expand All @@ -46,19 +49,16 @@ footer {
}
.left {
text-align: left;
display: grid;
grid-auto-flow: column;
width: -moz-fit-content;
width: fit-content;
display: flex;
justify-items: start;
width: max-content;
}
.right {
text-align: right;
display: grid;
grid-auto-flow: column;
width: -moz-fit-content;
width: fit-content;
display: flex;
justify-self: right;
// align-items: center;
width: max-content;
height: max-content;
}
.left .textButton,
.right .textButton {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/styles/index.scss
@@ -1,4 +1,4 @@
@import "normalize.css", "buttons", "fonts", "404", "ads", "about", "account",
"animations", "banners", "caret", "commandline", "core", "footer", "inputs",
"keymap", "leaderboards", "login", "monkey", "nav", "notifications", "popups",
"profile", "scroll", "settings", "test", "z_media-queries";
"profile", "scroll", "settings", "test", "media-queries";
6 changes: 4 additions & 2 deletions frontend/src/styles/leaderboards.scss
@@ -1,7 +1,9 @@
#leaderboardsWrapper {
#leaderboards {
min-width: 300px;
width: 85vw;
// max-width: 300px;
max-width: 1536px;
width: 100%;
height: 100%;
// height: calc(95vh - 5rem);
overflow-y: auto;
background: var(--bg-color);
Expand Down
190 changes: 190 additions & 0 deletions frontend/src/styles/media-queries-blue.scss
@@ -0,0 +1,190 @@
@media only screen and (max-width: 778px) {
#mediaQueryDebug {
background: #29b6f6;
&::before {
content: "blue";
}
}
#app {
grid-template-columns: auto 640px auto;
}
#contentWrapper {
max-width: 640px;
}
#testConfig {
display: none;
}
#mobileTestConfigButton {
display: block;
}
#testModesNotice {
font-size: 0.8rem;
}
.page404 {
.content {
grid-template-columns: 300px;
grid-auto-flow: unset;
gap: 1rem;
}
}
.pageTest {
#result {
grid-template-columns: 1fr;
grid-template-areas:
"stats" "chart"
"morestats";
.stats {
grid-template-columns: 1fr 1fr;
grid-template-areas: "wpm acc";
justify-items: center;
}
.stats.morestats {
gap: 1rem;
justify-items: start;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
}
}
.pageAbout {
.triplegroup {
grid-template-columns: 1fr;
}
}
.pageAccount {
.triplegroup.stats {
.title {
font-size: 0.75rem;
}
.val {
font-size: 1.5rem;
}
}
.group.estimatedWordsTyped {
.val {
font-size: 2rem;
}
}
.group.history table thead td:nth-child(7),
.group.history table tbody td:nth-child(7) {
display: none;
}
}
.pageSettings {
.section {
grid-template-columns: 1fr;
grid-template-areas:
"title"
"text" "buttons";
&.discordIntegration .info {
margin: 1rem 0;
}
.customThemeEdit {
.spacer {
display: none;
}
.customThemeInputs {
grid-template-columns: 1fr 1.5fr;
}
.customThemeButtons {
grid-template-columns: 1fr;
}
}
}
}
.profile {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
grid-template-areas:
"info"
"leaderboards"
"pbsTime"
"pbsWords";
.details.none {
grid-template-areas:
"avAndName"
"typingStats";
grid-template-columns: 1fr;
.separator {
display: none;
}
.typingStats {
grid-template-columns: 1fr 1fr 1fr;
}
}
.details.bioAndKey {
grid-template-areas:
"avAndName bioAndKey"
"typingStats typingStats";
grid-template-columns: 1fr 1fr;
.separator {
display: none;
}
.typingStats {
grid-template-columns: 1fr 1fr 1fr;
}
}
.details.soc {
grid-template-areas:
"avAndName"
"typingStats"
"socials";
grid-template-columns: 1fr;
.separator {
display: none;
}
.typingStats {
grid-template-columns: 1fr 1fr 1fr;
}
.socials {
justify-content: start;
.title {
display: block;
}
.value {
grid-auto-flow: column;
}
}
}
.details.both {
grid-template-areas:
"avAndName bioAndKey"
"typingStats typingStats"
"socials socials";
grid-template-columns: 1fr 1fr;
.separator {
display: none;
}
.typingStats {
grid-template-columns: 1fr 1fr 1fr;
}
.socials {
height: 100%; //dumb safari fix
justify-content: start;
.title {
display: block;
}
.value {
grid-auto-flow: column;
}
}
}
}
#leaderboardsWrapper #leaderboards .leaderboardsTop {
grid-template-columns: 1fr 1fr;
grid-template-areas: "title title" "subtitle yesterday" "buttons buttons";
.buttons .timeRange {
grid-template-columns: 1fr 1fr 1fr;
.languageSelect {
grid-column: span 1;
}
}
}
}

@media (pointer: coarse) and (max-width: 778px) {
#restartTestButton {
display: block !important;
}
}

0 comments on commit 4039ed8

Please sign in to comment.