Skip to content

Commit 78961db

Browse files
jmgasperjmgasper
committed
Updates to submission download buttons
1 parent 837e740 commit 78961db

File tree

7 files changed

+100
-100
lines changed

7 files changed

+100
-100
lines changed

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -635,7 +635,6 @@
635635
border: 0 hidden $tc-white;
636636
overflow: hidden;
637637
margin: 0 14px 0 5px;
638-
min-height: 96px;
639638

640639
.deadlines-overview {
641640
background-color: #555;

‎src/shared/components/challenge-detail/Submissions/index.jsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -605,7 +605,6 @@ class SubmissionsComponent extends React.Component {
605605
((numWinners > 0 || challenge.status === CHALLENGE_STATUS.COMPLETED)
606606
&& isMM) && (
607607
<div styleName="block-download-all">
608-
{downloadingAll ? (<LoadingIndicator />) : null}
609608
<button
610609
disabled={downloadingAll}
611610
styleName="download MM"

‎src/shared/components/challenge-detail/Submissions/style.scss

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -232,25 +232,6 @@
232232
width: auto;
233233
}
234234
}
235-
236-
.download {
237-
font-size: 15px;
238-
line-height: 22px;
239-
color: $tc-dark-blue;
240-
241-
&:disabled {
242-
color: #767676;
243-
pointer-events: none;
244-
}
245-
246-
&.MM {
247-
cursor: pointer;
248-
}
249-
250-
@include xs-to-sm {
251-
font-size: 13px;
252-
}
253-
}
254235
}
255236

256237
.container.dev {
@@ -488,12 +469,34 @@
488469
.block-download-all {
489470
display: flex;
490471
justify-content: flex-end;
491-
height: 50px;
472+
margin-bottom: 10px;
492473

493-
:global {
494-
svg {
495-
height: 100%;
496-
margin: 0;
474+
.download {
475+
@include roboto-bold;
476+
477+
font-size: 15px;
478+
line-height: 16px;
479+
color: #137d60;
480+
481+
&:hover {
482+
color: #0ab88a;
483+
}
484+
485+
&:disabled {
486+
color: #767676;
487+
pointer-events: none;
488+
489+
&:hover {
490+
color: #767676;
491+
}
492+
}
493+
494+
&.MM {
495+
cursor: pointer;
496+
}
497+
498+
@include xs-to-sm {
499+
font-size: 13px;
497500
}
498501
}
499502
}

‎src/shared/components/challenge-detail/Winners/Winner/index.jsx

Lines changed: 48 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import _ from 'lodash';
66
import { config } from 'topcoder-react-utils';
77
import { formatOrdinals, numberWithCommas } from 'utils/challenge-detail/helper';
88
import { getMMSubmissionId } from 'utils/submissions';
9+
import DownloadIcon from '../../../SubmissionManagement/Icons/IconSquareDownload.svg';
910

1011
import style from './style.scss';
1112

@@ -77,52 +78,6 @@ export default function Winner({
7778
</div>
7879
)
7980
}
80-
{
81-
((!winner.submissionDownloadLink || !viewable) && isMM && isLoggedIn) && (
82-
<button
83-
styleName="download MM"
84-
onClick={() => {
85-
// download submission
86-
const submissionsService = getService(auth.m2mToken);
87-
submissionsService.downloadSubmission(mmSubmissionId)
88-
.then((blob) => {
89-
const url = window.URL.createObjectURL(new Blob([blob]));
90-
const link = document.createElement('a');
91-
link.href = url;
92-
link.setAttribute('download', `submission-${mmSubmissionId}.zip`);
93-
document.body.appendChild(link);
94-
link.click();
95-
link.parentNode.removeChild(link);
96-
});
97-
}}
98-
type="button"
99-
>
100-
Download
101-
</button>
102-
)
103-
}
104-
{
105-
(winner.submissionDownloadLink && viewable)
106-
&& (
107-
<a
108-
href={isDesign ? `${config.URL.STUDIO}/?module=DownloadSubmission&sbmid=${submissionId}` : winner.submissionDownloadLink}
109-
styleName="download"
110-
target="_blank"
111-
challenge
112-
rel="noopener noreferrer"
113-
>
114-
Download
115-
</a>
116-
)
117-
}
118-
{
119-
/*
120-
<div styleName="date">
121-
<span>Submitted&nbsp;on:</span>&zwnj;
122-
&zwnj;<span>{moment(winner.submissionDate).format('MMM DD, YYYY HH:mm')}</span>
123-
</div>
124-
*/
125-
}
12681
</div>
12782
</div>
12883

@@ -132,6 +87,53 @@ export default function Winner({
13287
{numberWithCommas(prize)}
13388
</div>
13489
</div>
90+
<div styleName="download-container">
91+
{
92+
((!winner.submissionDownloadLink || !viewable) && isMM && isLoggedIn) && (
93+
<button
94+
onClick={() => {
95+
// download submission
96+
const submissionsService = getService(auth.m2mToken);
97+
submissionsService.downloadSubmission(mmSubmissionId)
98+
.then((blob) => {
99+
const url = window.URL.createObjectURL(new Blob([blob]));
100+
const link = document.createElement('a');
101+
link.href = url;
102+
link.setAttribute('download', `submission-${mmSubmissionId}.zip`);
103+
document.body.appendChild(link);
104+
link.click();
105+
link.parentNode.removeChild(link);
106+
});
107+
}}
108+
type="button"
109+
>
110+
<DownloadIcon />
111+
</button>
112+
)
113+
}
114+
{
115+
(winner.submissionDownloadLink && viewable)
116+
&& (
117+
<a
118+
href={isDesign ? `${config.URL.STUDIO}/?module=DownloadSubmission&sbmid=${submissionId}` : winner.submissionDownloadLink}
119+
styleName="download"
120+
target="_blank"
121+
challenge
122+
rel="noopener noreferrer"
123+
>
124+
<DownloadIcon />
125+
</a>
126+
)
127+
}
128+
{
129+
/*
130+
<div styleName="date">
131+
<span>Submitted&nbsp;on:</span>&zwnj;
132+
&zwnj;<span>{moment(winner.submissionDate).format('MMM DD, YYYY HH:mm')}</span>
133+
</div>
134+
*/
135+
}
136+
</div>
135137
</div>
136138
);
137139
}

‎src/shared/components/challenge-detail/Winners/Winner/style.scss

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
.avatar-prize {
44
display: flex;
55
align-items: center;
6-
margin-bottom: 20px;
76

87
@include xs-to-sm {
98
margin-bottom: 10px;
@@ -66,7 +65,7 @@
6665
display: flex;
6766
justify-content: space-between;
6867
border-top: 1px solid $tc-gray-10;
69-
padding: 17px 17px 0 17px;
68+
padding: 17px;
7069

7170
@include xs-to-sm {
7271
padding: 16px 0;
@@ -183,20 +182,6 @@
183182
}
184183
}
185184

186-
.download {
187-
font-size: 15px;
188-
line-height: 22px;
189-
color: $tc-dark-blue;
190-
191-
&.MM {
192-
cursor: pointer;
193-
}
194-
195-
@include xs-to-sm {
196-
font-size: 13px;
197-
}
198-
}
199-
200185
.date {
201186
font-size: 15px;
202187
line-height: 22px;
@@ -225,6 +210,7 @@
225210

226211
.left {
227212
display: flex;
213+
flex: 1;
228214
}
229215

230216
.right {
@@ -243,3 +229,13 @@
243229
}
244230
}
245231
}
232+
233+
.download-container {
234+
display: flex;
235+
align-items: center;
236+
margin-left: 20px;
237+
238+
.download {
239+
text-decoration: none;
240+
}
241+
}

‎src/shared/components/challenge-detail/Winners/index.jsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { services } from 'topcoder-react-lib';
1010
import { CHALLENGE_STATUS } from 'utils/tc';
1111
import { getMMSubmissionId } from 'utils/submissions';
1212
import { compressFiles } from 'utils/files';
13-
import LoadingIndicator from 'components/LoadingIndicator';
1413
import Winner from './Winner';
1514
import './style.scss';
1615

@@ -34,7 +33,6 @@ export default function Winners({
3433
((winners.length > 0 || challengeStatus === CHALLENGE_STATUS.COMPLETED)
3534
&& isMM && isLoggedIn) && (
3635
<div styleName="block-download-all">
37-
{downloadingAll ? (<LoadingIndicator />) : null}
3836
<button
3937
disabled={downloadingAll}
4038
styleName="download MM"

‎src/shared/components/challenge-detail/Winners/style.scss

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,24 +25,27 @@
2525
.block-download-all {
2626
display: flex;
2727
justify-content: flex-end;
28-
height: 50px;
29-
30-
:global {
31-
svg {
32-
height: 100%;
33-
margin: 0;
34-
}
35-
}
28+
margin-bottom: 20px;
3629
}
3730

3831
.download {
32+
@include roboto-bold;
33+
3934
font-size: 15px;
40-
line-height: 22px;
41-
color: $tc-dark-blue;
35+
line-height: 16px;
36+
color: #137d60;
37+
38+
&:hover {
39+
color: #0ab88a;
40+
}
4241

4342
&:disabled {
4443
color: #767676;
4544
pointer-events: none;
45+
46+
&:hover {
47+
color: #767676;
48+
}
4649
}
4750

4851
&.MM {

0 commit comments

Comments
 (0)