about summary refs log tree commit diff
path: root/app/javascript/flavours/glitch/features/ui
diff options
context:
space:
mode:
authorEugen Rochko <eugen@zeonfederated.com>2019-05-23 20:01:10 +0200
committerThibG <thib@sitedethib.com>2019-06-13 22:15:31 +0200
commit0bd9f23e6d2599a3d3930b6456024a4e3c9a3535 (patch)
tree5afc1b1101f86a0aec709fb4f361b3e419427fa1 /app/javascript/flavours/glitch/features/ui
parent610b4b44c4f70583f2f3082dc8f494fadb0681ef (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')
-rw-r--r--app/javascript/flavours/glitch/features/ui/components/columns_area.js27
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 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 (