about summary refs log tree commit diff
diff options
context:
space:
mode:
authorJessica Stokes <hello@jessicastokes.net>2017-01-04 17:25:48 -0800
committerJessica Stokes <hello@jessicastokes.net>2017-01-04 17:29:09 -0800
commit3807b0b171d588ccccfc6210c823e5ce87b9b90f (patch)
treeac9e7a20551f1bb8760c8fb3815bcb6dc6bf21ae
parent98b83aca372fabdfc32b05c1eb72c80a79102e53 (diff)
Improve quality of life for 4-inch phones
Removes extra UI margins < 360px, and allows the tab bar to scroll. Also slightly improves horizontal scrolling behaviour on desktop.
-rw-r--r--app/assets/javascripts/components/features/ui/components/tabs_bar.jsx3
-rw-r--r--app/assets/stylesheets/components.scss27
2 files changed, 24 insertions, 6 deletions
diff --git a/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx b/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx
index 219979522..499c9e287 100644
--- a/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx
+++ b/app/assets/javascripts/components/features/ui/components/tabs_bar.jsx
@@ -3,9 +3,8 @@ import { FormattedMessage } from 'react-intl';
 
 const outerStyle = {
   background: '#373b4a',
-  margin: '10px',
   flex: '0 0 auto',
-  marginBottom: '0'
+  overflowY: 'auto'
 };
 
 const tabStyle = {
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index acfa85c6b..2996fa92e 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -331,11 +331,15 @@
 }
 
 .columns-area {
-  margin: 10px;
-  margin-left: 0;
   flex-direction: row;
 }
 
+@media screen and (min-width: 360px) {
+  .columns-area {
+    margin: 10px;
+  }
+}
+
 .column {
   width: 330px;
   position: relative;
@@ -346,11 +350,20 @@
 }
 
 .column, .drawer {
-  margin-left: 10px;
+  margin-left: 5px;
+  margin-right: 5px;
   flex: 0 0 auto;
   overflow: hidden;
 }
 
+.column:first-child, .drawer:first-child {
+  margin-left: 0;
+}
+
+.column:last-child, .drawer:last-child {
+  margin-right: 0;
+}
+
 @media screen and (max-width: 1024px) {
   .column, .drawer {
     width: 100%;
@@ -359,7 +372,6 @@
   }
 
   .columns-area {
-    margin: 10px;
     flex-direction: column;
   }
 }
@@ -368,6 +380,13 @@
   display: flex;
 }
 
+@media screen and (min-width: 360px) {
+  .tabs-bar {
+    margin: 10px;
+    margin-bottom: 0;
+  }
+}
+
 @media screen and (min-width: 1025px) {
   .tabs-bar {
     display: none;