about summary refs log tree commit diff
path: root/app
diff options
context:
space:
mode:
authorOndřej Hruška <ondra@ondrovo.com>2017-07-22 20:41:21 +0200
committerOndřej Hruška <ondra@ondrovo.com>2017-07-22 20:41:21 +0200
commit9b74a120450ba4e27960c36753bec6217c07065b (patch)
treeed7830f1f83992c916e62578b915a5de7106512a /app
parent74a0cc6a119f64ff368945523260408323b364e8 (diff)
Adjust margins for mobile with navbar-under
Diffstat (limited to 'app')
-rw-r--r--app/javascript/mastodon/features/ui/index.js2
-rw-r--r--app/javascript/styles/components.scss36
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;
+  }
 }