mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2024-09-20 07:16:17 +08:00
fix: multi-line words causing issues in ui scrolling and tape mode (@NadAlaba, @Miodec) (#5857)
This commit is contained in:
parent
b06b9f73e5
commit
618d53ebff
|
@ -263,6 +263,7 @@
|
|||
|
||||
&.tape .word {
|
||||
margin: 0.25em 0.6em 0.75em 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* a little hack for right-to-left languages */
|
||||
|
@ -529,7 +530,9 @@
|
|||
}
|
||||
|
||||
#wordsInput {
|
||||
font-size: 1rem;
|
||||
width: 1ch;
|
||||
font-size: 1em;
|
||||
height: 1em;
|
||||
opacity: 0;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
|
|
|
@ -1763,7 +1763,7 @@ export function setFontSize(
|
|||
|
||||
config.fontSize = fontSize;
|
||||
|
||||
$("#caret, #paceCaret, #liveStatsMini, #typingTest").css(
|
||||
$("#caret, #paceCaret, #liveStatsMini, #typingTest, #wordsInput").css(
|
||||
"fontSize",
|
||||
fontSize + "rem"
|
||||
);
|
||||
|
|
|
@ -457,41 +457,32 @@ export async function updateWordsInputPosition(initial = false): Promise<void> {
|
|||
const activeWordMargin =
|
||||
parseInt(computed.marginTop) + parseInt(computed.marginBottom);
|
||||
|
||||
// const wordsWrapperTop =
|
||||
// (document.querySelector("#wordsWrapper") as HTMLElement | null)
|
||||
// ?.offsetTop ?? 0;
|
||||
const letterHeight = Numbers.convertRemToPixels(Config.fontSize);
|
||||
const targetTop =
|
||||
activeWord.offsetTop + letterHeight / 2 - el.offsetHeight / 2 + 1; //+1 for half of border
|
||||
|
||||
if (activeWord.offsetWidth < letterHeight) {
|
||||
el.style.width = letterHeight + "px";
|
||||
} else {
|
||||
el.style.width = activeWord.offsetWidth + "px";
|
||||
}
|
||||
|
||||
if (Config.tapeMode !== "off") {
|
||||
el.style.top =
|
||||
// wordsWrapperTop +
|
||||
activeWord.offsetHeight +
|
||||
activeWordMargin * 0.25 +
|
||||
-el.offsetHeight +
|
||||
"px";
|
||||
el.style.top = targetTop + "px";
|
||||
el.style.left = activeWord.offsetLeft + "px";
|
||||
return;
|
||||
}
|
||||
|
||||
if (isLanguageRTL) {
|
||||
el.style.left =
|
||||
activeWord.offsetLeft - el.offsetWidth + activeWord.offsetWidth + "px";
|
||||
if (initial) {
|
||||
el.style.top = targetTop + letterHeight + activeWordMargin + 4 + "px";
|
||||
} else {
|
||||
el.style.left = activeWord.offsetLeft + "px";
|
||||
el.style.top = targetTop + "px";
|
||||
}
|
||||
|
||||
if (
|
||||
initial &&
|
||||
!posUpdateLangList.some((l) => Config.language.startsWith(l))
|
||||
) {
|
||||
el.style.top =
|
||||
activeWord.offsetTop +
|
||||
activeWord.offsetHeight +
|
||||
-el.offsetHeight +
|
||||
(activeWord.offsetHeight + activeWordMargin) +
|
||||
"px";
|
||||
if (activeWord.offsetWidth < letterHeight && isLanguageRTL) {
|
||||
el.style.left = activeWord.offsetLeft - letterHeight + "px";
|
||||
} else {
|
||||
el.style.top =
|
||||
activeWord.offsetTop + activeWord.offsetHeight + -el.offsetHeight + "px";
|
||||
el.style.left = activeWord.offsetLeft + "px";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue