From 84dc21d55d8627182ce201baeddb6fbbdf8748c2 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Thu, 23 May 2019 20:01:10 +0200
Subject: Various improvements to single column layout (#10809)

- Add potential side panels to single column layout
- Hide FAB on large screens
---
 app/javascript/styles/mastodon/components.scss | 43 +++++++++++++++++++++++---
 1 file changed, 39 insertions(+), 4 deletions(-)

(limited to 'app/javascript/styles')

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 9acf0acfc..351a635bc 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1786,6 +1786,39 @@ a.account__display-name {
   &.unscrollable {
     overflow-x: hidden;
   }
+
+  &__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 {
@@ -1936,7 +1969,6 @@ a.account__display-name {
 .columns-area--mobile {
   flex-direction: column;
   width: 100%;
-  max-width: 600px;
   margin: 0 auto;
 
   .column,
@@ -1952,7 +1984,7 @@ a.account__display-name {
   }
 
   @media screen and (min-width: 360px) {
-    padding: 10px;
+    padding: 10px 0;
   }
 
   @media screen and (min-width: 630px) {
@@ -2013,8 +2045,7 @@ a.account__display-name {
   .tabs-bar {
     margin: 10px auto;
     margin-bottom: 0;
-    width: calc(100% - 20px);
-    max-width: 600px;
+    width: 100%;
   }
 
   .react-swipeable-view-container .columns-area--mobile {
@@ -5427,6 +5458,10 @@ noscript {
   &:active {
     background: lighten($ui-highlight-color, 7%);
   }
+
+  @media screen and (min-width: 630px) {
+    display: none;
+  }
 }
 
 .account__header__content {
-- 
cgit