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`] = `
+
{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
}