diff options
3 files changed, 56 insertions, 14 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 5e680a61c..d3d8aebd1 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 @@ export default 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 ( diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 50438393e..f372a4830 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -11,6 +11,39 @@ justify-content: flex-start; overflow-x: auto; position: relative; + + &__panels { + display: flex; + justify-content: center; + width: 100%; + height: 100%; + + &__pane { + flex: 1 1 auto; + height: 100%; + overflow: hidden; + pointer-events: none; + display: flex; + justify-content: flex-end; + + &__inner { + pointer-events: auto; + height: 100%; + } + } + + &__main { + box-sizing: border-box; + width: 100%; + max-width: 600px; + display: flex; + flex-direction: column; + + @media screen and (min-width: 360px) { + padding: 0 10px; + } + } + } } .react-swipeable-view-container { @@ -496,4 +529,8 @@ &:active { background: lighten($ui-highlight-color, 7%); } + + @media screen and (min-width: 630px) { + display: none; + } } diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 8f385e15a..53b678c9a 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -608,7 +608,6 @@ .columns-area--mobile { flex-direction: column; width: 100%; - max-width: 600px; margin: 0 auto; .column, @@ -624,7 +623,7 @@ } @media screen and (min-width: 360px) { - padding: 10px; + padding: 10px 0; } @media screen and (min-width: 630px) { @@ -685,8 +684,7 @@ .tabs-bar { margin: 10px auto; margin-bottom: 0; - width: calc(100% - 20px); - max-width: 600px; + width: 100%; } .react-swipeable-view-container .columns-area--mobile { |