fix: balloon message clipping on the result page

closes #6016
This commit is contained in:
Miodec 2024-11-08 14:42:03 +01:00
parent 05d88af732
commit 527d65702a
2 changed files with 14 additions and 12 deletions

View file

@ -242,7 +242,7 @@
<div class="top">characters</div>
<div
class="bottom"
aria-label="correct, incorrect, extra, and missed"
aria-label="correct&NewLine;incorrect&NewLine;extra&NewLine;missed"
data-balloon-break=""
data-balloon-pos="up"
>

View file

@ -268,7 +268,7 @@ function updateWpmAndAcc(): void {
$("#result .stats .acc .bottom").attr(
"aria-label",
`${TestInput.accuracy.correct} correct / ${TestInput.accuracy.incorrect} incorrect`
`${TestInput.accuracy.correct} correct\n${TestInput.accuracy.incorrect} incorrect`
);
} else {
//not showing decimal places
@ -287,16 +287,18 @@ function updateWpmAndAcc(): void {
$("#result .stats .wpm .bottom").attr("aria-label", wpmHover);
$("#result .stats .raw .bottom").attr("aria-label", rawWpmHover);
$("#result .stats .acc .bottom").attr(
"aria-label",
`${
result.acc === 100
? "100"
: Format.percentage(result.acc, { showDecimalPlaces: true })
} (${TestInput.accuracy.correct} correct / ${
TestInput.accuracy.incorrect
} incorrect)`
);
$("#result .stats .acc .bottom")
.attr(
"aria-label",
`${
result.acc === 100
? "100%"
: Format.percentage(result.acc, { showDecimalPlaces: true })
}\n${TestInput.accuracy.correct} correct\n${
TestInput.accuracy.incorrect
} incorrect`
)
.attr("data-balloon-break", "");
}
}