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

style(typing test): align mini progress with the words, not the content width

Browse source
This commit is contained in:
Miodec 2024-04-26 19:35:14 +02:00
parent ed9ec67264
commit 155c348850
3 changed files with 14 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/html/pages/test.html
View file

@ -104,7 +104,7 @@
<div id="timerNumber" class="timerMain">
<div>60</div>
</div>
<div id="miniTimerAndLiveWpm" class="timerMain">
<div id="miniTimerAndLiveWpm" class="full-width-padding timerMain">
<div class="time hidden">1:00</div>
<div class="wpm hidden">60</div>
<div class="acc hidden">100%</div>

3
frontend/src/styles/test.scss
View file

@ -1144,11 +1144,10 @@
height: 0;
margin-left: 0.25em;
display: flex;
position: absolute;
margin-top: -1.25em;
color: black;
div {
margin-top: -1.25em;
font-size: 1em;
line-height: 1em;
}

14
frontend/src/ts/test/test-ui.ts
View file

@ -1530,9 +1530,19 @@ ConfigEvent.subscribe((key, value) => {
}
if (key === "tapeMode") {
if (value === "off") {
$("#typingTest").css("max-width", "70ch");
$("#typingTest").css({
"max-width": "70ch%",
});
$("#miniTimerAndLiveWpm").css({
"grid-column": "full-width-padding",
});
} else {
$("#typingTest").css("max-width", "100%");
$("#typingTest").css({
"max-width": "100%",
});
$("#miniTimerAndLiveWpm").css({
"grid-column": "content",
});
}
}
});