Skip to content

Commit f65d151

Browse files
luizrrodriguesluizrrodrigues
authored
Merge pull request #5648 from topcoder-platform/new-leaderboards-theme
New leaderboards theme
2 parents 6baafb4 + 072d830 commit f65d151

File tree

12 files changed

+435
-10
lines changed

12 files changed

+435
-10
lines changed

‎.circleci/config.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -356,7 +356,7 @@ workflows:
356356
filters:
357357
branches:
358358
only:
359-
- free
359+
- new-leaderboards-theme
360360
# This is beta env for production soft releases
361361
- "build-prod-beta":
362362
context : org-global

‎__tests__/shared/components/Leaderboard/__snapshots__/PodiumSpot.jsx.snap

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ exports[`Matches shallow shapshot 1`] = `
3030
style={null}
3131
>
3232
<div
33-
className="src-shared-components-Leaderboard-PodiumSpot-themes-___styles__stats___1iYej"
33+
className="src-shared-components-Leaderboard-PodiumSpot-themes-___styles__stats-count___XuYEf"
3434
>
3535
<span
3636
className="src-shared-components-Leaderboard-PodiumSpot-themes-___styles__value___2shA5"
@@ -89,7 +89,7 @@ exports[`Matches shallow shapshot 2`] = `
8989
style={null}
9090
>
9191
<div
92-
className="src-shared-components-Leaderboard-PodiumSpot-themes-___styles__stats___1iYej"
92+
className="src-shared-components-Leaderboard-PodiumSpot-themes-___styles__stats-count___XuYEf"
9393
>
9494
<span
9595
className="src-shared-components-Leaderboard-PodiumSpot-themes-___styles__value___2shA5"

‎src/shared/components/Leaderboard/ChallengeHistoryModal/index.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ class ChallengeHistoryModal extends Component {
4444
competitor={competitor}
4545
isCopilot={isCopilot}
4646
isAlgo={isAlgo}
47-
themeName="TCO20"
47+
themeName="TCO22"
4848
/>
4949
</div>
5050
<table styleName="history-table">
@@ -116,7 +116,7 @@ class ChallengeHistoryModal extends Component {
116116
challengesOrdered.map(challenge => (
117117
<tr styleName="row" key={`${challenge['tco_leaderboard.challenge_id'] || challenge['challenge.challenge_id'] || challenge.challenge_id}`}>
118118
<td styleName="name">
119-
<a href={`${config.URL.BASE}/challenges/${challenge['tco_leaderboard.challenge_id'] || challenge['challenge.challenge_id'] || challenge.challenge_id}/`} styleName="link" target="_blank" rel="noopener noreferrer">
119+
<a href={`${config.URL.BASE}/challenges/${challenge['tco_leaderboard.challenge_id'] || challenge['challenge.challenge_id'] || challenge.challenge_id || challenge['challenge.challenge_GUID']}/`} styleName="link" target="_blank" rel="noopener noreferrer">
120120
{challenge.challenge_name || challenge['challenge.challenge_name'] || challenge['tco_leaderboard.challenge_id'] || challenge.challenge_id}
121121
</a>
122122
</td>

‎src/shared/components/Leaderboard/ChallengeHistoryModal/styles.scss

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ $light-gray: #d4d4d4;
1515
padding: 80px 78px;
1616

1717
@media (max-width: 768px) {
18-
width: 80%;
18+
width: 90%;
19+
padding: 30px 15px;
1920
}
2021

2122
h3 {
@@ -99,6 +100,10 @@ $light-gray: #d4d4d4;
99100
line-height: 51px;
100101
text-decoration: underline;
101102

103+
@media (max-width: 768px) {
104+
line-height: 30px;
105+
}
106+
102107
&:hover {
103108
text-decoration: none;
104109
}

‎src/shared/components/Leaderboard/LeaderboardTable/index.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,12 @@ import { getRatingColor } from 'utils/tc';
3535
import avatarStyles from '../avatarStyles.scss';
3636
import defaultStyles from './themes/styles.scss'; // eslint-disable-line
3737
import tco20Styles from './themes/tco20.scss'; // eslint-disable-line
38+
import tco22Styles from './themes/tco22.scss'; // eslint-disable-line
3839

3940
const THEME = {
4041
Default: 'defaultStyles',
4142
TCO20: 'tco20Styles',
43+
TCO22: 'tco22Styles',
4244
};
4345

4446
/**
@@ -79,7 +81,7 @@ export default function LeaderboardTable(props) {
7981
photoUrl ? (
8082
<Avatar
8183
theme={{
82-
avatar: avatarStyles.default,
84+
avatar: themeName === 'TCO22' ? avatarStyles['default-tco22'] : avatarStyles.default,
8385
}}
8486
url={photoUrl}
8587
/>

‎src/shared/components/Leaderboard/LeaderboardTable/themes/tco22.scss

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
@import '~styles/mixins';
2+
$table-cell-padding: 2px;
3+
$table-border-color: #d4d4d4;
4+
$table-bg-hover: #f5f5f5;
5+
6+
.LeaderboardTable {
7+
/* Table basic styling (heavily 'inspired' by Bootstrap) */
8+
@include roboto-regular;
9+
10+
background-color: transparent;
11+
width: 100%;
12+
margin: 30px auto 20px auto;
13+
14+
th {
15+
@include roboto-bold;
16+
17+
text-align: left;
18+
}
19+
// Table cell sizing
20+
td,
21+
th {
22+
&[class*="col-"] {
23+
position: static;
24+
float: none;
25+
display: table-cell;
26+
}
27+
}
28+
// Cells
29+
> thead,
30+
> tbody,
31+
> tfoot {
32+
> tr {
33+
> th,
34+
> td {
35+
padding: $table-cell-padding;
36+
line-height: 45px;
37+
vertical-align: top;
38+
border-top: 1px solid $table-border-color;
39+
color: #47474f;
40+
font-size: 20px;
41+
font-weight: 400;
42+
43+
@include xs-to-sm {
44+
line-height: 25px;
45+
}
46+
}
47+
}
48+
}
49+
// Bottom align for column headings
50+
> thead > tr > th {
51+
vertical-align: bottom;
52+
border-bottom: 1px solid $table-border-color;
53+
color: #888894;
54+
font-size: 20px;
55+
font-weight: 500;
56+
line-height: 24px;
57+
padding: 19px 8px;
58+
}
59+
60+
// Hover effect
61+
> tbody > tr:hover {
62+
background-color: $table-bg-hover;
63+
}
64+
// hide the table head on extra-small devices
65+
> thead {
66+
@include sm {
67+
display: none;
68+
}
69+
}
70+
71+
// cell alignment
72+
> tbody tr td,
73+
> thead tr th {
74+
vertical-align: middle;
75+
text-align: center;
76+
}
77+
78+
// Remove top border from thead by default
79+
> thead:first-child {
80+
> tr:first-child {
81+
> th,
82+
> td {
83+
border-top: 0;
84+
}
85+
}
86+
}
87+
88+
/* Column specific styling */
89+
.col-rank {
90+
text-align: center;
91+
width: 80px;
92+
text-transform: uppercase;
93+
color: #2a2a2a;
94+
font-family: Roboto, sans-serif;
95+
font-size: 16px;
96+
font-weight: 400;
97+
98+
@include sm {
99+
width: 40px;
100+
}
101+
}
102+
103+
.col-avatar {
104+
text-align: center;
105+
width: 80px;
106+
107+
@include md-to-xl {
108+
line-height: 0;
109+
}
110+
111+
@include sm {
112+
width: 40px;
113+
}
114+
}
115+
116+
.col-avatar .leaderboard-avatar {
117+
display: inline-block;
118+
height: 34px;
119+
width: 34px;
120+
overflow: hidden;
121+
122+
svg {
123+
border-radius: 50%;
124+
max-width: 100%;
125+
}
126+
}
127+
128+
.col-handle {
129+
text-align: left;
130+
131+
.handle-link,
132+
a {
133+
color: #0d61bf;
134+
font-weight: 500;
135+
font-size: 16px;
136+
text-decoration: underline;
137+
138+
&:hover {
139+
color: #0d61bf;
140+
cursor: pointer;
141+
text-decoration: none;
142+
}
143+
}
144+
}
145+
146+
.col-handleHeader {
147+
text-align: left;
148+
}
149+
150+
.col-handle .winnings-info {
151+
@include roboto-light;
152+
153+
color: #999;
154+
font-size: 13px;
155+
// display only on small screens
156+
display: none;
157+
158+
@include sm {
159+
display: block;
160+
}
161+
162+
span {
163+
display: block;
164+
}
165+
}
166+
167+
.col-fulfillment {
168+
text-align: center;
169+
text-transform: uppercase;
170+
}
171+
172+
.col-points {
173+
text-align: center;
174+
}
175+
176+
/* Table responsiveness */
177+
// Hide 'Fulfillment', 'Challenges' and 'Points' columns on small screens
178+
.col-fulfillment,
179+
.col-challenges,
180+
.col-points {
181+
width: 33%;
182+
color: #2a2a2a;
183+
font-family: Roboto, sans-serif;
184+
font-size: 16px;
185+
font-weight: 400;
186+
187+
@include sm {
188+
display: none !important;
189+
}
190+
}
191+
}
192+
193+
.table-header {
194+
.col-handleHeader,
195+
.col-rank,
196+
.col-fulfillment,
197+
.col-challenges,
198+
.col-points {
199+
color: #2a2a2a;
200+
font-family: Roboto, sans-serif;
201+
font-size: 14px;
202+
font-weight: 500;
203+
letter-spacing: 0.5px;
204+
text-transform: uppercase;
205+
}
206+
}

‎src/shared/components/Leaderboard/PodiumSpot/index.jsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import { getRatingColor } from 'utils/tc';
3535
import avatarStyles from '../avatarStyles.scss';
3636
import defaultStyles from './themes/styles.scss'; // eslint-disable-line
3737
import tco20Styles from './themes/tco20.scss'; // eslint-disable-line
38+
import tco22Styles from './themes/tco22.scss'; // eslint-disable-line
3839

3940
/**
4041
* Object used to add a CSS modifier (PodiumSpot--first) that will
@@ -65,6 +66,12 @@ const CUSTOM_STYLES = {
6566
3: avatarStyles['tco20-3'],
6667
4: avatarStyles['tco20-4'],
6768
},
69+
TCO22: {
70+
1: avatarStyles['tco22-1'],
71+
2: avatarStyles['tco22-2'],
72+
3: avatarStyles['tco22-3'],
73+
4: avatarStyles['tco22-4'],
74+
},
6875
};
6976

7077
/**
@@ -80,6 +87,7 @@ const DISPLAY_RANKING = {
8087
const THEME = {
8188
Default: 'defaultStyles',
8289
TCO20: 'tco20Styles',
90+
TCO22: 'tco22Styles',
8391
};
8492

8593
/**
@@ -180,13 +188,13 @@ export default function PodiumSpot(props) {
180188
}
181189
{
182190
isCopilot ? (
183-
<div styleName={`${stylesName}.stats`}>
191+
<div styleName={`${stylesName}.stats-count`}>
184192
<span styleName={`${stylesName}.value`}>{fulfillment}</span>
185193
<span styleName={`${stylesName}.value-title`}>fulfillment</span>
186194
</div>
187195
) : null
188196
}
189-
<div styleName={`${stylesName}.stats`}>
197+
<div styleName={`${stylesName}.stats-count`}>
190198
<span styleName={`${stylesName}.value`}>{competitor['tco_leaderboard.challenge_count'] || competitor.challengecount}</span>
191199
{
192200
isAlgo ? (

‎src/shared/components/Leaderboard/PodiumSpot/themes/styles.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,10 @@ $podium-border-color: #ededf2;
6464
}
6565
}
6666

67+
.stats-count {
68+
color: #747480;
69+
}
70+
6771
@include xs-to-sm {
6872
font-size: 12px;
6973
}

‎src/shared/components/Leaderboard/PodiumSpot/themes/tco20.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,19 @@ $podium-border-color: #ededf2;
7777
}
7878
}
7979

80+
.stats-count {
81+
color: #747480;
82+
font-size: 16px;
83+
font-weight: 400;
84+
line-height: 25px;
85+
display: flex;
86+
margin-bottom: 4px;
87+
88+
.value {
89+
margin-right: 5px;
90+
}
91+
}
92+
8093
@include xs-to-sm {
8194
font-size: 12px;
8295
}

0 commit comments

Comments
 (0)