diff --git a/.circleci/config.yml b/.circleci/config.yml index 7eb96a463b..1df6c44e6b 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -370,7 +370,7 @@ workflows: filters: branches: only: - - social-share-updates + - tco23-leaderboards # This is stage env for production QA releases - "build-prod-staging": context : org-global diff --git a/__tests__/shared/components/Leaderboard/__snapshots__/LeaderboardTable.jsx.snap b/__tests__/shared/components/Leaderboard/__snapshots__/LeaderboardTable.jsx.snap index be1a732415..9f2998a102 100644 --- a/__tests__/shared/components/Leaderboard/__snapshots__/LeaderboardTable.jsx.snap +++ b/__tests__/shared/components/Leaderboard/__snapshots__/LeaderboardTable.jsx.snap @@ -70,7 +70,6 @@ exports[`Matches shallow shapshot 1`] = ` className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__winnings-info___PBqQk" > - 0 points @@ -84,7 +83,7 @@ exports[`Matches shallow shapshot 1`] = ` - 0.00 + NaN @@ -125,7 +124,6 @@ exports[`Matches shallow shapshot 1`] = ` className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__winnings-info___PBqQk" > - 0 points @@ -139,7 +137,7 @@ exports[`Matches shallow shapshot 1`] = ` - 0.00 + NaN @@ -180,7 +178,6 @@ exports[`Matches shallow shapshot 1`] = ` className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__winnings-info___PBqQk" > - 0 points @@ -194,7 +191,7 @@ exports[`Matches shallow shapshot 1`] = ` - 0.00 + NaN @@ -235,7 +232,6 @@ exports[`Matches shallow shapshot 1`] = ` className="src-shared-components-Leaderboard-LeaderboardTable-themes-___styles__winnings-info___PBqQk" > - 0 points @@ -249,7 +245,7 @@ exports[`Matches shallow shapshot 1`] = ` - 0.00 + NaN diff --git a/__tests__/shared/components/Leaderboard/__snapshots__/PodiumSpot.jsx.snap b/__tests__/shared/components/Leaderboard/__snapshots__/PodiumSpot.jsx.snap index 99ce90f051..38d804a762 100644 --- a/__tests__/shared/components/Leaderboard/__snapshots__/PodiumSpot.jsx.snap +++ b/__tests__/shared/components/Leaderboard/__snapshots__/PodiumSpot.jsx.snap @@ -47,7 +47,7 @@ exports[`Matches shallow shapshot 1`] = ` - 0.00 + NaN - 0.00 + NaN themeName === 'TCO23' ? ( @@ -95,7 +97,7 @@ class ChallengeHistoryModal extends Component { }} type="button" > - { sortInner() } + {sortInner()} @@ -117,7 +119,7 @@ class ChallengeHistoryModal extends Component { }} type="button" > - { sortInner() } + {sortInner()} @@ -125,23 +127,28 @@ class ChallengeHistoryModal extends Component { { - challengesOrdered.map(challenge => ( - - - - {challenge.challenge_name || challenge['challenge.challenge_name'] || challenge['tco_leaderboard.challenge_id'] || challenge.challenge_id} - - - { + challengesOrdered.map((challenge) => { + const challengeId = challenge['tco23_leaderboard.challenge_id'] || challenge['tco_leaderboard.challenge_id'] || challenge['challenge.challenge_GUID'] || challenge['challenge.challenge_id'] || challenge.challenge_id; + return ( + + + + {challenge.challenge_name || challenge['challenge.challenge_name'] || challengeId} + + + { !isCopilot ? ( - {challenge['tco_leaderboard.placement'] || challenge.place}placement + + {challenge[placeLabel]}placement + ) : null } - - {challenge['tco_leaderboard.tco_points'] || challenge.points}points - - - )) + + {challenge[pointsLabel] || challenge.points}points + + + ); + }) } diff --git a/src/shared/components/Leaderboard/LeaderboardTable/index.jsx b/src/shared/components/Leaderboard/LeaderboardTable/index.jsx index 1f7eb08bc5..89476a8dee 100644 --- a/src/shared/components/Leaderboard/LeaderboardTable/index.jsx +++ b/src/shared/components/Leaderboard/LeaderboardTable/index.jsx @@ -67,6 +67,12 @@ export default function LeaderboardTable(props) { const addSufix = val => isAlgo ? (val !== 1 ? `${val} matches` : `${val} match`) : (val !== 1 ? `${val} challenges` : `${val} challenge`); const renderTableRows = comps => ( comps.map((competitor) => { + const tcoPoints = competitor['tco23_leaderboard.tco_points'] + || competitor['tco_leaderboard.tco_points'] + || competitor.points + || competitor['tco_leaderboard.total_score'] + || competitor['srm_tco19.score']; + const tcoChallengeCnt = competitor['tco23_leaderboard.challenge_count'] || competitor['tco_leaderboard.challenge_count'] || competitor.challengecount; let photoUrl = competitor['member_profile_basic.photo_url'] || competitor.avatar; if (photoUrl) { photoUrl = `${config.CDN.PUBLIC}/avatar/${encodeURIComponent(photoUrl)}?size=40`; @@ -147,13 +153,13 @@ export default function LeaderboardTable(props) { }
{fulfillment && ({fulfillment} fulfillment)} - {competitor['tco_leaderboard.tco_points'] || competitor.points} points + {tcoPoints} points { themeName === 'TCO23' ? (
onUsernameClick(competitor)} styleName={`${stylesName}.mobile-link`}> - {addSufix(competitor['tco_leaderboard.challenge_count'] || competitor.challengecount)} + {addSufix(tcoChallengeCnt)}
- ) : {addSufix(competitor['tco_leaderboard.challenge_count'] || competitor.challengecount)} + ) : {addSufix(tcoChallengeCnt)} }
@@ -172,15 +178,15 @@ export default function LeaderboardTable(props) { style={{ cursor: 'pointer', display: 'inline-block', color: '#0d61bf' }} onClick={() => onUsernameClick(competitor)} > - { `${addSufix(competitor['tco_leaderboard.challenge_count'] || competitor.challengecount)}` } + {`${addSufix(tcoChallengeCnt)}`} - ) : `${addSufix(competitor['tco_leaderboard.challenge_count'] || competitor.challengecount)}` + ) : `${addSufix(tcoChallengeCnt)}` ) : ( - competitor['tco_leaderboard.challenge_count'] || competitor.challengecount + tcoChallengeCnt ) } - {formatPoints(competitor['tco_leaderboard.tco_points'] || competitor.points)} + {formatPoints(tcoPoints)} { isTopGear ? ( {competitor.wins} @@ -193,7 +199,7 @@ export default function LeaderboardTable(props) { } { isAlgo ? ( - {competitor['tco_leaderboard.total_score'] || competitor['srm_tco19.score']} + {tcoPoints} ) : null } diff --git a/src/shared/components/Leaderboard/Podium/index.jsx b/src/shared/components/Leaderboard/Podium/index.jsx index c3d176c973..d1df45fb36 100644 --- a/src/shared/components/Leaderboard/Podium/index.jsx +++ b/src/shared/components/Leaderboard/Podium/index.jsx @@ -69,7 +69,7 @@ export default function Podium(props) { )); return ( -
+
{podiumSpots}
); diff --git a/src/shared/components/Leaderboard/Podium/themes/default.scss b/src/shared/components/Leaderboard/Podium/themes/default.scss index d41f31f5e6..e912007c97 100644 --- a/src/shared/components/Leaderboard/Podium/themes/default.scss +++ b/src/shared/components/Leaderboard/Podium/themes/default.scss @@ -18,7 +18,8 @@ } } -.PodiumWrap { +.PodiumWrap, +.PodiumWrapCondense { display: flex; justify-content: center !important; diff --git a/src/shared/components/Leaderboard/Podium/themes/tco23.scss b/src/shared/components/Leaderboard/Podium/themes/tco23.scss index cbde4c5ef1..d76552b6ff 100644 --- a/src/shared/components/Leaderboard/Podium/themes/tco23.scss +++ b/src/shared/components/Leaderboard/Podium/themes/tco23.scss @@ -23,7 +23,8 @@ } } -.PodiumWrap { +.PodiumWrap, +.PodiumWrapCondense { display: flex; justify-content: center !important; @@ -31,7 +32,9 @@ flex-direction: column; align-items: center; } +} +.PodiumWrap { .podium-column:nth-child(2) { @include md-to-xl { margin-top: -16px; @@ -58,3 +61,19 @@ margin-right: 0; } } + +.PodiumWrapCondense { + @media screen and (min-width: 375px) and (max-width: 768px) { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 17px; + } + + .podium-column { + margin-right: 16px; + + @include xs-to-sm { + margin: 0; + } + } +} diff --git a/src/shared/components/Leaderboard/PodiumSpot/index.jsx b/src/shared/components/Leaderboard/PodiumSpot/index.jsx index ad49696a8a..4321d7e7c1 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/index.jsx +++ b/src/shared/components/Leaderboard/PodiumSpot/index.jsx @@ -48,6 +48,8 @@ const PODIUM_ITEM_MODIFIER = { 2: 'second', 3: 'third', 4: 'fourth', + 5: 'fifth', + 6: 'sixt', }; /** @@ -78,6 +80,8 @@ const CUSTOM_STYLES = { 2: avatarStyles['tco23-2'], 3: avatarStyles['tco23-3'], 4: avatarStyles['tco23-4'], + 5: avatarStyles['tco23-5'], + 6: avatarStyles['tco23-6'], }, }; @@ -103,6 +107,8 @@ const DISPLAY_RANKING_NUM = { 2: '2ND', 3: '3RD', 4: '4TH', + 5: '5TH', + 6: '6TH', }; /** @@ -124,11 +130,17 @@ export default function PodiumSpot(props) { } = props; const stylesName = THEME[themeName]; + const tcoPoints = competitor['tco23_leaderboard.tco_points'] + || competitor['tco_leaderboard.tco_points'] + || competitor.points + || competitor['tco_leaderboard.total_score'] + || competitor['srm_tco19.score']; + const tcoChallengeCnt = competitor['tco23_leaderboard.challenge_count'] || competitor['tco_leaderboard.challenge_count'] || competitor.challengecount; let photoUrl = competitor['member_profile_basic.photo_url'] || competitor.avatar; if (photoUrl) { photoUrl = `${config.CDN.PUBLIC}/avatar/${encodeURIComponent(photoUrl)}?size=160`; } - let rootStyle = `${stylesName}.PodiumSpot`; + let rootStyle = `${stylesName}.${themeName === 'TCO23' ? 'PodiumSpotCondense' : 'PodiumSpot'}`; if (PODIUM_ITEM_MODIFIER[competitor.rank]) rootStyle += ` ${stylesName}.PodiumSpot--${PODIUM_ITEM_MODIFIER[competitor.rank]}`; const fulfillment = competitor['tco_leaderboard.fulfillment'] ? (parseFloat(competitor['tco_leaderboard.fulfillment']) * 100).toFixed(2).replace(/[.,]00$/, '') @@ -137,7 +149,7 @@ export default function PodiumSpot(props) { return themeName === 'TCO23' ? (
{ - competitor.rank <= 4 &&

{`${DISPLAY_RANKING_NUM[competitor.rank]} PLACE`}

+ competitor.rank <= 6 &&

{`${DISPLAY_RANKING_NUM[competitor.rank]} PLACE`}

} { onUsernameClick ? ( @@ -162,14 +174,14 @@ export default function PodiumSpot(props) {
4 ? 4 : competitor.rank]}`}> @@ -194,28 +206,28 @@ export default function PodiumSpot(props) {
) : null } + { + isAlgo ? ( +
+ {tcoPoints} + total score +
+ ) : null + } +
+ {formatPoints(tcoPoints)} + points +
- {competitor['tco_leaderboard.challenge_count'] || competitor.challengecount} + {tcoChallengeCnt} { isAlgo ? ( - # of matches + matches ) : ( challenges ) }
-
- {formatPoints(competitor['tco_leaderboard.tco_points'] || competitor.points)} - points -
- { - isAlgo ? ( -
- {competitor['tco_leaderboard.total_score'] || competitor['srm_tco19.score']} - total score -
- ) : null - }
@@ -294,7 +306,7 @@ export default function PodiumSpot(props) { ) : null }
- {competitor['tco_leaderboard.challenge_count'] || competitor.challengecount} + {tcoChallengeCnt} { isAlgo ? ( # of matches @@ -304,7 +316,7 @@ export default function PodiumSpot(props) { }
- {formatPoints(competitor['tco_leaderboard.tco_points'] || competitor.points)} + {formatPoints(tcoPoints)} points
{ @@ -326,7 +338,7 @@ export default function PodiumSpot(props) { { isAlgo ? (
- {competitor['tco_leaderboard.total_score'] || competitor['srm_tco19.score']} + {tcoPoints} total score
) : null diff --git a/src/shared/components/Leaderboard/PodiumSpot/themes/styles.scss b/src/shared/components/Leaderboard/PodiumSpot/themes/styles.scss index 9f45f5f9be..cceab354ad 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/themes/styles.scss +++ b/src/shared/components/Leaderboard/PodiumSpot/themes/styles.scss @@ -1,7 +1,8 @@ @import '~styles/mixins'; $podium-border-color: #ededf2; -.PodiumSpot { +.PodiumSpot, +.PodiumSpotCondense { border: 1px solid $podium-border-color; border-radius: 6px; padding: 20px 0; diff --git a/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss b/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss index fffcb4919b..a09b62ca94 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss +++ b/src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss @@ -1,7 +1,8 @@ @import '~styles/mixins'; $podium-border-color: #ededf2; -.PodiumSpot { +.PodiumSpot, +.PodiumSpotCondense { border-radius: 6px; padding: 23px 15px; display: flex; diff --git a/src/shared/components/Leaderboard/PodiumSpot/themes/tco22.scss b/src/shared/components/Leaderboard/PodiumSpot/themes/tco22.scss index 319e1bd11e..8f03f24033 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/themes/tco22.scss +++ b/src/shared/components/Leaderboard/PodiumSpot/themes/tco22.scss @@ -1,7 +1,8 @@ @import '~styles/mixins'; $podium-border-color: #ededf2; -.PodiumSpot { +.PodiumSpot, +.PodiumSpotCondense { border-radius: 12px; padding: 22px 17px 12px; display: flex; diff --git a/src/shared/components/Leaderboard/PodiumSpot/themes/tco23.scss b/src/shared/components/Leaderboard/PodiumSpot/themes/tco23.scss index 663879a3f2..863313ffab 100644 --- a/src/shared/components/Leaderboard/PodiumSpot/themes/tco23.scss +++ b/src/shared/components/Leaderboard/PodiumSpot/themes/tco23.scss @@ -2,7 +2,8 @@ @import '~styles/mixins'; $podium-border-color: #ededf2; -.PodiumSpot { +.PodiumSpot, +.PodiumSpotCondense { border-radius: 8px; display: flex; flex-direction: column; @@ -120,7 +121,7 @@ $podium-border-color: #ededf2; line-height: 44px; text-transform: uppercase; margin-bottom: 8px; - color: #2a2a2a; + color: #000; } .wave-wrap--first, @@ -133,11 +134,11 @@ $podium-border-color: #ededf2; flex-direction: column; align-items: center; justify-content: center; - margin-top: 120px; - padding-bottom: 36px; + margin-top: 45px; + padding-bottom: 24px; .leaderboard-avatar { - margin-top: -120px; + margin-top: -70px; border: 3px solid white; border-radius: 50%; height: 152px; @@ -160,6 +161,7 @@ $podium-border-color: #ededf2; svg { margin-top: -1px; + transform: scaleX(1.03); } } @@ -168,16 +170,104 @@ $podium-border-color: #ededf2; } .wave-wrap--second { - background-color: #219174; + background-color: #16679a; } .wave-wrap--third { - background-color: #16679a; + background-color: #227681; } .wave-wrap--fourth { + background-color: #219174; + + .stats { + color: #fff; + } + } + + .wave-wrap--fifth { + background-color: #219174; + } + + .wave-wrap--sixt { + background-color: #219174; + } +} + +.PodiumSpotCondense { + min-width: auto; + max-width: 200px; + padding-top: 24px; + + @media screen and (min-width: 375px) and (max-width: 768px) { + max-width: 162px; + margin: auto; + } + + @media screen and (max-width: 3320px) { + margin-bottom: 15px; + } + + .place { + @include barlow-condensed-semi-bold; + + font-size: 26px; + font-weight: 500; + line-height: 28px; + text-transform: uppercase; + margin-bottom: 8px; + color: #000; + border: none; + padding: 0; + } + + .handle-link { + font-size: 16px; + line-height: 24px; + } + + .leaderboard-avatar { + height: 88px !important; + width: 88px !important; + } + + .winnings-info { + margin-top: 16px; + + @include xs-to-sm { + flex-direction: column; + align-items: flex-start; + padding: 0 13px; + } + .stats { - color: #2a2a2a; + margin-right: 16px !important; + + @include xs-to-sm { + flex-direction: row; + margin-bottom: 4px; + } + + &:last-child { + margin-right: 0 !important; + } + + .value { + font-size: 14px !important; + font-weight: 700; + line-height: 16px !important; + text-align: left; + + @include xs-to-sm { + margin-right: 4px !important; + } + } + + .value-title { + font-size: 12px !important; + font-weight: 400; + line-height: 18px !important; + } } } } @@ -210,10 +300,26 @@ $podium-border-color: #ededf2; } } +.PodiumSpot--fifth { + .ranking { + background-color: #1e94a3; + color: #fff; + } +} + +.PodiumSpot--sixt { + .ranking { + background-color: #1e94a3; + color: #fff; + } +} + .PodiumSpot--first, .PodiumSpot--second, .PodiumSpot--third, -.PodiumSpot--fourth { +.PodiumSpot--fourth, +.PodiumSpot--fifth, +.PodiumSpot--sixt { margin-top: 0; .leaderboard-avatar { diff --git a/src/shared/components/Leaderboard/avatarStyles.scss b/src/shared/components/Leaderboard/avatarStyles.scss index c84446b00d..413dc5e999 100644 --- a/src/shared/components/Leaderboard/avatarStyles.scss +++ b/src/shared/components/Leaderboard/avatarStyles.scss @@ -63,7 +63,9 @@ .tco23-1, .tco23-2, .tco23-3, -.tco23-4 { +.tco23-4, +.tco23-5, +.tco23-6 { border-radius: 50%; height: 100%; width: 100%;