From 9fc4d20ebd5722c395b08e6d9ba07461bffd9803 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Dach?= Date: Thu, 9 Jan 2025 10:22:40 +0100 Subject: [PATCH 1/8] Add completion marker to daily challenge profile counter Implements https://github.com/ppy/osu-web/issues/11597 for the website. --- resources/css/bem/daily-challenge.less | 26 ++++++++++++-- resources/js/profile-page/daily-challenge.tsx | 35 +++++++++++-------- 2 files changed, 43 insertions(+), 18 deletions(-) diff --git a/resources/css/bem/daily-challenge.less b/resources/css/bem/daily-challenge.less index d0353dd25c1..0d7d2aa6ddf 100644 --- a/resources/css/bem/daily-challenge.less +++ b/resources/css/bem/daily-challenge.less @@ -5,9 +5,29 @@ background: hsl(var(--hsl-b4)); border-radius: @border-radius-large; min-width: 0; - display: flex; - align-items: center; - padding: 3px; + position: relative; + + &--played-today { + border: 2px solid @osu-colour-lime-1; + + &::before { + .fas(); + background-color: @osu-colour-b6; + border-radius: 50%; + color: @osu-colour-lime-1; + content: @fa-var-check-circle; + font-size: 16px; + position: absolute; + right: -8px; + top: -8px; + } + } + + &__content { + display: flex; + align-items: center; + padding: 3px; + } &__name { font-size: @font-size--normal; diff --git a/resources/js/profile-page/daily-challenge.tsx b/resources/js/profile-page/daily-challenge.tsx index 44cf465e2c4..79d5a511704 100644 --- a/resources/js/profile-page/daily-challenge.tsx +++ b/resources/js/profile-page/daily-challenge.tsx @@ -4,6 +4,7 @@ import DailyChallengeUserStatsJson from 'interfaces/daily-challenge-user-stats-json'; import { autorun } from 'mobx'; import { observer } from 'mobx-react'; +import * as moment from 'moment'; import * as React from 'react'; import { renderToStaticMarkup } from 'react-dom/server'; import { classWithModifiers, Modifiers } from 'utils/css'; @@ -122,26 +123,30 @@ export default class DailyChallenge extends React.Component { return null; } + const playedToday = this.props.stats.last_update != null && moment.utc(this.props.stats.last_update).isSame(Date.now(), 'day'); + return (
-
- {trans('users.show.daily_challenge.title').split('\\n').map((line, i) => ( -
{line}
- ))} -
-
-
- {trans( - 'users.show.daily_challenge.unit.day', - { value: formatNumber(this.props.stats.playcount) }, - )} +
+
+ {trans('users.show.daily_challenge.title').split('\\n').map((line, i) => ( +
{line}
+ ))} +
+
+
+ {trans( + 'users.show.daily_challenge.unit.day', + { value: formatNumber(this.props.stats.playcount) }, + )} +
From b8adbac16b6ba1c94a5f114d2a675959076405c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Dach?= Date: Thu, 9 Jan 2025 10:26:06 +0100 Subject: [PATCH 2/8] Adjust radius of inner box As mentioned in https://github.com/ppy/osu-web/issues/11597. --- resources/css/bem/daily-challenge.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/css/bem/daily-challenge.less b/resources/css/bem/daily-challenge.less index 0d7d2aa6ddf..e3e97b527c4 100644 --- a/resources/css/bem/daily-challenge.less +++ b/resources/css/bem/daily-challenge.less @@ -40,7 +40,7 @@ } &__value-box { - border-radius: @border-radius-large; + border-radius: @border-radius-small; background: hsl(var(--hsl-b6)); padding: 5px 10px; } From 5f2ab58224c3654db2ea9e8fbdff270c7036ea8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Dach?= Date: Thu, 9 Jan 2025 10:52:38 +0100 Subject: [PATCH 3/8] Remove superfluous div --- resources/css/bem/daily-challenge.less | 9 ++---- resources/js/profile-page/daily-challenge.tsx | 30 +++++++++---------- 2 files changed, 17 insertions(+), 22 deletions(-) diff --git a/resources/css/bem/daily-challenge.less b/resources/css/bem/daily-challenge.less index e3e97b527c4..ecee003191d 100644 --- a/resources/css/bem/daily-challenge.less +++ b/resources/css/bem/daily-challenge.less @@ -6,6 +6,9 @@ border-radius: @border-radius-large; min-width: 0; position: relative; + display: flex; + align-items: center; + padding: 3px; &--played-today { border: 2px solid @osu-colour-lime-1; @@ -23,12 +26,6 @@ } } - &__content { - display: flex; - align-items: center; - padding: 3px; - } - &__name { font-size: @font-size--normal; padding: 0 5px; diff --git a/resources/js/profile-page/daily-challenge.tsx b/resources/js/profile-page/daily-challenge.tsx index 79d5a511704..73c380bf9ec 100644 --- a/resources/js/profile-page/daily-challenge.tsx +++ b/resources/js/profile-page/daily-challenge.tsx @@ -131,22 +131,20 @@ export default class DailyChallenge extends React.Component { className={classWithModifiers('daily-challenge', { 'played-today': playedToday })} onMouseOver={this.onMouseOver} > -
-
- {trans('users.show.daily_challenge.title').split('\\n').map((line, i) => ( -
{line}
- ))} -
-
-
- {trans( - 'users.show.daily_challenge.unit.day', - { value: formatNumber(this.props.stats.playcount) }, - )} -
+
+ {trans('users.show.daily_challenge.title').split('\\n').map((line, i) => ( +
{line}
+ ))} +
+
+
+ {trans( + 'users.show.daily_challenge.unit.day', + { value: formatNumber(this.props.stats.playcount) }, + )}
From e69ab6ad6c50f3eafeecc9dcb50c296e76b50c59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Dach?= Date: Wed, 15 Jan 2025 14:47:25 +0100 Subject: [PATCH 4/8] Apply review suggestions --- resources/css/bem/daily-challenge.less | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/resources/css/bem/daily-challenge.less b/resources/css/bem/daily-challenge.less index ecee003191d..0f95ff5d90a 100644 --- a/resources/css/bem/daily-challenge.less +++ b/resources/css/bem/daily-challenge.less @@ -8,10 +8,11 @@ position: relative; display: flex; align-items: center; - padding: 3px; + padding: 1px; + border: 2px solid transparent; &--played-today { - border: 2px solid @osu-colour-lime-1; + border-color: @osu-colour-lime-1; &::before { .fas(); @@ -19,10 +20,11 @@ border-radius: 50%; color: @osu-colour-lime-1; content: @fa-var-check-circle; - font-size: 16px; + font-size: 16px; // icon size position: absolute; - right: -8px; - top: -8px; + right: 0; + top: 0; + transform: translate(50%, -50%); } } From bf0333ab6ad91e4aa4b16b9c9d66c6a92c65697b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Dach?= Date: Thu, 16 Jan 2025 13:34:50 +0100 Subject: [PATCH 5/8] Invert checkmark colouring (and adjust sizing to match design better) --- resources/css/bem/daily-challenge.less | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/resources/css/bem/daily-challenge.less b/resources/css/bem/daily-challenge.less index 0f95ff5d90a..8a8946a7030 100644 --- a/resources/css/bem/daily-challenge.less +++ b/resources/css/bem/daily-challenge.less @@ -15,16 +15,19 @@ border-color: @osu-colour-lime-1; &::before { + .center-content(); .fas(); - background-color: @osu-colour-b6; + background-color: @osu-colour-lime-1; border-radius: 50%; - color: @osu-colour-lime-1; - content: @fa-var-check-circle; - font-size: 16px; // icon size + 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: 16px; } } From 0600f1b781a6dd6c84d9ce6720f4bb03c92a8b7e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Dach?= Date: Thu, 16 Jan 2025 13:40:15 +0100 Subject: [PATCH 6/8] Only show completion indicator on user's own profile --- resources/js/profile-page/daily-challenge.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/resources/js/profile-page/daily-challenge.tsx b/resources/js/profile-page/daily-challenge.tsx index 73c380bf9ec..abd07f6db93 100644 --- a/resources/js/profile-page/daily-challenge.tsx +++ b/resources/js/profile-page/daily-challenge.tsx @@ -5,6 +5,7 @@ import DailyChallengeUserStatsJson from 'interfaces/daily-challenge-user-stats-j 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'; @@ -123,12 +124,13 @@ export default class DailyChallenge extends React.Component { return null; } - const playedToday = this.props.stats.last_update != null && moment.utc(this.props.stats.last_update).isSame(Date.now(), 'day'); + 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 (
From dfb9918451a9cb12fdb231bd67f21e99d248c60f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Dach?= Date: Thu, 16 Jan 2025 14:10:40 +0100 Subject: [PATCH 7/8] Fix mixin order --- resources/css/bem/daily-challenge.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/css/bem/daily-challenge.less b/resources/css/bem/daily-challenge.less index 8a8946a7030..f03c5ce22fd 100644 --- a/resources/css/bem/daily-challenge.less +++ b/resources/css/bem/daily-challenge.less @@ -15,8 +15,8 @@ border-color: @osu-colour-lime-1; &::before { - .center-content(); .fas(); + .center-content(); background-color: @osu-colour-lime-1; border-radius: 50%; color: @osu-colour-b6; From 8e30dde323c9c0b25e447ec228746742b52af771 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Dach?= Date: Thu, 16 Jan 2025 14:12:34 +0100 Subject: [PATCH 8/8] Simplify size spec using property-as-variable --- resources/css/bem/daily-challenge.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/css/bem/daily-challenge.less b/resources/css/bem/daily-challenge.less index f03c5ce22fd..c3d8031eab4 100644 --- a/resources/css/bem/daily-challenge.less +++ b/resources/css/bem/daily-challenge.less @@ -27,7 +27,7 @@ right: 0; top: 0; transform: translate(50%, -50%); - width: 16px; + width: $height; } }