Skip to content

Commit 41a5f7a

Browse files
dedywahyudidedywahyudi
committed
improvement(reskin): mm submission mobile
1 parent 7d23240 commit 41a5f7a

File tree

11 files changed

+223
-40
lines changed

11 files changed

+223
-40
lines changed

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export default function ChallengeViewSelector(props) {
3939
hasRegistered,
4040
mySubmissions,
4141
onSort,
42+
viewAsTable,
4243
} = props;
4344

4445
const { type, tags } = challenge;
@@ -376,7 +377,7 @@ export default function ChallengeViewSelector(props) {
376377
}
377378
</div>
378379
{
379-
isSubmissionTabSelected && (
380+
isSubmissionTabSelected && !viewAsTable && (
380381
<div
381382
styleName="mobile-sort-icon"
382383
role="button"
@@ -468,4 +469,5 @@ ChallengeViewSelector.propTypes = {
468469
hasRegistered: PT.bool.isRequired,
469470
mySubmissions: PT.arrayOf(PT.shape()).isRequired,
470471
onSort: PT.func.isRequired,
472+
viewAsTable: PT.bool.isRequired,
471473
};

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ export default function ChallengeHeader(props) {
5959
mySubmissions,
6060
openForRegistrationChallenges,
6161
onSort,
62+
viewAsTable,
6263
} = props;
6364

6465
const {
@@ -479,6 +480,7 @@ export default function ChallengeHeader(props) {
479480
checkpointCount={checkpointCount}
480481
mySubmissions={mySubmissions}
481482
onSort={onSort}
483+
viewAsTable={viewAsTable}
482484
/>
483485
</div>
484486
</div>
@@ -544,4 +546,5 @@ ChallengeHeader.propTypes = {
544546
mySubmissions: PT.arrayOf(PT.shape()).isRequired,
545547
openForRegistrationChallenges: PT.shape().isRequired,
546548
onSort: PT.func.isRequired,
549+
viewAsTable: PT.bool.isRequired,
547550
};

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

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import style from './style.scss';
2020

2121
export default function SubmissionRow({
2222
isMM, openHistory, member, submissions, score, toggleHistory,
23-
isReviewPhaseComplete, finalRank, provisionalRank, onShowPopup, rating,
23+
isReviewPhaseComplete, finalRank, provisionalRank, onShowPopup, rating, viewAsTable,
2424
}) {
2525
const {
2626
submissionTime, provisionalScore, status, submissionId,
@@ -59,34 +59,34 @@ export default function SubmissionRow({
5959
};
6060

6161
return (
62-
<div styleName="wrapper">
62+
<div styleName={`wrapper ${viewAsTable ? 'wrapper-as-table' : ''} `}>
6363
<div styleName="row">
6464
{
6565
isMM ? (
6666
<React.Fragment>
67-
<div styleName="col-1 col">
68-
<div styleName="mobile-header">FINAL RANK</div>
67+
<div styleName={`col-1 col ${viewAsTable ? 'col-view-as-table' : ''}`}>
68+
<div styleName={viewAsTable ? 'view-as-table-header' : 'mobile-header'}>FINAL RANK</div>
6969
{
7070
isReviewPhaseComplete ? finalRank || 'N/A' : 'N/A'
7171
}
7272
</div>
73-
<div styleName="mobile-header">PROVISIONAL RANK</div>
74-
<div styleName="col-2 col">
73+
<div styleName={viewAsTable ? 'view-as-table-header' : 'mobile-header'}>PROVISIONAL RANK</div>
74+
<div styleName={`col-2 col ${viewAsTable ? 'col-view-as-table' : ''}`}>
7575
<div>
7676
{ provisionalRank || 'N/A' }
7777
</div>
7878
</div>
7979
</React.Fragment>
8080
) : null
8181
}
82-
<div styleName="col-3 col">
83-
<div styleName="mobile-header">RATING</div>
82+
<div styleName={`col-3 col ${viewAsTable ? 'col-view-as-table' : ''}`}>
83+
<div styleName={viewAsTable ? 'view-as-table-header' : 'mobile-header'}>RATING</div>
8484
<span styleName={`col level-${getRatingLevel(rating)}`}>
8585
{rating || '-'}
8686
</span>
8787
</div>
88-
<div styleName="col-4 col">
89-
<div styleName="mobile-header">USERNAME</div>
88+
<div styleName={`col-4 col ${viewAsTable ? 'col-view-as-table' : ''}`}>
89+
<div styleName={viewAsTable ? 'view-as-table-header' : 'mobile-header'}>USERNAME</div>
9090
<a
9191
href={`${window.origin}/members/${member}`}
9292
target={`${_.includes(window.origin, 'www') ? '_self' : '_blank'}`}
@@ -96,26 +96,26 @@ export default function SubmissionRow({
9696
{member || '-'}
9797
</a>
9898
</div>
99-
<div styleName="col-5 col">
100-
<div styleName="mobile-header">FINAL SCORE</div>
99+
<div styleName={`col-5 col ${viewAsTable ? 'col-view-as-table' : ''}`}>
100+
<div styleName={viewAsTable ? 'view-as-table-header' : 'mobile-header'}>FINAL SCORE</div>
101101
<div>
102102
{getFinalReviewResult()}
103103
</div>
104104
</div>
105-
<div styleName="col-6 col">
106-
<div styleName="mobile-header">PROVISIONAL SCORE</div>
105+
<div styleName={`col-6 col ${viewAsTable ? 'col-view-as-table' : ''}`}>
106+
<div styleName={viewAsTable ? 'view-as-table-header' : 'mobile-header'}>PROVISIONAL SCORE</div>
107107
<div>
108108
{getInitialReviewResult() ? getInitialReviewResult() : 'N/A'}
109109
</div>
110110
</div>
111-
<div styleName="col-7 col">
112-
<div styleName="mobile-header">SUBMISSION DATE</div>
111+
<div styleName={`col-7 col ${viewAsTable ? 'col-view-as-table' : ''}`}>
112+
<div styleName={viewAsTable ? 'view-as-table-header' : 'mobile-header'}>SUBMISSION DATE</div>
113113
<div styleName="time">
114114
{moment(submissionTime).format('DD MMM YYYY')} {moment(submissionTime).format('HH:mm:ss')}
115115
</div>
116116
</div>
117-
<div styleName="col-8 col">
118-
<div styleName="mobile-header">ACTIONS</div>
117+
<div styleName={`col-8 col ${viewAsTable ? 'col-view-as-table' : ''}`}>
118+
<div styleName={viewAsTable ? 'view-as-table-header' : 'mobile-header'}>ACTIONS</div>
119119
<a
120120
onClick={toggleHistory}
121121
onKeyPress={toggleHistory}
@@ -240,4 +240,5 @@ SubmissionRow.propTypes = {
240240
finalRank: PT.number,
241241
provisionalRank: PT.number,
242242
onShowPopup: PT.func.isRequired,
243+
viewAsTable: PT.bool.isRequired,
243244
};

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

Lines changed: 86 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,24 @@
6363
}
6464
}
6565

66+
.wrapper-as-table {
67+
@include xs-to-sm {
68+
min-width: 1920px !important;
69+
}
70+
71+
.row {
72+
@include xs-to-sm {
73+
flex-direction: row !important;
74+
border-top: 1px solid $tc-gray-10 !important;
75+
margin-left: 0 !important;
76+
margin-top: 0 !important;
77+
margin-right: 0 !important;
78+
padding-top: 16px !important;
79+
padding-bottom: 16px !important;
80+
}
81+
}
82+
}
83+
6684
.wrapper {
6785
a { cursor: pointer; }
6886

@@ -125,6 +143,66 @@
125143
}
126144
}
127145

146+
.col-view-as-table {
147+
@include xs-to-sm {
148+
@include roboto-medium;
149+
150+
color: #2a2a2a;
151+
font-weight: 500;
152+
font-size: 14px;
153+
line-height: 22px;
154+
text-align: left;
155+
}
156+
157+
&.col-1 {
158+
@include xs-to-sm {
159+
flex: 39 !important;
160+
}
161+
}
162+
163+
&.col-2 {
164+
@include xs-to-sm {
165+
flex: 37 !important;
166+
}
167+
}
168+
169+
&.col-3 {
170+
@include xs-to-sm {
171+
flex: 74 !important;
172+
}
173+
}
174+
175+
&.col-4 {
176+
@include xs-to-sm {
177+
flex: 15 !important;
178+
}
179+
}
180+
181+
&.col-5 {
182+
@include xs-to-sm {
183+
flex: 22 !important;
184+
}
185+
}
186+
187+
&.col-6 {
188+
@include xs-to-sm {
189+
flex: 38 !important;
190+
}
191+
}
192+
193+
&.col-7 {
194+
@include xs-to-sm {
195+
flex: 35 !important;
196+
}
197+
}
198+
199+
&.col-8 {
200+
@include xs-to-sm {
201+
flex: 25 !important;
202+
}
203+
}
204+
}
205+
128206
.col {
129207
@include roboto-medium;
130208

@@ -273,21 +351,6 @@ hr {
273351
}
274352
}
275353

276-
.container {
277-
width: 750px !important;
278-
border-radius: 8px;
279-
280-
@include xs-to-sm {
281-
width: 100%;
282-
margin: 0;
283-
max-width: 100vw;
284-
height: 100%;
285-
max-height: 100vh;
286-
padding: 24px 16px;
287-
z-index: 999999;
288-
}
289-
}
290-
291354
.close-btn {
292355
cursor: pointer;
293356
display: flex;
@@ -315,6 +378,14 @@ hr {
315378
}
316379
}
317380

381+
.view-as-table-header {
382+
display: none !important;
383+
384+
@include xs-to-sm {
385+
display: none !important;
386+
}
387+
}
388+
318389
.mobile-header {
319390
display: none;
320391

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

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@ import challengeDetailsActions from 'actions/page/challenge-details';
2222
import LoadingIndicator from 'components/LoadingIndicator';
2323
import { goToLogin, getRatingLevel } from 'utils/tc';
2424
import Lock from '../icons/lock.svg';
25+
import ViewAsListActive from '../icons/view-as-list-active.svg';
26+
import ViewAsListInactive from '../icons/view-as-list-inactive.svg';
27+
import ViewAsTableActive from '../icons/view-as-table-active.svg';
28+
import ViewAsTableInactive from '../icons/view-as-table-inactive.svg';
2529
import SubmissionRow from './SubmissionRow';
2630
import SubmissionInformationModal from './SubmissionInformationModal';
2731
import style from './style.scss';
@@ -284,6 +288,8 @@ class SubmissionsComponent extends React.Component {
284288
unregistering,
285289
isLegacyMM,
286290
challengesUrl,
291+
viewAsTable,
292+
setViewAsTable,
287293
} = this.props;
288294
const {
289295
checkpoints,
@@ -439,7 +445,24 @@ class SubmissionsComponent extends React.Component {
439445

440446
return (
441447
<div styleName={`container dev ${isMM ? 'mm' : 'non-mm'}`}>
442-
{
448+
<div styleName="view-as">
449+
<span styleName="title">View as</span>
450+
{
451+
viewAsTable ? (
452+
<React.Fragment>
453+
<ViewAsTableActive styleName="table-icon" onClick={() => setViewAsTable(true)} />
454+
<ViewAsListInactive styleName="list-icon" onClick={() => setViewAsTable(false)} />
455+
</React.Fragment>
456+
) : (
457+
<React.Fragment>
458+
<ViewAsTableInactive styleName="table-icon" onClick={() => setViewAsTable(true)} />
459+
<ViewAsListActive styleName="list-icon" onClick={() => setViewAsTable(false)} />
460+
</React.Fragment>
461+
)
462+
}
463+
</div>
464+
<div styleName={`${viewAsTable ? 'view-as-table' : ''}`}>
465+
{
443466
!isMM && (
444467
<div styleName="head">
445468
{
@@ -564,9 +587,9 @@ class SubmissionsComponent extends React.Component {
564587
</div>
565588
)
566589
}
567-
{
590+
{
568591
isMM && (
569-
<div styleName="sub-head">
592+
<div styleName={`sub-head ${viewAsTable ? 'sub-head-table' : ''}`}>
570593
<div styleName="col-1 col">
571594
<button
572595
type="button"
@@ -748,7 +771,7 @@ class SubmissionsComponent extends React.Component {
748771
</div>
749772
)
750773
}
751-
{
774+
{
752775
isMM && (
753776
sortedSubmissions.map((submission, index) => (
754777
<SubmissionRow
@@ -765,11 +788,12 @@ class SubmissionsComponent extends React.Component {
765788
getFlagFirstTry={this.getFlagFirstTry}
766789
onGetFlagImageFail={onGetFlagImageFail}
767790
submissionDetail={submission}
791+
viewAsTable={viewAsTable}
768792
/>
769793
))
770794
)
771795
}
772-
{
796+
{
773797
!isMM && (
774798
sortedSubmissions.map(s => (
775799
<div key={_.get(s.registrant, 'memberHandle', '') + s.created} styleName="row">
@@ -824,9 +848,10 @@ class SubmissionsComponent extends React.Component {
824848
))
825849
)
826850
}
827-
{
851+
{
828852
isMM && <div styleName="bottom-line" />
829853
}
854+
</div>
830855
{isMM && (
831856
<div styleName="btn-add-submission">
832857
<Button
@@ -903,6 +928,8 @@ SubmissionsComponent.propTypes = {
903928
submissionEnded: PT.bool.isRequired,
904929
isLegacyMM: PT.bool.isRequired,
905930
challengesUrl: PT.string.isRequired,
931+
viewAsTable: PT.bool.isRequired,
932+
setViewAsTable: PT.func.isRequired,
906933
};
907934

908935
function mapDispatchToProps(dispatch) {

0 commit comments

Comments
 (0)