Skip to content

Profiles app -> dev #799

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 18, 2023
Merged

Profiles app -> dev #799

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0608269
MP-234 mobile view init
kkartunov Jul 18, 2023
6abc12d
MP-234 more mobile view fixes
kkartunov Jul 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/apps/profiles/src/member-profile/about-me/AboutMe.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,6 @@
text-align: center;
}

:global(.body-large) {
font-style: italic;
}

.wizzardWrap {
display: flex;
align-items: center;
Expand All @@ -26,4 +22,8 @@
.empty {
height: auto;
margin-top: $sp-4;

@include ltelg {
padding: $sp-4 $sp-4 $sp-4 0;
}
}
2 changes: 1 addition & 1 deletion src/apps/profiles/src/member-profile/about-me/AboutMe.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ const AboutMe: FC<AboutMeProps> = (props: AboutMeProps) => {
<MemberRatingCard profile={props.profile} />

<div className={classNames(styles.wizzardWrap, hasEmptyDescription && styles.emptyDesc)}>
<p className='body-large'>{memberTitleTrait?.profileSelfTitle}</p>
<p className='body-main-medium'>{memberTitleTrait?.profileSelfTitle}</p>
{canEdit && !hasEmptyDescription && (
<EditMemberPropertyBtn
onClick={handleEditClick}
Expand Down
17 changes: 8 additions & 9 deletions src/apps/profiles/src/member-profile/community-awards/CommunityAwards.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,12 @@
display: flex;
flex-direction: column;
margin-top: $sp-8;
padding-bottom: $sp-4;

.title {
display: flex;
justify-content: space-between;
justify-content: flex-end;
align-items: center;
margin-bottom: $sp-10;

.viewAllLink {
text-transform: uppercase;
color: $turq-160;
font-weight: $font-weight-bold;
font-size: 14px;
}
}

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

@include ltelg {
padding-bottom: 0;
padding-left: $sp-2;
min-width: 100%;
}

&:hover {
box-shadow: 0 0 16px rgba(22, 103, 154, 0.5);
}
Expand Down
10 changes: 8 additions & 2 deletions src/apps/profiles/src/member-profile/community-awards/CommunityAwards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'
import { bind } from 'lodash'

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

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

Expand All @@ -29,8 +30,13 @@ const CommunityAwards: FC<CommunityAwardsProps> = (props: CommunityAwardsProps)
return memberBadges && memberBadges.count ? (
<div className={styles.container}>
<div className={styles.title}>
<h4>Community Awards & Honors</h4>
<Link to='badges' className={styles.viewAllLink}>View all badges</Link>
<Link to='badges'>
<Button
label='View all badges'
link
variant='linkblue'
/>
</Link>
</div>

<div className={styles.badges}>
Expand Down
6 changes: 6 additions & 0 deletions ...ofiles/src/member-profile/links/ModifyMemberLinksModal/ModifyMemberLinksModal.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,12 @@
display: flex;
align-items: center;

p {
@include ltelg {
word-break: break-all;
}
}

svg {
width: 16px;
height: 16px;
Expand Down
28 changes: 23 additions & 5 deletions src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,26 +21,38 @@

.profileHeaderContentOuter {
margin-top: 75px;

@include ltelg {
margin-top: 0;
}
}

.profileHeaderBottom {
height: 90px;
background-color: $tc-white
background-color: $tc-white;

@include ltelg {
height: 30px;
}
}
}

.profileOuter {
margin-top: 130px;

.profileInner {
width: 100%;
}

.profileInfoWrap {
display: grid;
grid-template-columns: 300px 1fr;
grid-gap: $sp-15;
margin-bottom: $sp-13;

@include ltelg {
grid-template-columns: 1fr;
gap: 0;
display: flex;
flex-direction: column;
}

.profileInfoLeft {
Expand All @@ -63,9 +75,10 @@
display: flex;
flex-direction: column;
margin-top: -275px;
z-index: 1;

@include ltelg {
margin-top: 0;
margin-top: $sp-8;
}

.shortBio {
Expand Down Expand Up @@ -99,7 +112,12 @@

.sectionWrap {
background-color: $tc-white;
padding: $sp-8 $sp-8 0;
padding: $sp-8 $sp-8 $sp-4;
margin-bottom: $sp-8;
border-radius: 16px;

@include ltelg {
padding: $sp-4;
padding-bottom: 0;
}
}
130 changes: 56 additions & 74 deletions src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { FC } from 'react'

import { UserProfile } from '~/libs/core'
import { ContentLayout, PageTitle } from '~/libs/ui'
import { useCheckIsMobile } from '~/libs/shared'

// import { MemberTCActivityInfo } from '../tc-activity'
import { MemberSkillsInfo } from '../skills'
Expand All @@ -24,103 +23,86 @@ interface ProfilePageLayoutProps {
authProfile: UserProfile | undefined
}

const ProfilePageLayout: FC<ProfilePageLayoutProps> = (props: ProfilePageLayoutProps) => {
const isMobile: boolean = useCheckIsMobile()
const ProfilePageLayout: FC<ProfilePageLayoutProps> = (props: ProfilePageLayoutProps) => (
<div className={styles.container}>

return (
<div className={styles.container}>
<PageTitle>{`${props.profile.handle} | Community Profile | Topcoder`}</PageTitle>

<PageTitle>{`${props.profile.handle} | Community Profile | Topcoder`}</PageTitle>
<div className={styles.profileHeaderWrap}>
<ContentLayout
outerClass={styles.profileHeaderContentOuter}
contentClass={styles.profileHeaderContent}
>
<ProfileHeader
profile={props.profile}
authProfile={props.authProfile}
refreshProfile={props.refreshProfile}
/>
</ContentLayout>
<div className={styles.profileHeaderBottom} />
</div>

<div className={styles.profileHeaderWrap}>
<ContentLayout
outerClass={styles.profileHeaderContentOuter}
contentClass={styles.profileHeaderContent}
>
<ProfileHeader
<ContentLayout
outerClass={styles.profileOuter}
innerClass={styles.profileInner}
>
<div className={styles.profileInfoWrap}>
<div className={styles.profileInfoLeft}>
<AboutMe
profile={props.profile}
authProfile={props.authProfile}
refreshProfile={props.refreshProfile}
/>
</ContentLayout>
<div className={styles.profileHeaderBottom} />
</div>

<ContentLayout
outerClass={styles.profileOuter}
>
<div className={styles.profileInfoWrap}>
<div className={styles.profileInfoLeft}>
{
!isMobile && (
<AboutMe
profile={props.profile}
authProfile={props.authProfile}
refreshProfile={props.refreshProfile}
/>
)
}

<MemberLanguages profile={props.profile} authProfile={props.authProfile} />
<MemberLanguages profile={props.profile} authProfile={props.authProfile} />

<MemberLinks profile={props.profile} authProfile={props.authProfile} />

<MemberLocalInfo
profile={props.profile}
authProfile={props.authProfile}
refreshProfile={props.refreshProfile}
/>
</div>
<div className={styles.profileInfoRight}>
{
isMobile && (
<AboutMe
profile={props.profile}
authProfile={props.authProfile}
refreshProfile={props.refreshProfile}
/>
)
}
<MemberLinks profile={props.profile} authProfile={props.authProfile} />

<div className={styles.sectionWrap}>
<div className={styles.skillsWrap}>
<MemberSkillsInfo
profile={props.profile}
authProfile={props.authProfile}
refreshProfile={props.refreshProfile}
/>
</div>
<MemberLocalInfo
profile={props.profile}
authProfile={props.authProfile}
refreshProfile={props.refreshProfile}
/>
</div>
<div className={styles.profileInfoRight}>
<div className={styles.sectionWrap}>
<div className={styles.skillsWrap}>
<MemberSkillsInfo
profile={props.profile}
authProfile={props.authProfile}
refreshProfile={props.refreshProfile}
/>
</div>
</div>

<MemberTCAchievements profile={props.profile} />
<MemberTCAchievements profile={props.profile} />

<div className={styles.expirenceWrap}>
<div>
<div className={styles.sectionWrap}>
<WorkExpirence
profile={props.profile}
authProfile={props.authProfile}
/>
</div>
</div>
<div className={styles.expirenceWrap}>
<div>
<div className={styles.sectionWrap}>
<EducationAndCertifications
<WorkExpirence
profile={props.profile}
authProfile={props.authProfile}
/>
</div>
</div>
<div className={styles.sectionWrap}>
<EducationAndCertifications
profile={props.profile}
authProfile={props.authProfile}
/>
</div>
</div>
</div>
</div>

{/* <MemberTCActivityInfo profile={props.profile} /> */}
{/* <MemberTCActivityInfo profile={props.profile} /> */}

</ContentLayout>
</ContentLayout>

<OnboardingCompleted authProfile={props.authProfile} />
<OnboardingCompleted authProfile={props.authProfile} />

</div>
)
}
</div>
)

export default ProfilePageLayout
Loading