Skip to content

Commit 4670c51

Browse files
codeMintercodeMinter
authored
Merge pull request #2596 from nauhil/feature-profile-enhancements
Topcoder Member Profile UI Fixes and Enhancements - Part 1
2 parents 4d896ea + d001468 commit 4670c51

File tree

47 files changed

+2347
-764
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+2347
-764
lines changed

‎src/assets/images/profile/ico-edit.svg

+6
Loading

‎src/assets/images/tools/device-types/ico-edit.svg

+6
Loading

‎src/assets/images/tools/service-provider-types/ico-edit.svg

+6
Loading

‎src/assets/images/tools/software-types/ico-edit.svg

+6
Loading

‎src/assets/images/tools/subscription-types/ico-edit.svg

+6
Loading

‎src/shared/components/Settings/Profile/Education/List/Item/index.jsx

+73-29
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/**
22
* render education Item
33
*/
4+
import _ from 'lodash';
45
import React from 'react';
56
import PT from 'prop-types';
67
import ReactSVG from 'react-svg';
@@ -19,47 +20,89 @@ export default function Item(props) {
1920
education,
2021
index,
2122
onDeleteItem,
23+
onEditItem,
2224
} = props;
2325

26+
const hasSecondLine = () => {
27+
if (_.isEmpty(education.timePeriodFrom) && _.isEmpty(education.timePeriodTo)
28+
&& !education.graduated) {
29+
return false;
30+
}
31+
32+
return true;
33+
};
34+
2435
return (
2536
<div styleName="container">
2637
<div styleName="education-info">
2738
<div styleName="education-icon">
2839
<ReactSVG path={assets('./ico-education.svg')} />
2940
</div>
30-
<div styleName="education-parameters">
31-
<div styleName="parameter-first-line">
41+
<div styleName={`education-parameters${hasSecondLine() ? '' : ' single-line'}`}>
42+
<div styleName={`parameter-first-line${hasSecondLine() ? '' : ' single-line'}`}>
3243
{ `${education.schoolCollegeName} ${education.type}` }
3344
</div>
34-
<div styleName="parameter-second-line">
35-
{ `${moment(education.timePeriodFrom).format('YYYY')} - ${moment(education.timePeriodTo).format('YYYY')}${education.graduated ? ' | Graduated' : ''}` }
36-
</div>
37-
<div styleName="parameter-second-line-mobile">
38-
<p>
39-
{`${moment(education.timePeriodFrom).format('YYYY')} - ${moment(education.timePeriodTo).format('YYYY')}`}
40-
</p>
41-
{
42-
education.graduated && (
43-
<p>
44-
Graduated
45-
</p>
46-
)
47-
}
48-
</div>
45+
{
46+
hasSecondLine() && (
47+
<React.Fragment>
48+
<div styleName="parameter-second-line">
49+
{
50+
`${!_.isEmpty(education.timePeriodFrom) && !_.isEmpty(education.timePeriodTo) && !education.graduated ? `${moment(education.timePeriodFrom).format('YYYY')} - ${moment(education.timePeriodTo).format('YYYY')}` : ''}`
51+
}
52+
{
53+
_.isEmpty(education.timePeriodFrom) && _.isEmpty(education.timePeriodTo) && `${education.graduated ? 'Graduated' : ''}`
54+
}
55+
{
56+
!_.isEmpty(education.timePeriodFrom) && !_.isEmpty(education.timePeriodTo) && education.graduated && `${moment(education.timePeriodFrom).format('YYYY')} - ${moment(education.timePeriodTo).format('YYYY')} | Graduated`
57+
}
58+
</div>
59+
<div styleName="parameter-second-line-mobile">
60+
{
61+
!_.isEmpty(education.timePeriodFrom) && !_.isEmpty(education.timePeriodTo) && (
62+
<p>
63+
{`${moment(education.timePeriodFrom).format('YYYY')} - ${moment(education.timePeriodTo).format('YYYY')}`}
64+
</p>
65+
)
66+
}
67+
{
68+
education.graduated && (
69+
<p>
70+
Graduated
71+
</p>
72+
)
73+
}
74+
</div>
75+
</React.Fragment>
76+
)
77+
}
4978
</div>
5079
</div>
51-
<a
52-
styleName="delete"
53-
onKeyPress={() => onDeleteItem(index)}
54-
tabIndex={0}
55-
role="button"
56-
onClick={() => onDeleteItem(index)}
57-
>
58-
<img src={assets('./ico-trash.svg')} alt="delete-icon" />
59-
<p>
60-
Delete
61-
</p>
62-
</a>
80+
<div styleName="operation-container">
81+
<a
82+
styleName="edit"
83+
onKeyPress={() => onEditItem(index)}
84+
tabIndex={0}
85+
role="button"
86+
onClick={() => onEditItem(index)}
87+
>
88+
<img src={assets('./ico-edit.svg')} alt="edit-icon" />
89+
<p>
90+
Edit
91+
</p>
92+
</a>
93+
<a
94+
styleName="delete"
95+
onKeyPress={() => onDeleteItem(index)}
96+
tabIndex={0}
97+
role="button"
98+
onClick={() => onDeleteItem(index)}
99+
>
100+
<img src={assets('./ico-trash.svg')} alt="delete-icon" />
101+
<p>
102+
Delete
103+
</p>
104+
</a>
105+
</div>
63106
</div>
64107
);
65108
}
@@ -68,4 +111,5 @@ Item.propTypes = {
68111
education: PT.shape().isRequired,
69112
index: PT.number.isRequired,
70113
onDeleteItem: PT.func.isRequired,
114+
onEditItem: PT.func.isRequired,
71115
};

‎src/shared/components/Settings/Profile/Education/List/Item/styles.scss

+65-18
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,11 @@
3636
line-height: 20px;
3737
text-transform: capitalize;
3838
padding-right: 20px;
39+
40+
&.single-line {
41+
flex-direction: row;
42+
align-items: center;
43+
}
3944
}
4045

4146
.parameter-first-line {
@@ -44,6 +49,10 @@
4449
margin-bottom: 10px;
4550
word-break: break-all;
4651

52+
&.single-line {
53+
margin-bottom: 0;
54+
}
55+
4756
@include upto-sm {
4857
margin-bottom: 0;
4958
}
@@ -74,32 +83,70 @@
7483
}
7584
}
7685

77-
.delete {
86+
.operation-container {
7887
display: flex;
79-
flex-direction: column;
80-
justify-items: center;
81-
justify-content: center;
82-
cursor: pointer;
83-
outline-style: none;
88+
flex-direction: row;
89+
justify-content: space-between;
8490

85-
img {
86-
margin-bottom: 10px;
91+
.delete {
92+
display: flex;
93+
flex-direction: column;
94+
justify-items: center;
95+
justify-content: center;
96+
cursor: pointer;
97+
outline-style: none;
98+
margin-left: 10px;
99+
100+
img {
101+
margin-bottom: 10px;
102+
103+
@include upto-sm {
104+
margin-bottom: 0;
105+
}
106+
}
107+
108+
p {
109+
@include roboto-regular;
87110

88-
@include upto-sm {
89-
margin-bottom: 0;
111+
font-size: 11px;
112+
line-height: 15px;
113+
font-weight: 400;
114+
color: $tc-gray-50;
115+
116+
@include upto-sm {
117+
display: none;
118+
}
90119
}
91120
}
92121

93-
p {
94-
@include roboto-regular;
122+
.edit {
123+
display: flex;
124+
flex-direction: column;
125+
align-items: center;
126+
justify-content: center;
127+
cursor: pointer;
128+
outline-style: none;
129+
margin-left: 10px;
130+
131+
img {
132+
margin-bottom: 10px;
133+
134+
@include upto-sm {
135+
margin-bottom: 0;
136+
}
137+
}
95138

96-
font-size: 11px;
97-
line-height: 15px;
98-
font-weight: 400;
99-
color: $tc-gray-50;
139+
p {
140+
@include roboto-regular;
141+
142+
font-size: 11px;
143+
line-height: 15px;
144+
font-weight: 400;
145+
color: $tc-gray-50;
100146

101-
@include upto-sm {
102-
display: none;
147+
@include upto-sm {
148+
display: none;
149+
}
103150
}
104151
}
105152
}

‎src/shared/components/Settings/Profile/Education/List/index.jsx

+8-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export default function EducationList(props) {
1111
const {
1212
educationList,
1313
onDeleteItem,
14+
onEditItem,
1415
} = props;
1516

1617
return (
@@ -19,7 +20,12 @@ export default function EducationList(props) {
1920
{
2021
educationList.items.map((education, index) => (
2122
<li key={`${education.type}${index + 1}`}>
22-
<Item education={education} index={index} onDeleteItem={onDeleteItem} />
23+
<Item
24+
education={education}
25+
index={index}
26+
onDeleteItem={onDeleteItem}
27+
onEditItem={onEditItem}
28+
/>
2329
</li>
2430
))
2531
}
@@ -31,4 +37,5 @@ export default function EducationList(props) {
3137
EducationList.propTypes = {
3238
educationList: PT.shape().isRequired,
3339
onDeleteItem: PT.func.isRequired,
40+
onEditItem: PT.func.isRequired,
3441
};

0 commit comments

Comments
 (0)