[Glitch] Various improvements to single column layout

Port 84dc21d55d to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>

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 ? [
+      const content = columnIndex !== -1 ? (
-        <TabsBar key='tabs' />,
-
         <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>
+      );
 
-        floatingActionButton,
+      return (
-      ] : [
+        <div className='columns-area__panels'>
-        <TabsBar key='tabs' />,
+          <div className='columns-area__panels__pane' />
 
-        <div key='content' className='columns-area columns-area--mobile'>{children}</div>,
+          <div className='columns-area__panels__main'>
+            <TabsBar key='tabs' />
+            {content}
+          </div>
 
-        floatingActionButton,
+          <div className='columns-area__panels__pane' />
-      ];
+
+          {floatingActionButton}
+        </div>
+      );
     }
 
     return (

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;
+  }
 }

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);
+    width: 100%;
-    max-width: 600px;
   }
 
   .react-swipeable-view-container .columns-area--mobile {