From 84dc21d55d8627182ce201baeddb6fbbdf8748c2 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 23 May 2019 20:01:10 +0200 Subject: [PATCH] Various improvements to single column layout (#10809) - Add potential side panels to single column layout - Hide FAB on large screens --- .../features/ui/components/columns_area.js | 27 +++++++----- .../styles/mastodon/components.scss | 43 +++++++++++++++++-- 2 files changed, 56 insertions(+), 14 deletions(-) diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js index 47cea3e3a8..ae07b89075 100644 --- a/app/javascript/mastodon/features/ui/components/columns_area.js +++ b/app/javascript/mastodon/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 : ; - return columnIndex !== -1 ? [ - , - + const content = columnIndex !== -1 ? ( {links.map(this.renderView)} - , + + ) : ( +
{children}
+ ); - floatingActionButton, - ] : [ - , + return ( +
+
-
{children}
, +
+ + {content} +
- floatingActionButton, - ]; +
+ + {floatingActionButton} +
+ ); } return ( diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 9acf0acfc2..351a635bcb 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 {