Added noSidebar prop to ProfilePage, ProfileLayout

• Added:
- noSidebar prop to ProfilePage, ProfileLayout for photos and videos tabs
This commit is contained in:
mgabdev 2020-06-08 19:39:35 -04:00
parent a5e99dd7c3
commit 2c54bf43b0
2 changed files with 27 additions and 11 deletions

View File

@ -3,6 +3,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
import { BREAKPOINT_EXTRA_SMALL } from '../constants' import { BREAKPOINT_EXTRA_SMALL } from '../constants'
import Sticky from 'react-stickynode' import Sticky from 'react-stickynode'
import { me } from '../initial_state' import { me } from '../initial_state'
import { CX } from '../constants'
import LinkFooter from '../components/link_footer' import LinkFooter from '../components/link_footer'
import ProfileStatsPanel from '../components/panel/profile_stats_panel' import ProfileStatsPanel from '../components/panel/profile_stats_panel'
import ProfileInfoPanel from '../components/panel/profile_info_panel' import ProfileInfoPanel from '../components/panel/profile_info_panel'
@ -23,6 +24,7 @@ export default class ProfileLayout extends ImmutablePureComponent {
children: PropTypes.node.isRequired, children: PropTypes.node.isRequired,
titleHTML: PropTypes.string, titleHTML: PropTypes.string,
unavailable: PropTypes.bool, unavailable: PropTypes.bool,
noSidebar: PropTypes.bool,
} }
render() { render() {
@ -31,8 +33,16 @@ export default class ProfileLayout extends ImmutablePureComponent {
children, children,
titleHTML, titleHTML,
unavailable, unavailable,
noSidebar,
} = this.props } = this.props
const mainContentClasses = CX({
default: 1,
width645PX: !noSidebar,
width1015PX: noSidebar,
z1: 1,
})
return ( return (
<div className={[_s.default, _s.width100PC, _s.heightMin100VH, _s.bgTertiary].join(' ')}> <div className={[_s.default, _s.width100PC, _s.heightMin100VH, _s.bgTertiary].join(' ')}>
<Responsive max={BREAKPOINT_EXTRA_SMALL}> <Responsive max={BREAKPOINT_EXTRA_SMALL}>
@ -100,17 +110,20 @@ export default class ProfileLayout extends ImmutablePureComponent {
<ProfileHeader account={account} /> <ProfileHeader account={account} />
<div className={[_s.default, _s.width1015PX, , _s.flexRow, _s.justifyContentEnd, _s.py15].join(' ')}> <div className={[_s.default, _s.width1015PX, , _s.flexRow, _s.justifyContentEnd, _s.py15].join(' ')}>
<div className={[_s.default, _s.width340PX, _s.mr15].join(' ')}> {
<Sticky top={63} enabled> !noSidebar &&
<div className={[_s.default, _s.width340PX].join(' ')}> <div className={[_s.default, _s.width340PX, _s.mr15].join(' ')}>
<ProfileStatsPanel account={account} /> <Sticky top={63} enabled>
<ProfileInfoPanel account={account} /> <div className={[_s.default, _s.width340PX].join(' ')}>
{ !unavailable && <MediaGalleryPanel account={account} /> } <ProfileStatsPanel account={account} />
<LinkFooter /> <ProfileInfoPanel account={account} />
</div> { !unavailable && <MediaGalleryPanel account={account} /> }
</Sticky> <LinkFooter />
</div> </div>
<div className={[_s.default, _s.width645PX, _s.z1].join(' ')}> </Sticky>
</div>
}
<div className={mainContentClasses}>
<div className={_s.default}> <div className={_s.default}>
{children} {children}
</div> </div>

View File

@ -44,6 +44,7 @@ class ProfilePage extends ImmutablePureComponent {
account: ImmutablePropTypes.map, account: ImmutablePropTypes.map,
onFetchAccountByUsername: PropTypes.func.isRequired, onFetchAccountByUsername: PropTypes.func.isRequired,
unavailable: PropTypes.bool.isRequired, unavailable: PropTypes.bool.isRequired,
noSidebar: PropTypes.bool,
} }
componentDidMount() { componentDidMount() {
@ -55,6 +56,7 @@ class ProfilePage extends ImmutablePureComponent {
account, account,
children, children,
unavailable, unavailable,
noSidebar,
params: { username }, params: { username },
} = this.props } = this.props
@ -66,6 +68,7 @@ class ProfilePage extends ImmutablePureComponent {
account={account} account={account}
titleHTML={nameHTML} titleHTML={nameHTML}
unavailable={unavailable} unavailable={unavailable}
noSidebar={noSidebar}
> >
<PageTitle path={`${name} (@${username})`} /> <PageTitle path={`${name} (@${username})`} />
{ {