Merge pull request #393 from ticky/qol-for-four-inch-phones

Improve experience on 4-inch phones

app/assets/javascripts/components/features/compose/components/navigation_bar.jsx

@@ -16,7 +16,7 @@ const NavigationBar = React.createClass({
 
   render () {
     return (
-      <div style={{ padding: '10px', display: 'flex', cursor: 'default' }}>
+      <div style={{ padding: '10px', display: 'flex', flexShrink: '0', cursor: 'default' }}>
         <Permalink href={this.props.account.get('url')} to={`/accounts/${this.props.account.get('id')}`} style={{ textDecoration: 'none' }}><Avatar src={this.props.account.get('avatar')} size={40} /></Permalink>
 
         <div style={{ flex: '1 1 auto', marginLeft: '8px', color: '#9baec8' }}>

app/assets/javascripts/components/features/getting_started/index.jsx

@@ -43,13 +43,11 @@ const GettingStarted = ({ intl, me }) => {
         {followRequests}
       </div>
 
-      <div className='static-content'>
+      <div className='static-content getting-started'>
         <p><FormattedMessage id='getting_started.about_addressing' defaultMessage='You can follow people if you know their username and the domain they are on by entering an e-mail-esque address into the form at the top of the sidebar.' /></p>
         <p><FormattedMessage id='getting_started.about_shortcuts' defaultMessage='If the target user is on the same domain as you, just the username will work. The same rule applies to mentioning people in statuses.' /></p>
         <p><FormattedMessage id='getting_started.about_developer' defaultMessage='The developer of this project can be followed as Gargron@mastodon.social' /></p>
       </div>
-
-      <div className='getting-started__illustration' />
     </Column>
   );
 };

app/assets/javascripts/components/features/ui/components/tabs_bar.jsx

@@ -3,15 +3,14 @@ import { FormattedMessage } from 'react-intl';
 
 const outerStyle = {
   background: '#373b4a',
-  margin: '10px',
   flex: '0 0 auto',
-  marginBottom: '0'
+  overflowY: 'auto'
 };
 
 const tabStyle = {
   display: 'block',
   flex: '1 1 auto',
-  padding: '10px',
+  padding: '10px 5px',
   color: '#fff',
   textDecoration: 'none',
   textAlign: 'center',

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;
@@ -589,12 +608,8 @@
   }
 }
 
-.getting-started__illustration {
+.getting-started {
-  width: 330px;
+  overflow-y: auto;
-  height: 235px;
+  padding-bottom: 235px;
-  background: image-url('mastodon-getting-started.png') no-repeat 0 0;
+  background: image-url('mastodon-getting-started.png') no-repeat 0 100% local;
-  position: absolute;
-  pointer-events: none;
-  bottom: 0;
-  left: 0;
 }