Add completion marker to daily challenge profile counter #11780

bdach · 2025-01-09T09:31:04Z

Implements #11597 for the website.

Implements ppy#11597 for the website.

As mentioned in ppy#11597.

bdach · 2025-01-09T09:32:36Z

resources/css/bem/daily-challenge.less

+  position: relative;
+
+  &--played-today {
+    border: 2px solid @osu-colour-lime-1;


This is 1px on the design file but I find that 1px looks terrible on the rounded corners:

1px 2px

Arguably even 2px looks not great. Maybe 3px even could be considered. cc @ppy/team-design

the extra spacing between the day count box and the green border seems a bit weird?

also dunno if matters but the popup box covers the check mark a little bit

the extra spacing between the day count box and the green border seems a bit weird?

I mean yeah maybe. I'm just following design direction here 🤷

also dunno if matters but the popup box covers the check mark a little bit

Yeah it does and was also unsure if it mattered. I guess maybe the design peoples can say?

Just for visual reference here's a screenshot:

bdach · 2025-01-09T09:33:02Z

resources/css/bem/daily-challenge.less

@@ -20,7 +40,7 @@
  }

  &__value-box {
-    border-radius: @border-radius-large;
+    border-radius: @border-radius-small;


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.

bdach · 2025-01-09T09:33:36Z

resources/js/profile-page/daily-challenge.tsx

@@ -122,26 +123,30 @@ 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');


I think this is gonna do timezones correctly:

https://momentjs.com/docs/#/query/is-same/

If the two moments have different timezones, the timezone of the first moment will be used for the comparison.

and it looked correct when I messed around with my timezone...

yeah that seems correct (until someone complains it's not)

alternatively new Date(...).toISOString() spits out iso8601 string which has utc timezone and can then be sliced appropriately (not sure if better)

and can then be sliced appropriately (not sure if better)

I uh... am not confident in my ability to do so, so I'd rather not if that's fine with you 😅

bdach · 2025-01-09T09:34:45Z

resources/js/profile-page/daily-challenge.tsx

-              'users.show.daily_challenge.unit.day',
-              { value: formatNumber(this.props.stats.playcount) },
-            )}
+        <div className='daily-challenge__content'>


The reason for the existence of this div is that I need the ::before pseudo-element that is the check in the corner to be excluded from the flexbox, it takes space otherwise. If you have better ideas on how to implement this I'm open to changes.

absolute-positioned element, which the element is, doesn't take space...?

Huh. I guess I must have not tried some particular combination of css incantations because it does look to be not required now??? I love css.

(If you haven't figured out by now my css knowledge is somewhere at the level of "throw stuff against wall until it looks close enough" 😅)

nanaya · 2025-01-15T11:46:42Z

resources/css/bem/daily-challenge.less

  display: flex;
  align-items: center;
  padding: 3px;

+  &--played-today {
+    border: 2px solid @osu-colour-lime-1;


this should only change the border-color in the modifier here with the rest border set in the base class (with transparent color) to have consistent positioning between played and not

In the process of applying this I noticed that the border even if transparent was also stacking onto the existing 3px of padding (see screenshots below, with the border green colour changed to transparent to show the difference):

before after

which I didn't want to do and I don't think the design was going for, so I reduced the padding to 1px to compensate.

nanaya · 2025-01-15T11:48:23Z

resources/css/bem/daily-challenge.less

+      border-radius: 50%;
+      color: @osu-colour-lime-1;
+      content: @fa-var-check-circle;
+      font-size: 16px;


there has been an attempt on marking icon-specific hard coded font-size - instead of using variable - with // icon size comment

nanaya · 2025-01-15T11:49:32Z

resources/css/bem/daily-challenge.less

+      right: -8px;
+      top: -8px;


-0.5em works here (or 0 with ±50% translate transform if feeling fancy)

nanaya · 2025-01-15T12:09:16Z

resources/js/profile-page/daily-challenge.tsx

@@ -122,26 +123,30 @@ 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');


yeah that seems correct (until someone complains it's not)

alternatively new Date(...).toISOString() spits out iso8601 string which has utc timezone and can then be sliced appropriately (not sure if better)

nanaya · 2025-01-16T06:26:07Z

wait, is it only for own profile page or for any users? the design file says it's only for own page but this pr is currently for everyone

nanaya · 2025-01-16T11:22:57Z

resources/css/bem/daily-challenge.less

+    &::before {
+      .fas();
+      background-color: @osu-colour-b6;
+      border-radius: 50%;


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

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).

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()

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.

bdach · 2025-01-16T12:46:28Z

wait, is it only for own profile page or for any users? the design file says it's only for own page but this pr is currently for everyone

Yeah that was a reading fail... Attempted to address this in 0600f1b. I shamelessly stole the code to do this from somewhere else, let me know if that is fine.

nanaya · 2025-01-16T13:01:05Z

resources/css/bem/daily-challenge.less

+      .center-content();
+      .fas();


the order is kinda important as both define display: 😬

whoops. and i'm out here just reordering stuff so that it's in alphabet order without double checking...

nanaya · 2025-01-16T13:01:38Z

resources/css/bem/daily-challenge.less

+      right: 0;
+      top: 0;
+      transform: translate(50%, -50%);
+      width: 16px;


can use $height so only need to define it once

bdach added 2 commits January 9, 2025 10:26

Add completion marker to daily challenge profile counter

9fc4d20

Implements ppy#11597 for the website.

Adjust radius of inner box

b8adbac

As mentioned in ppy#11597.

bdach added the area:user-profile label Jan 9, 2025

bdach commented Jan 9, 2025

View reviewed changes

Remove superfluous div

5f2ab58

nanaya requested changes Jan 15, 2025

View reviewed changes

bdach added 2 commits January 15, 2025 14:47

Apply review suggestions

e69ab6a

Merge branch 'master' into daily-challenge-completion-marker

18b2ecf

nanaya reviewed Jan 16, 2025

View reviewed changes

bdach added 2 commits January 16, 2025 13:43

Invert checkmark colouring (and adjust sizing to match design better)

bf0333a

Only show completion indicator on user's own profile

0600f1b

nanaya requested changes Jan 16, 2025

View reviewed changes

bdach added 2 commits January 16, 2025 14:10

Fix mixin order

dfb9918

Simplify size spec using property-as-variable

8e30dde

nanaya approved these changes Jan 16, 2025

View reviewed changes

Merge branch 'master' into daily-challenge-completion-marker

3c70a3c

nanaya enabled auto-merge January 16, 2025 14:03

nanaya merged commit d9f4860 into ppy:master Jan 16, 2025
3 checks passed

bdach deleted the daily-challenge-completion-marker branch January 16, 2025 14:38

bdach mentioned this pull request Jan 17, 2025

Add completion marker to daily challenge profile counter ppy/osu#31543

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add completion marker to daily challenge profile counter #11780

Add completion marker to daily challenge profile counter #11780

bdach commented Jan 9, 2025 •

edited

Loading

bdach Jan 9, 2025

nanaya Jan 9, 2025

bdach Jan 9, 2025

bdach Jan 9, 2025

bdach Jan 9, 2025

nanaya Jan 15, 2025

bdach Jan 15, 2025

bdach Jan 9, 2025

nanaya Jan 9, 2025

bdach Jan 9, 2025 •

edited

Loading

nanaya Jan 15, 2025

bdach Jan 15, 2025

nanaya Jan 15, 2025

nanaya Jan 15, 2025

nanaya Jan 15, 2025

nanaya commented Jan 16, 2025

nanaya Jan 16, 2025

bdach Jan 16, 2025 •

edited

Loading

nanaya Jan 16, 2025 •

edited

Loading

bdach Jan 16, 2025

bdach commented Jan 16, 2025

nanaya Jan 16, 2025

bdach Jan 16, 2025

nanaya Jan 16, 2025

Add completion marker to daily challenge profile counter #11780

Add completion marker to daily challenge profile counter #11780

Conversation

bdach commented Jan 9, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bdach Jan 9, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nanaya commented Jan 16, 2025

Choose a reason for hiding this comment

bdach Jan 16, 2025 • edited Loading

Choose a reason for hiding this comment

nanaya Jan 16, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bdach commented Jan 16, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bdach commented Jan 9, 2025 •

edited

Loading

bdach Jan 9, 2025 •

edited

Loading

bdach Jan 16, 2025 •

edited

Loading

nanaya Jan 16, 2025 •

edited

Loading