diff --git a/app/javascript/flavours/glitch/components/column_header.js b/app/javascript/flavours/glitch/components/column_header.js
index 3a064e90ad..dd70d3c315 100644
--- a/app/javascript/flavours/glitch/components/column_header.js
+++ b/app/javascript/flavours/glitch/components/column_header.js
@@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
+import { createPortal } from 'react-dom';
import classNames from 'classnames';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
@@ -36,6 +37,7 @@ class ColumnHeader extends React.PureComponent {
onEnterCleaningMode: PropTypes.func,
children: PropTypes.node,
pinned: PropTypes.bool,
+ placeholder: PropTypes.bool,
onPin: PropTypes.func,
onMove: PropTypes.func,
onClick: PropTypes.func,
@@ -104,7 +106,7 @@ class ColumnHeader extends React.PureComponent {
}
render () {
- const { intl, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, notifCleaning, notifCleaningActive } = this.props;
+ const { intl, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, notifCleaning, notifCleaningActive, placeholder } = this.props;
const { collapsed, animating, animatingNCD } = this.state;
let title = this.props.title;
@@ -185,7 +187,7 @@ class ColumnHeader extends React.PureComponent {
const hasTitle = icon && title;
- return (
+ const component = (
{hasTitle && (
@@ -229,6 +231,12 @@ class ColumnHeader extends React.PureComponent {
);
+
+ if (multiColumn || placeholder) {
+ return component;
+ } else {
+ return createPortal(component, document.getElementById('tabs-bar__portal'));
+ }
}
}
diff --git a/app/javascript/flavours/glitch/features/status/index.js b/app/javascript/flavours/glitch/features/status/index.js
index dd17823ada..ba5025b197 100644
--- a/app/javascript/flavours/glitch/features/status/index.js
+++ b/app/javascript/flavours/glitch/features/status/index.js
@@ -155,6 +155,7 @@ class Status extends ImmutablePureComponent {
descendantsIds: ImmutablePropTypes.list,
intl: PropTypes.object.isRequired,
askReplyConfirmation: PropTypes.bool,
+ multiColumn: PropTypes.bool,
domain: PropTypes.string.isRequired,
};
@@ -497,13 +498,13 @@ class Status extends ImmutablePureComponent {
render () {
let ancestors, descendants;
const { setExpansion } = this;
- const { status, settings, ancestorsIds, descendantsIds, intl, domain } = this.props;
+ const { status, settings, ancestorsIds, descendantsIds, intl, domain, multiColumn } = this.props;
const { fullscreen, isExpanded } = this.state;
if (status === null) {
return (
-
+
);
@@ -537,6 +538,7 @@ class Status extends ImmutablePureComponent {
title={intl.formatMessage(messages.tootHeading)}
onClick={this.handleHeaderClick}
showBackButton
+ multiColumn={multiColumn}
extraButton={(
)}
diff --git a/app/javascript/flavours/glitch/features/ui/components/column_loading.js b/app/javascript/flavours/glitch/features/ui/components/column_loading.js
index ba2d0824ef..22c00c915d 100644
--- a/app/javascript/flavours/glitch/features/ui/components/column_loading.js
+++ b/app/javascript/flavours/glitch/features/ui/components/column_loading.js
@@ -21,7 +21,7 @@ export default class ColumnLoading extends ImmutablePureComponent {
let { title, icon } = this.props;
return (
-
+
);
diff --git a/app/javascript/flavours/glitch/features/ui/components/tabs_bar.js b/app/javascript/flavours/glitch/features/ui/components/tabs_bar.js
index 90e645a822..a674052151 100644
--- a/app/javascript/flavours/glitch/features/ui/components/tabs_bar.js
+++ b/app/javascript/flavours/glitch/features/ui/components/tabs_bar.js
@@ -73,9 +73,13 @@ class TabsBar extends React.PureComponent {
const { intl: { formatMessage } } = this.props;
return (
-
+
+
+
+
+
);
}
diff --git a/app/javascript/flavours/glitch/styles/basics.scss b/app/javascript/flavours/glitch/styles/basics.scss
index ed02118f05..77631097a7 100644
--- a/app/javascript/flavours/glitch/styles/basics.scss
+++ b/app/javascript/flavours/glitch/styles/basics.scss
@@ -38,7 +38,7 @@ body {
&.layout-single-column {
height: auto;
- min-height: 100%;
+ min-height: 100vh;
overflow-y: scroll;
}
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index 32f587ca0f..1ff4ac5544 100644
--- a/app/javascript/flavours/glitch/styles/components/columns.scss
+++ b/app/javascript/flavours/glitch/styles/components/columns.scss
@@ -52,6 +52,26 @@
}
}
+.tabs-bar__wrapper {
+ background: darken($ui-base-color, 8%);
+ position: sticky;
+ top: 0;
+ z-index: 2;
+ padding-top: 0;
+
+ @media screen and (min-width: $no-gap-breakpoint) {
+ padding-top: 10px;
+ }
+
+ .tabs-bar {
+ margin-bottom: 0;
+
+ @media screen and (min-width: $no-gap-breakpoint) {
+ margin-bottom: 10px;
+ }
+ }
+}
+
.react-swipeable-view-container {
&,
.columns-area,
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index 743abfd2ae..6f0d4c0bed 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -639,9 +639,6 @@
background: lighten($ui-base-color, 8%);
flex: 0 0 auto;
overflow-y: auto;
- position: sticky;
- top: 0;
- z-index: 3;
}
.tabs-bar__link {
diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss
index fd99ffaa21..edf705b5fd 100644
--- a/app/javascript/flavours/glitch/styles/components/single_column.scss
+++ b/app/javascript/flavours/glitch/styles/components/single_column.scss
@@ -137,6 +137,7 @@
@media screen and (min-width: $no-gap-breakpoint) {
padding: 10px 0;
+ padding-top: 0;
}
@media screen and (min-width: 630px) {
@@ -225,13 +226,11 @@
@media screen and (min-width: $no-gap-breakpoint) {
.tabs-bar {
- margin: 10px auto;
- margin-bottom: 0;
width: 100%;
}
.react-swipeable-view-container .columns-area--mobile {
- height: calc(100% - 20px) !important;
+ height: calc(100% - 10px) !important;
}
.getting-started__wrapper,