Skip to content

Commit a573aec

Browse files
luizrrodriguesluizrrodrigues
authored
Merge pull request #6637 from topcoder-platform/develop
Release v1.18.1
2 parents 9ed1d9a + 2f9c626 commit a573aec

File tree

11 files changed

+256
-244
lines changed

11 files changed

+256
-244
lines changed

‎.circleci/config.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -370,7 +370,7 @@ workflows:
370370
filters:
371371
branches:
372372
only:
373-
- footer-update
373+
- beta-demo
374374
# This is stage env for production QA releases
375375
- "build-prod-staging":
376376
context : org-global

‎src/assets/images/icon-arrow-down.svg

Lines changed: 3 additions & 9 deletions
Loading

‎src/assets/images/icon-arrow-up.svg

Lines changed: 3 additions & 9 deletions
Loading

‎src/shared/components/challenge-detail/Header/DeadlinesPanel/Card/index.jsx

Lines changed: 44 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -16,38 +16,58 @@ import './style.scss';
1616
const FORMAT_YEAR = 'MMM DD, YYYY';
1717
const TIME = 'HH:mm';
1818

19-
export default function Card({ past, time, title }) {
20-
const time2 = moment(time);
21-
const past2 = past === null ? time2.isBefore(moment()) : past;
19+
export default function Card({
20+
title, start, end, showRange,
21+
}) {
22+
const startMoment = moment(start);
23+
const endMoment = moment(end);
24+
const past = endMoment.isBefore(moment());
2225
return (
23-
<div styleName={past2 ? 'past' : 'open'}>
26+
<div styleName={past ? 'past' : 'open'}>
2427
<p styleName="title">
2528
{title}
2629
</p>
27-
<div>
28-
<p styleName="date">
29-
{ past2 ? <CalendarIcon /> : <CalendarIconActive /> }
30-
<span>
31-
{time2.format(FORMAT_YEAR)}
32-
</span>
33-
</p>
34-
<p styleName="time">
35-
{ past2 ? <TimeIcon /> : <TimeIconActive /> }
36-
<span>
37-
{time2.format(TIME)}
38-
</span>
39-
</p>
40-
</div>
30+
<p styleName="sections">
31+
{showRange ? (
32+
<section styleName="section">
33+
<span styleName="section-title">Starts</span>
34+
<p styleName="date">
35+
{ past ? <CalendarIcon /> : <CalendarIconActive /> }
36+
<span>
37+
{startMoment.format(FORMAT_YEAR)}
38+
</span>
39+
</p>
40+
<p styleName="time">
41+
{ past ? <TimeIcon /> : <TimeIconActive /> }
42+
<span>
43+
{startMoment.format(TIME)}
44+
</span>
45+
</p>
46+
</section>
47+
) : null}
48+
<section styleName="section">
49+
{showRange ? <span styleName="section-title">Ends</span> : null}
50+
<p styleName="date">
51+
{ past ? <CalendarIcon /> : <CalendarIconActive /> }
52+
<span>
53+
{endMoment.format(FORMAT_YEAR)}
54+
</span>
55+
</p>
56+
<p styleName="time">
57+
{ past ? <TimeIcon /> : <TimeIconActive /> }
58+
<span>
59+
{endMoment.format(TIME)}
60+
</span>
61+
</p>
62+
</section>
63+
</p>
4164
</div>
4265
);
4366
}
4467

45-
Card.defaultProps = {
46-
past: null,
47-
};
48-
4968
Card.propTypes = {
50-
past: PT.bool,
5169
title: PT.string.isRequired,
52-
time: PT.string.isRequired,
70+
start: PT.string.isRequired,
71+
end: PT.string.isRequired,
72+
showRange: PT.bool.isRequired,
5373
};

‎src/shared/components/challenge-detail/Header/DeadlinesPanel/Card/style.scss

Lines changed: 95 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2,81 +2,138 @@
22

33
.open {
44
color: $tc-white;
5+
6+
svg {
7+
path {
8+
fill: $tc-white;
9+
}
10+
}
511
}
612

713
.past {
814
color: #aaa;
15+
16+
svg {
17+
path {
18+
fill: #aaa;
19+
}
20+
}
921
}
1022

1123
.open,
1224
.past {
1325
@include roboto-regular;
1426

15-
margin-bottom: 10px;
16-
padding: 0 20px;
17-
border-left: 1px solid $tc-gray-40;
27+
flex: 0 0 auto;
28+
position: relative;
29+
padding: 0 24px;
30+
min-width: 200px;
31+
margin-bottom: 24px;
32+
33+
&:not(:last-child)::after {
34+
content: '';
35+
position: absolute;
36+
right: 0;
37+
top: 0;
38+
width: 2px;
39+
height: 100%;
40+
border-radius: 1px;
41+
background-color: #767676;
42+
}
1843

1944
@include xs-to-md {
20-
border-left: none;
21-
border-bottom: 1px solid $tc-gray-40;
22-
padding-top: 16px;
23-
padding-bottom: 16px;
45+
padding: 16px 0;
46+
margin-bottom: 0;
2447

25-
&:last-child {
26-
border-bottom: none;
48+
&:not(:last-child)::after {
49+
height: 2px;
50+
width: 100%;
51+
top: unset;
52+
bottom: 0;
2753
}
2854
}
2955

30-
&:first-child {
31-
border-left: none;
56+
svg {
57+
height: 13.13px;
58+
width: 13.13px;
3259
}
3360
}
3461

3562
.date {
36-
font-size: 20px;
37-
letter-spacing: -0.5px;
38-
line-height: 25px;
39-
font-weight: 500;
40-
margin-top: 7px;
63+
@include roboto-medium;
64+
65+
display: flex;
66+
align-items: center;
67+
font-size: 16px;
68+
line-height: 24px;
69+
margin-bottom: 4px;
70+
71+
@include xs-to-md {
72+
font-size: 14px;
73+
line-height: 20px;
74+
}
4175

4276
span {
4377
margin-left: 8px;
4478
}
4579
}
4680

4781
.time {
48-
font-size: 20px;
49-
letter-spacing: -0.5px;
50-
line-height: 25px;
51-
font-weight: 500;
52-
margin-top: 4px;
82+
@include roboto-medium;
83+
84+
display: flex;
85+
align-items: center;
86+
font-size: 16px;
87+
line-height: 24px;
88+
89+
@include xs-to-md {
90+
font-size: 14px;
91+
line-height: 20px;
92+
}
5393

5494
span {
5595
margin-left: 8px;
5696
}
5797
}
5898

59-
.open .date {
60-
color: $tc-white;
99+
.title {
100+
@include roboto-bold;
61101

62-
svg {
63-
path: {
64-
fill: $tc-white;
65-
}
102+
font-size: 12px;
103+
letter-spacing: 1px;
104+
line-height: 16px;
105+
margin-bottom: 16px;
106+
text-transform: uppercase;
107+
108+
@include xs-to-md {
109+
font-size: 10px;
110+
line-height: 12px;
111+
margin-bottom: 20px;
66112
}
67113
}
68-
.past .date { color: #aaa; }
69114

70-
.title {
71-
font-size: 12px;
72-
font-weight: 700;
73-
letter-spacing: 0;
74-
color: #fff;
75-
line-height: 15px;
76-
margin-bottom: 5px;
77-
text-transform: uppercase;
115+
.sections {
116+
display: flex;
117+
flex-direction: column;
118+
gap: 16px;
119+
120+
@include xs-to-md {
121+
flex-direction: row;
122+
gap: 24px;
123+
}
78124
}
79125

80-
.past .title {
81-
color: $tc-gray-40;
126+
.section {
127+
@include xs-to-md {
128+
flex: 1;
129+
}
130+
}
131+
132+
.section-title {
133+
@include roboto-medium;
134+
135+
display: inline-block;
136+
font-size: 11px;
137+
line-height: 10px;
138+
margin-bottom: 4px;
82139
}

‎src/shared/components/challenge-detail/Header/DeadlinesPanel/index.jsx

Lines changed: 50 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11,29 +11,62 @@ import Card from './Card';
1111
import './style.scss';
1212

1313
export default function DeadlinesPanel({ deadlines }) {
14-
/* Calculates challenge start time. */
15-
let start = deadlines[0] || {};
16-
start = phaseStartDate(start);
17-
const started = moment(start).isBefore();
14+
let hasSubmissionPhase = false;
15+
16+
const getCardProps = (deadline, index) => {
17+
let { name } = deadline;
18+
let showRange = true;
19+
name = name.replace(/\bCheckpoint\b/, 'Checkpoint');
20+
if (/.+submission/i.test(name)) {
21+
hasSubmissionPhase = true;
22+
name = name.replace(/submission/i, 'Submission');
23+
} else {
24+
switch (name) {
25+
case 'Submission':
26+
name = hasSubmissionPhase ? 'Final Submission' : 'Submission';
27+
break;
28+
case 'Review':
29+
name = hasSubmissionPhase ? 'Final Review' : name;
30+
break;
31+
case 'Appeals':
32+
name = hasSubmissionPhase ? 'Appeals Due' : name;
33+
break;
34+
default:
35+
}
36+
}
37+
if (index === deadlines.length - 1) {
38+
name = 'Winners Announced';
39+
showRange = false;
40+
}
41+
42+
const start = phaseStartDate(deadline);
43+
const end = phaseEndDate(deadline);
44+
45+
return {
46+
name, start, end, showRange,
47+
};
48+
};
1849

1950
return (
20-
<div styleName={`panel ${deadlines.length < 5 ? 'left' : ''}`} tabIndex="0" role="tabpanel">
51+
<div styleName="panel left" tabIndex="0" role="tabpanel">
2152
<p styleName="timezone">
2253
Timezone:
2354
{moment.tz.guess()}
2455
</p>
25-
<Card
26-
past={started}
27-
time={start}
28-
title={started ? 'Started' : 'Starts'}
29-
/>
30-
{ deadlines.map((d, index) => (
31-
<Card
32-
key={d.name}
33-
time={phaseEndDate(d)}
34-
title={index === deadlines.length - 1 ? 'Winners' : d.name}
35-
/>
36-
))}
56+
{ deadlines.map((d, index) => {
57+
const {
58+
name, start, end, showRange,
59+
} = getCardProps(d, index);
60+
return (
61+
<Card
62+
key={d.name}
63+
title={name}
64+
start={start}
65+
end={end}
66+
showRange={showRange}
67+
/>
68+
);
69+
})}
3770
</div>
3871
);
3972
}

0 commit comments

Comments
 (0)