Skip to content

Commit 08dd965

Browse files
kkartunovkkartunov
authored
Merge pull request #799 from topcoder-platform/profiles-app
Profiles app -> dev
2 parents 087fe47 + 6abc12d commit 08dd965

File tree

12 files changed

+210
-119
lines changed

12 files changed

+210
-119
lines changed

‎src/apps/profiles/src/member-profile/about-me/AboutMe.module.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,6 @@
88
text-align: center;
99
}
1010

11-
:global(.body-large) {
12-
font-style: italic;
13-
}
14-
1511
.wizzardWrap {
1612
display: flex;
1713
align-items: center;
@@ -26,4 +22,8 @@
2622
.empty {
2723
height: auto;
2824
margin-top: $sp-4;
25+
26+
@include ltelg {
27+
padding: $sp-4 $sp-4 $sp-4 0;
28+
}
2929
}

‎src/apps/profiles/src/member-profile/about-me/AboutMe.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ const AboutMe: FC<AboutMeProps> = (props: AboutMeProps) => {
7676
<MemberRatingCard profile={props.profile} />
7777

7878
<div className={classNames(styles.wizzardWrap, hasEmptyDescription && styles.emptyDesc)}>
79-
<p className='body-large'>{memberTitleTrait?.profileSelfTitle}</p>
79+
<p className='body-main-medium'>{memberTitleTrait?.profileSelfTitle}</p>
8080
{canEdit && !hasEmptyDescription && (
8181
<EditMemberPropertyBtn
8282
onClick={handleEditClick}

‎src/apps/profiles/src/member-profile/community-awards/CommunityAwards.module.scss‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,12 @@
44
display: flex;
55
flex-direction: column;
66
margin-top: $sp-8;
7+
padding-bottom: $sp-4;
78

89
.title {
910
display: flex;
10-
justify-content: space-between;
11+
justify-content: flex-end;
1112
align-items: center;
12-
margin-bottom: $sp-10;
13-
14-
.viewAllLink {
15-
text-transform: uppercase;
16-
color: $turq-160;
17-
font-weight: $font-weight-bold;
18-
font-size: 14px;
19-
}
2013
}
2114

2215
.badges {
@@ -40,6 +33,12 @@
4033
transition: 0.25s ease-in-out;
4134
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
4235

36+
@include ltelg {
37+
padding-bottom: 0;
38+
padding-left: $sp-2;
39+
min-width: 100%;
40+
}
41+
4342
&:hover {
4443
box-shadow: 0 0 16px rgba(22, 103, 154, 0.5);
4544
}

‎src/apps/profiles/src/member-profile/community-awards/CommunityAwards.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'
33
import { bind } from 'lodash'
44

55
import { useMemberBadges, UserBadge, UserBadgesResponse, UserProfile } from '~/libs/core'
6+
import { Button } from '~/libs/ui'
67

78
import { MemberBadgeModal } from '../../components'
89

@@ -29,8 +30,13 @@ const CommunityAwards: FC<CommunityAwardsProps> = (props: CommunityAwardsProps)
2930
return memberBadges && memberBadges.count ? (
3031
<div className={styles.container}>
3132
<div className={styles.title}>
32-
<h4>Community Awards & Honors</h4>
33-
<Link to='badges' className={styles.viewAllLink}>View all badges</Link>
33+
<Link to='badges'>
34+
<Button
35+
label='View all badges'
36+
link
37+
variant='linkblue'
38+
/>
39+
</Link>
3440
</div>
3541

3642
<div className={styles.badges}>

‎src/apps/profiles/src/member-profile/links/ModifyMemberLinksModal/ModifyMemberLinksModal.module.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,12 @@
6969
display: flex;
7070
align-items: center;
7171

72+
p {
73+
@include ltelg {
74+
word-break: break-all;
75+
}
76+
}
77+
7278
svg {
7379
width: 16px;
7480
height: 16px;

‎src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.module.scss‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,26 +21,38 @@
2121

2222
.profileHeaderContentOuter {
2323
margin-top: 75px;
24+
25+
@include ltelg {
26+
margin-top: 0;
27+
}
2428
}
2529

2630
.profileHeaderBottom {
2731
height: 90px;
28-
background-color: $tc-white
32+
background-color: $tc-white;
33+
34+
@include ltelg {
35+
height: 30px;
36+
}
2937
}
3038
}
3139

3240
.profileOuter {
3341
margin-top: 130px;
3442

43+
.profileInner {
44+
width: 100%;
45+
}
46+
3547
.profileInfoWrap {
3648
display: grid;
3749
grid-template-columns: 300px 1fr;
3850
grid-gap: $sp-15;
3951
margin-bottom: $sp-13;
4052

4153
@include ltelg {
42-
grid-template-columns: 1fr;
43-
gap: 0;
54+
display: flex;
55+
flex-direction: column;
4456
}
4557

4658
.profileInfoLeft {
@@ -63,9 +75,10 @@
6375
display: flex;
6476
flex-direction: column;
6577
margin-top: -275px;
78+
z-index: 1;
6679

6780
@include ltelg {
68-
margin-top: 0;
81+
margin-top: $sp-8;
6982
}
7083

7184
.shortBio {
@@ -99,7 +112,12 @@
99112

100113
.sectionWrap {
101114
background-color: $tc-white;
102-
padding: $sp-8 $sp-8 0;
115+
padding: $sp-8 $sp-8 $sp-4;
103116
margin-bottom: $sp-8;
104117
border-radius: 16px;
118+
119+
@include ltelg {
120+
padding: $sp-4;
121+
padding-bottom: 0;
122+
}
105123
}

‎src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx‎

Lines changed: 56 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { FC } from 'react'
22

33
import { UserProfile } from '~/libs/core'
44
import { ContentLayout, PageTitle } from '~/libs/ui'
5-
import { useCheckIsMobile } from '~/libs/shared'
65

76
// import { MemberTCActivityInfo } from '../tc-activity'
87
import { MemberSkillsInfo } from '../skills'
@@ -24,103 +23,86 @@ interface ProfilePageLayoutProps {
2423
authProfile: UserProfile | undefined
2524
}
2625

27-
const ProfilePageLayout: FC<ProfilePageLayoutProps> = (props: ProfilePageLayoutProps) => {
28-
const isMobile: boolean = useCheckIsMobile()
26+
const ProfilePageLayout: FC<ProfilePageLayoutProps> = (props: ProfilePageLayoutProps) => (
27+
<div className={styles.container}>
2928

30-
return (
31-
<div className={styles.container}>
29+
<PageTitle>{`${props.profile.handle} | Community Profile | Topcoder`}</PageTitle>
3230

33-
<PageTitle>{`${props.profile.handle} | Community Profile | Topcoder`}</PageTitle>
31+
<div className={styles.profileHeaderWrap}>
32+
<ContentLayout
33+
outerClass={styles.profileHeaderContentOuter}
34+
contentClass={styles.profileHeaderContent}
35+
>
36+
<ProfileHeader
37+
profile={props.profile}
38+
authProfile={props.authProfile}
39+
refreshProfile={props.refreshProfile}
40+
/>
41+
</ContentLayout>
42+
<div className={styles.profileHeaderBottom} />
43+
</div>
3444

35-
<div className={styles.profileHeaderWrap}>
36-
<ContentLayout
37-
outerClass={styles.profileHeaderContentOuter}
38-
contentClass={styles.profileHeaderContent}
39-
>
40-
<ProfileHeader
45+
<ContentLayout
46+
outerClass={styles.profileOuter}
47+
innerClass={styles.profileInner}
48+
>
49+
<div className={styles.profileInfoWrap}>
50+
<div className={styles.profileInfoLeft}>
51+
<AboutMe
4152
profile={props.profile}
4253
authProfile={props.authProfile}
4354
refreshProfile={props.refreshProfile}
4455
/>
45-
</ContentLayout>
46-
<div className={styles.profileHeaderBottom} />
47-
</div>
4856

49-
<ContentLayout
50-
outerClass={styles.profileOuter}
51-
>
52-
<div className={styles.profileInfoWrap}>
53-
<div className={styles.profileInfoLeft}>
54-
{
55-
!isMobile && (
56-
<AboutMe
57-
profile={props.profile}
58-
authProfile={props.authProfile}
59-
refreshProfile={props.refreshProfile}
60-
/>
61-
)
62-
}
63-
64-
<MemberLanguages profile={props.profile} authProfile={props.authProfile} />
57+
<MemberLanguages profile={props.profile} authProfile={props.authProfile} />
6558

66-
<MemberLinks profile={props.profile} authProfile={props.authProfile} />
67-
68-
<MemberLocalInfo
69-
profile={props.profile}
70-
authProfile={props.authProfile}
71-
refreshProfile={props.refreshProfile}
72-
/>
73-
</div>
74-
<div className={styles.profileInfoRight}>
75-
{
76-
isMobile && (
77-
<AboutMe
78-
profile={props.profile}
79-
authProfile={props.authProfile}
80-
refreshProfile={props.refreshProfile}
81-
/>
82-
)
83-
}
59+
<MemberLinks profile={props.profile} authProfile={props.authProfile} />
8460

85-
<div className={styles.sectionWrap}>
86-
<div className={styles.skillsWrap}>
87-
<MemberSkillsInfo
88-
profile={props.profile}
89-
authProfile={props.authProfile}
90-
refreshProfile={props.refreshProfile}
91-
/>
92-
</div>
61+
<MemberLocalInfo
62+
profile={props.profile}
63+
authProfile={props.authProfile}
64+
refreshProfile={props.refreshProfile}
65+
/>
66+
</div>
67+
<div className={styles.profileInfoRight}>
68+
<div className={styles.sectionWrap}>
69+
<div className={styles.skillsWrap}>
70+
<MemberSkillsInfo
71+
profile={props.profile}
72+
authProfile={props.authProfile}
73+
refreshProfile={props.refreshProfile}
74+
/>
9375
</div>
76+
</div>
9477

95-
<MemberTCAchievements profile={props.profile} />
78+
<MemberTCAchievements profile={props.profile} />
9679

97-
<div className={styles.expirenceWrap}>
98-
<div>
99-
<div className={styles.sectionWrap}>
100-
<WorkExpirence
101-
profile={props.profile}
102-
authProfile={props.authProfile}
103-
/>
104-
</div>
105-
</div>
80+
<div className={styles.expirenceWrap}>
81+
<div>
10682
<div className={styles.sectionWrap}>
107-
<EducationAndCertifications
83+
<WorkExpirence
10884
profile={props.profile}
10985
authProfile={props.authProfile}
11086
/>
11187
</div>
11288
</div>
89+
<div className={styles.sectionWrap}>
90+
<EducationAndCertifications
91+
profile={props.profile}
92+
authProfile={props.authProfile}
93+
/>
94+
</div>
11395
</div>
11496
</div>
97+
</div>
11598

116-
{/* <MemberTCActivityInfo profile={props.profile} /> */}
99+
{/* <MemberTCActivityInfo profile={props.profile} /> */}
117100

118-
</ContentLayout>
101+
</ContentLayout>
119102

120-
<OnboardingCompleted authProfile={props.authProfile} />
103+
<OnboardingCompleted authProfile={props.authProfile} />
121104

122-
</div>
123-
)
124-
}
105+
</div>
106+
)
125107

126108
export default ProfilePageLayout

0 commit comments

Comments
 (0)