Skip to content

Commit 0608269

Browse files
kkartunovkkartunov
committed
MP-234 mobile view init
1 parent 23964f3 commit 0608269

File tree

10 files changed

+193
-100
lines changed

10 files changed

+193
-100
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,8 @@
2626
.empty {
2727
height: auto;
2828
margin-top: $sp-4;
29+
30+
@include ltelg {
31+
padding: $sp-4 $sp-4 $sp-4 0;
32+
}
2933
}

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@
1111
align-items: center;
1212
margin-bottom: $sp-10;
1313

14+
@include ltelg {
15+
margin-bottom: $sp-4;
16+
}
17+
1418
.viewAllLink {
1519
text-transform: uppercase;
1620
color: $turq-160;
@@ -40,6 +44,11 @@
4044
transition: 0.25s ease-in-out;
4145
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
4246

47+
@include ltelg {
48+
padding-bottom: 0;
49+
padding-left: $sp-2;
50+
}
51+
4352
&:hover {
4453
box-shadow: 0 0 16px rgba(22, 103, 154, 0.5);
4554
}

‎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: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,19 @@
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

@@ -65,7 +73,7 @@
6573
margin-top: -275px;
6674

6775
@include ltelg {
68-
margin-top: 0;
76+
margin-top: $sp-8;
6977
}
7078

7179
.shortBio {
@@ -102,4 +110,9 @@
102110
padding: $sp-8 $sp-8 0;
103111
margin-bottom: $sp-8;
104112
border-radius: 16px;
113+
114+
@include ltelg {
115+
padding: $sp-4;
116+
padding-bottom: 0;
117+
}
105118
}

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

Lines changed: 55 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,85 @@ 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+
>
48+
<div className={styles.profileInfoWrap}>
49+
<div className={styles.profileInfoLeft}>
50+
<AboutMe
4151
profile={props.profile}
4252
authProfile={props.authProfile}
4353
refreshProfile={props.refreshProfile}
4454
/>
45-
</ContentLayout>
46-
<div className={styles.profileHeaderBottom} />
47-
</div>
4855

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} />
56+
<MemberLanguages profile={props.profile} authProfile={props.authProfile} />
6557

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-
}
58+
<MemberLinks profile={props.profile} authProfile={props.authProfile} />
8459

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>
60+
<MemberLocalInfo
61+
profile={props.profile}
62+
authProfile={props.authProfile}
63+
refreshProfile={props.refreshProfile}
64+
/>
65+
</div>
66+
<div className={styles.profileInfoRight}>
67+
<div className={styles.sectionWrap}>
68+
<div className={styles.skillsWrap}>
69+
<MemberSkillsInfo
70+
profile={props.profile}
71+
authProfile={props.authProfile}
72+
refreshProfile={props.refreshProfile}
73+
/>
9374
</div>
75+
</div>
9476

95-
<MemberTCAchievements profile={props.profile} />
77+
<MemberTCAchievements profile={props.profile} />
9678

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>
79+
<div className={styles.expirenceWrap}>
80+
<div>
10681
<div className={styles.sectionWrap}>
107-
<EducationAndCertifications
82+
<WorkExpirence
10883
profile={props.profile}
10984
authProfile={props.authProfile}
11085
/>
11186
</div>
11287
</div>
88+
<div className={styles.sectionWrap}>
89+
<EducationAndCertifications
90+
profile={props.profile}
91+
authProfile={props.authProfile}
92+
/>
93+
</div>
11394
</div>
11495
</div>
96+
</div>
11597

116-
{/* <MemberTCActivityInfo profile={props.profile} /> */}
98+
{/* <MemberTCActivityInfo profile={props.profile} /> */}
11799

118-
</ContentLayout>
100+
</ContentLayout>
119101

120-
<OnboardingCompleted authProfile={props.authProfile} />
102+
<OnboardingCompleted authProfile={props.authProfile} />
121103

122-
</div>
123-
)
124-
}
104+
</div>
105+
)
125106

126107
export default ProfilePageLayout

‎src/apps/profiles/src/member-profile/profile-header/ProfileHeader.module.scss‎

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,38 @@
22

33
.container {
44
display: flex;
5-
flex-wrap: wrap;
65
align-items: flex-start;
76
justify-content: space-between;
87
color: $tc-white;
8+
position: relative;
9+
10+
@include ltelg {
11+
padding-bottom: 150px;
12+
flex-direction: column;
13+
}
914

1015
.photoWrap {
1116
position: relative;
1217
margin-right: 60px;
1318

19+
@include ltelg {
20+
margin: auto;
21+
position: absolute;
22+
bottom: -125px;
23+
left: calc(50% - 125px);
24+
}
25+
1426
.profilePhoto {
1527
width: 300px;
1628
height: 300px;
1729
border: 12px solid $tc-white;
1830
border-radius: 50%;
1931
background-color: $tc-white;
32+
33+
@include ltelg {
34+
width: 250px;
35+
height: 250px;
36+
}
2037
}
2138

2239
.addButton {
@@ -49,6 +66,11 @@
4966
font-size: 40px;
5067
font-weight: $font-weight-bold;
5168
font-family: $font-barlow;
69+
70+
@include ltelg {
71+
font-size: 32px;
72+
line-height: 33px;
73+
}
5274
}
5375

5476
button {
@@ -60,6 +82,11 @@
6082
margin-top: $sp-2;
6183
font-size: 20px;
6284

85+
@include ltelg {
86+
font-size: 16px;
87+
margin-top: 0;
88+
}
89+
6390
span {
6491
font-weight: $font-weight-bold;
6592
}
@@ -75,12 +102,16 @@
75102
color: $black-100;
76103
margin-top: $sp-8;
77104

78-
> span {
105+
@include ltelg {
106+
margin-top: $sp-4;
107+
}
108+
109+
>span {
79110
margin-right: $sp-1;
80111
}
81112

82113
>button {
83114
margin-left: $sp-2;
84115
}
85116
}
86-
}
117+
}

0 commit comments

Comments
 (0)