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.
This commit is contained in:
Jessica Stokes 2017-01-04 17:25:48 -08:00
parent 98b83aca37
commit 3807b0b171
No known key found for this signature in database
GPG Key ID: E3DE5BE038F70FE9
2 changed files with 24 additions and 6 deletions

View File

@ -3,9 +3,8 @@ import { FormattedMessage } from 'react-intl';
const outerStyle = { const outerStyle = {
background: '#373b4a', background: '#373b4a',
margin: '10px',
flex: '0 0 auto', flex: '0 0 auto',
marginBottom: '0' overflowY: 'auto'
}; };
const tabStyle = { const tabStyle = {

View File

@ -331,11 +331,15 @@
} }
.columns-area { .columns-area {
margin: 10px;
margin-left: 0;
flex-direction: row; flex-direction: row;
} }
@media screen and (min-width: 360px) {
.columns-area {
margin: 10px;
}
}
.column { .column {
width: 330px; width: 330px;
position: relative; position: relative;
@ -346,11 +350,20 @@
} }
.column, .drawer { .column, .drawer {
margin-left: 10px; margin-left: 5px;
margin-right: 5px;
flex: 0 0 auto; flex: 0 0 auto;
overflow: hidden; 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) { @media screen and (max-width: 1024px) {
.column, .drawer { .column, .drawer {
width: 100%; width: 100%;
@ -359,7 +372,6 @@
} }
.columns-area { .columns-area {
margin: 10px;
flex-direction: column; flex-direction: column;
} }
} }
@ -368,6 +380,13 @@
display: flex; display: flex;
} }
@media screen and (min-width: 360px) {
.tabs-bar {
margin: 10px;
margin-bottom: 0;
}
}
@media screen and (min-width: 1025px) { @media screen and (min-width: 1025px) {
.tabs-bar { .tabs-bar {
display: none; display: none;