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

fixed indicate typos below requiring more space below words

Browse source
This commit is contained in:
Miodec 2022-04-26 15:41:13 +02:00
parent 11d83e6213
commit 593b30c39f
2 changed files with 39 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -256,30 +256,47 @@
&.tape {
&.size125 .word {
margin: 0.31rem;
margin: 0.31rem 0.62rem 0.31rem 0;
}
&.size15 .word {
margin: 0.37rem;
margin: 0.37rem 0.74rem 0.37rem 0;
}
&.size2 .word {
margin: 0.5rem;
margin: 0.5rem 1rem 0.5rem 0;
}
&.size3 .word {
margin: 0.75rem;
margin: 0.75rem 1.5rem 0.75rem 0;
}
&.size4 .word {
margin: 1rem;
margin: 1rem 2rem 1rem 0;
}
}
&.tape.indicateTyposBelow {
&.size125 .word {
margin: 0.31rem 0.62rem 0.93rem 0;
}
&.size15 .word {
margin: 0.37rem 0.74rem 1.11rem 0;
}
&.size2 .word {
margin: 0.5rem 1rem 1.5rem 0;
}
&.size3 .word {
margin: 0.75rem 1.5rem 2.25rem 0;
}
&.size4 .word {
margin: 1rem 2rem 3rem 0;
}
}
}
.word {

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

@ -132,6 +132,22 @@ function getWordHTML(word: string): string {
export function showWords(): void {
$("#words").empty();
if (Config.tapeMode !== "off") {
$("#words").addClass("tape");
$("#wordsWrapper").addClass("tape");
} else {
$("#words").removeClass("tape");
$("#wordsWrapper").removeClass("tape");
}
if (Config.indicateTypos === "below") {
$("#words").addClass("indicateTyposBelow");
$("#wordsWrapper").addClass("indicateTyposBelow");
} else {
$("#words").removeClass("indicateTyposBelow");
$("#wordsWrapper").removeClass("indicateTyposBelow");
}
let wordsHTML = "";
if (Config.mode !== "zen") {
for (let i = 0; i < TestWords.words.length; i++) {
@ -168,22 +184,13 @@ export function showWords(): void {
$(".outOfFocusWarning").css("line-height", nh + "px");
} else {
if (Config.tapeMode !== "off") {
let multiplier = 1;
if (Config.fontSize === "125") multiplier = 1.25;
if (Config.fontSize === "15") multiplier = 1.45;
if (Config.fontSize === "2") multiplier = 2;
if (Config.fontSize === "3") multiplier = 3;
if (Config.fontSize === "4") multiplier = 4;
const wrapperHeight =
wordHeight + Misc.convertRemToPixels(0.34) * multiplier;
const wrapperHeight = wordHeight;
$("#words")
.css("height", wordHeight * 2 + "px")
.css("overflow", "hidden")
.css("width", "200%")
.css("margin-left", "50%");
$("#words").addClass("tape");
$("#wordsWrapper").addClass("tape");
$("#wordsWrapper")
.css("height", wrapperHeight + "px")
.css("overflow", "hidden");
@ -194,8 +201,6 @@ export function showWords(): void {
.css("overflow", "hidden")
.css("width", "100%")
.css("margin-left", "unset");
$("#words").removeClass("tape");
$("#wordsWrapper").removeClass("tape");
$("#wordsWrapper")
.css("height", wordHeight * 3 + "px")
.css("overflow", "hidden");