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

fix(typing test): incorrect input placement causing weird scrolling behavior

Browse source
This commit is contained in:
Miodec 2024-04-26 18:22:21 +02:00
parent bc2c39cd6c
commit 779d34c7ea
2 changed files with 21 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -110,25 +110,25 @@
<div class="acc hidden">100%</div>
<div class="burst hidden">1</div>
</div>
<input
id="wordsInput"
class=""
type="text"
autocomplete="off"
autocapitalize="off"
autocapitalize="none"
autocorrect="off"
data-gramm="false"
data-gramm_editor="false"
data-enable-grammarly="false"
list="autocompleteOff"
spellcheck="false"
/>
<div
id="wordsWrapper"
class="content-grid full-width-padding"
translate="no"
>
<input
id="wordsInput"
class="full-width"
type="text"
autocomplete="off"
autocapitalize="off"
autocapitalize="none"
autocorrect="off"
data-gramm="false"
data-gramm_editor="false"
data-enable-grammarly="false"
list="autocompleteOff"
spellcheck="false"
/>
<div class="outOfFocusWarning hidden">
<i class="fas fa-fw fa-mouse-pointer"></i>
Click here or press any key to focus

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

@ -383,13 +383,13 @@ export function updateWordsInputPosition(initial = false): void {
const activeWordMargin =
parseInt(computed.marginTop) + parseInt(computed.marginBottom);
const wordsWrapperTop =
(document.querySelector("#wordsWrapper") as HTMLElement | null)
?.offsetTop ?? 0;
// const wordsWrapperTop =
// (document.querySelector("#wordsWrapper") as HTMLElement | null)
// ?.offsetTop ?? 0;
if (Config.tapeMode !== "off") {
el.style.top =
wordsWrapperTop +
// wordsWrapperTop +
activeWord.offsetHeight +
activeWordMargin * 0.25 +
-el.offsetHeight +
@ -404,7 +404,7 @@ export function updateWordsInputPosition(initial = false): void {
) {
el.style.left = "0px";
el.style.top =
wordsWrapperTop +
// wordsWrapperTop +
activeWord.offsetHeight * 2 +
activeWordMargin * 1.5 +
-el.offsetHeight +
@ -414,7 +414,7 @@ export function updateWordsInputPosition(initial = false): void {
el.style.top =
activeWord.offsetTop -
activeWordMargin +
wordsWrapperTop +
// wordsWrapperTop +
activeWord.offsetHeight +
activeWordMargin +
-el.offsetHeight +
@ -1530,7 +1530,7 @@ ConfigEvent.subscribe((key, value) => {
}
if (key === "tapeMode") {
if (value === "off") {
$("#typingTest").css("max-width", "70ch");
$("#typingTest").css("max-width", "100%");
} else {
$("#typingTest").css("max-width", "100%");
}