diff options
| -rw-r--r-- | app/javascript/mastodon/features/ui/index.js | 2 | ||||
| -rw-r--r-- | app/javascript/styles/components.scss | 36 |
2 files changed, 38 insertions, 0 deletions
diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index bda32781c..eb499c836 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -145,6 +145,7 @@ export default class UI extends React.PureComponent { if (nextProps.isComposing !== this.props.isComposing) { // Avoid expensive update just to toggle a class this.node.classList.toggle('is-composing', nextProps.isComposing); + this.node.classList.toggle('navbar-under', nextProps.navbarUnder); return false; } @@ -185,6 +186,7 @@ export default class UI extends React.PureComponent { const className = classNames('ui', columnsClass(layout), { 'wide': isWide, 'system-font': this.props.systemFontUi, + 'navbar-under': navbarUnder, }); return ( diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index d67e2ca69..43df263d5 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -4227,4 +4227,40 @@ noscript { } } } + + // fixes for the navbar-under mode + .is-composing.navbar-under { + .search { + margin-top: -20px; + margin-bottom: -20px; + .search__icon { + display: none; + } + } + } +} + +// more fixes for the navbar-under mode +@mixin fix-margins-for-navbar-under { + .tabs-bar { + margin-top: 0 !important; + margin-bottom: -6px !important; + } +} + +.single-column.navbar-under { + @include fix-margins-for-navbar-under; +} + +.auto-columns.navbar-under { + @media screen and (max-width: 360px) { + @include fix-margins-for-navbar-under; + } +} + +.auto-columns.navbar-under .react-swipeable-view-container .columns-area, +.single-column.navbar-under .react-swipeable-view-container .columns-area { + @media screen and (max-width: 360px) { + height: 100% !important; + } } |