This commit is contained in:
mgabdev
2020-05-08 22:17:19 -04:00
parent a390662e4f
commit b620cb1372
38 changed files with 734 additions and 277 deletions

View File

@@ -1,8 +1,14 @@
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
import Sticky from 'react-stickynode'
import { BREAKPOINT_EXTRA_SMALL } from '../constants'
import Layout from './layout'
import GroupInfoPanel from '../components/panel/group_info_panel'
import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
import GroupSidebarPanel from '../components/panel/groups_panel'
import LinkFooter from '../components/link_footer'
import GroupHeader from '../components/group_header'
import Responsive from '../features/ui/util/responsive_component';
export default class GroupLayout extends ImmutablePureComponent {
@@ -25,6 +31,7 @@ export default class GroupLayout extends ImmutablePureComponent {
relationships,
showBackBtn,
title,
noComposeButton,
} = this.props
return (
@@ -33,28 +40,47 @@ export default class GroupLayout extends ImmutablePureComponent {
actions={actions}
showBackBtn={showBackBtn}
title={title}
noComposeButton
>
<div className={[_s.default, _s.width100PC, _s.pl15].join(' ')}>
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
<div className={[_s.default, _s.width100PC].join(' ')}>
<GroupHeader group={group} relationships={relationships} />
<GroupHeader group={group} relationships={relationships}>
<GroupInfoPanel group={group} noPanel />
</GroupHeader>
<div className={[_s.default, _s.flexRow, _s.width100PC, _s.justifyContentEnd].join(' ')}>
<div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
<div className={_s.default}>
{children}
<div className={[_s.default, _s.width100PC, _s.z1].join(' ')}>
{children}
</div>
</div>
</Responsive>
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
<div className={[_s.default, _s.width100PC, _s.pl15].join(' ')}>
<GroupHeader group={group} relationships={relationships} />
<div className={[_s.default, _s.flexRow, _s.width100PC, _s.justifyContentEnd].join(' ')}>
<div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
<div className={_s.default}>
{children}
</div>
</div>
<div className={[_s.default, _s.ml15, _s.width340PX].join(' ')}>
<Sticky top={73} enabled>
<div className={[_s.default, _s.width340PX].join(' ')}>
<GroupInfoPanel group={group} />
<WhoToFollowPanel />
<GroupSidebarPanel isSlim />
<LinkFooter />
</div>
</Sticky>
</div>
</div>
<div className={[_s.default, _s.ml15, _s.width340PX].join(' ')}>
<Sticky top={73} enabled>
<div className={[_s.default, _s.width340PX].join(' ')}>
{layout}
</div>
</Sticky>
</div>
</div>
</div>
</Responsive>
</Layout>
)
}