+
3 ? 'PodiumWrapCondense' : 'PodiumWrap'}`} style={comps.length === 4 ? { 'justify-content': 'space-between' } : {}}>
{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..99d73216ab 100644
--- a/src/shared/components/Leaderboard/PodiumSpot/index.jsx
+++ b/src/shared/components/Leaderboard/PodiumSpot/index.jsx
@@ -25,7 +25,7 @@
*/
import React from 'react';
-import PT from 'prop-types';
+import PT, { number } from 'prop-types';
import { Avatar } from 'topcoder-react-ui-kit';
import { config } from 'topcoder-react-utils';
import _ from 'lodash';
@@ -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',
};
/**
@@ -121,14 +127,21 @@ export default function PodiumSpot(props) {
isTopGear,
isAlgo,
themeName,
+ podiumPlaces,
} = 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}.${podiumPlaces > 3 ? '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 +150,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,15 +175,24 @@ export default function PodiumSpot(props) {
4 ? 4 : competitor.rank]}`}>
{
@@ -194,28 +216,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
- }