Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add completion marker to daily challenge profile counter #11780

Merged
merged 10 commits into from
Jan 16, 2025
Merged

Add completion marker to daily challenge profile counter #11780

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9fc4d20
Add completion marker to daily challenge profile counter
bdach Jan 9, 2025
b8adbac
Adjust radius of inner box
bdach Jan 9, 2025
5f2ab58
Remove superfluous div
bdach Jan 9, 2025
e69ab6a
Apply review suggestions
bdach Jan 15, 2025
18b2ecf
Merge branch 'master' into daily-challenge-completion-marker
bdach Jan 15, 2025
bf0333a
Invert checkmark colouring (and adjust sizing to match design better)
bdach Jan 16, 2025
0600f1b
Only show completion indicator on user's own profile
bdach Jan 16, 2025
dfb9918
Fix mixin order
bdach Jan 16, 2025
8e30dde
Simplify size spec using property-as-variable
bdach Jan 16, 2025
3c70a3c
Merge branch 'master' into daily-challenge-completion-marker
nanaya Jan 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 24 additions & 2 deletions resources/css/bem/daily-challenge.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,31 @@
background: hsl(var(--hsl-b4));
border-radius: @border-radius-large;
min-width: 0;
position: relative;
display: flex;
align-items: center;
padding: 3px;
padding: 1px;
border: 2px solid transparent;

&--played-today {
border-color: @osu-colour-lime-1;

&::before {
.fas();
.center-content();
background-color: @osu-colour-lime-1;
border-radius: 50%;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

while at it, this doesn't actually do anything, does this? The fa icon is already rounded and all

Copy link
Contributor Author

@bdach bdach Jan 16, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The fontawesome icon is rounded but it has a hollow interior where the tick is. So without some hackage the border will peek out of the hollow interior, thus the background-color + border-radius specs are supposed to cover up anything that's in the background (particularly the border).

Copy link
Collaborator

@nanaya nanaya Jan 16, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh. So that also explained the weirdly subtle black outline... 🤔

I suppose an alternative would be to use normal check mark (b6 colored) coupled with circle background (lime-1 colored), centered using .center-content()

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah that's a fair shout. Adjusted further in bf0333a.

I also took the opportunity to resize the tick itself because for whatever reason when using the pre-baked fontawesome check-circle the check was much larger than it actually was in the figma. It should be there-or-thereabouts matching now.

color: @osu-colour-b6;
content: @fa-var-check;
font-size: 8px; // icon size
height: 16px;
position: absolute;
right: 0;
top: 0;
transform: translate(50%, -50%);
width: $height;
}
}

&__name {
font-size: @font-size--normal;
Expand All @@ -20,7 +42,7 @@
}

&__value-box {
border-radius: @border-radius-large;
border-radius: @border-radius-small;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adjusted as per mention in #11597:

also, the corner radius of that darker block is supposed to be 3px, it's 6px on osu-web rn for some reason.

background: hsl(var(--hsl-b6));
padding: 5px 10px;
}
Expand Down
7 changes: 6 additions & 1 deletion resources/js/profile-page/daily-challenge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
import DailyChallengeUserStatsJson from 'interfaces/daily-challenge-user-stats-json';
import { autorun } from 'mobx';
import { observer } from 'mobx-react';
import * as moment from 'moment';
import core from 'osu-core-singleton';
import * as React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import { classWithModifiers, Modifiers } from 'utils/css';
Expand Down Expand Up @@ -122,10 +124,13 @@ export default class DailyChallenge extends React.Component<Props> {
return null;
}

const playedToday = this.props.stats.last_update !== null && moment.utc(this.props.stats.last_update).isSame(Date.now(), 'day');
const userIsOnOwnProfile = this.props.stats.user_id === core.currentUser?.id;

return (
<div
ref={this.valueRef}
className='daily-challenge'
className={classWithModifiers('daily-challenge', { 'played-today': playedToday && userIsOnOwnProfile })}
onMouseOver={this.onMouseOver}
>
<div className='daily-challenge__name'>
Expand Down
Loading