diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2019-05-23 20:01:10 +0200 |
---|---|---|
committer | multiple creatures <dev@multiple-creature.party> | 2020-02-22 01:22:00 -0600 |
commit | e745bd64e7aca52ca7ba96e412aaacb2fbf22ee4 (patch) | |
tree | dc55ed019c6faed6127d9a1479b2b844afed9f3c /app/javascript/flavours/glitch/features/ui/components/columns_area.js | |
parent | 687fa7b9edd6a8b46eb6f12d7db8abde76e1eaf2 (diff) |
[Glitch] Various improvements to single column layout
Port 84dc21d55d8627182ce201baeddb6fbbdf8748c2 to glitch-soc Signed-off-by: Thibaut Girka <thib@sitedethib.com>
Diffstat (limited to 'app/javascript/flavours/glitch/features/ui/components/columns_area.js')
-rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/columns_area.js | 27 |
1 files changed, 17 insertions, 10 deletions
diff --git a/app/javascript/flavours/glitch/features/ui/components/columns_area.js b/app/javascript/flavours/glitch/features/ui/components/columns_area.js index b8bb330f2..b87cb122b 100644 --- a/app/javascript/flavours/glitch/features/ui/components/columns_area.js +++ b/app/javascript/flavours/glitch/features/ui/components/columns_area.js @@ -163,21 +163,28 @@ class ColumnsArea extends ImmutablePureComponent { if (singleColumn) { const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <Link key='floating-action-button' to='/statuses/new' className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}><i className='fa fa-pencil' /></Link>; - return columnIndex !== -1 ? [ - <TabsBar key='tabs' />, - + const content = columnIndex !== -1 ? ( <ReactSwipeableViews key='content' index={columnIndex} onChangeIndex={this.handleSwipe} onTransitionEnd={this.handleAnimationEnd} animateTransitions={shouldAnimate} springConfig={{ duration: '400ms', delay: '0s', easeFunction: 'ease' }} style={{ height: '100%' }} disabled={!swipeToChangeColumns}> {links.map(this.renderView)} - </ReactSwipeableViews>, + </ReactSwipeableViews> + ) : ( + <div key='content' className='columns-area columns-area--mobile'>{children}</div> + ); + + return ( + <div className='columns-area__panels'> + <div className='columns-area__panels__pane' /> - floatingActionButton, - ] : [ - <TabsBar key='tabs' />, + <div className='columns-area__panels__main'> + <TabsBar key='tabs' /> + {content} + </div> - <div key='content' className='columns-area columns-area--mobile'>{children}</div>, + <div className='columns-area__panels__pane' /> - floatingActionButton, - ]; + {floatingActionButton} + </div> + ); } return ( |