monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-11-09 21:51:29 +08:00
Code Issues Projects Releases Packages Wiki Activity

impr(profile): add level percentage when hovering over progress bar (vjgtigers) (#5276)

Browse source
This commit is contained in:
Vaughn Gugger 2024-04-05 06:24:36 -04:00 • committed by GitHub
parent 2dbd7afa10
commit e37bf192e3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 18 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/html/header.html
View file

@ -114,7 +114,7 @@
<div class="avatar hidden"></div>
<div class="text"></div>
<div class="levelAndBar">
<div class="level">1</div>
<div class="level" data-balloon-pos="up">1</div>
<div class="xpBar">
<div class="bar"></div>
<div class="xpGain"></div>

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

@ -46,7 +46,7 @@
</div>
<div class="levelAndBar">
<div class="level" data-balloon-pos="up">-</div>
<div class="xpBar">
<div class="xpBar" data-balloon-pos="up">
<div class="bar" style="width: 0%"></div>
</div>
<div class="xp" data-balloon-pos="up">-/-</div>

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

@ -38,7 +38,7 @@
</div>
<div class="levelAndBar">
<div class="level" data-balloon-pos="up">-</div>
<div class="xpBar">
<div class="xpBar" data-balloon-pos="up">
<div class="bar" style="width: 0%"></div>
</div>
<div class="xp" data-balloon-pos="up">-/-</div>

8
frontend/src/styles/profile.scss
View file

@ -414,10 +414,14 @@
grid-template-columns: auto 1fr auto;
gap: 1rem;
align-items: center;
.level,
.xp {
line-height: 0;
}
.xpBar {
pointer-events: none;
pointer-events: auto;
height: 0.5rem;
bottom: -0.25rem;
bottom: 0rem;
width: 100%;
left: 0;
background: var(--bg-color);

14
frontend/src/ts/elements/profile.ts
View file

@ -305,19 +305,19 @@ export async function update(
`${Numbers.abbreviateNumber(xpToDisplay)}/${Numbers.abbreviateNumber(
xpForLevel
)}`
);
details
.find(".xpBar .bar")
.css("width", `${(xpToDisplay / xpForLevel) * 100}%`);
details
.find(".xp")
)
.attr(
"aria-label",
`${Numbers.abbreviateNumber(
xpForLevel - xpToDisplay
)} xp until next level`
);
details
.find(".xpBar .bar")
.css("width", `${(xpToDisplay / xpForLevel) * 100}%`);
details
.find(".xpBar")
.attr("aria-label", `${((xpToDisplay / xpForLevel) * 100).toFixed(2)}%`);
//lbs
if (banned) {

4
frontend/src/ts/pages/profile.ts
View file

@ -29,8 +29,8 @@ function reset(): void {
<div class="streak" data-balloon-pos="up">-</div>
</div>
<div class="levelAndBar">
<div class="level">-</div>
<div class="xpBar">
<div class="level" data-balloon-pos="up">-</div>
<div class="xpBar" data-balloon-pos="up">
<div class="bar" style="width: 0%;"></div>
</div>
<div class="xp" data-balloon-pos="up">-/-</div>