Improve mobile UI (#875)

* make toolbar fit window on mobile

* don't prefetch /about

* improve /about page

* fix layout for /account and /snippets

* fix img on /about mobile

* unneeded change

components/Editor.js

@@ -375,30 +375,32 @@ class Editor extends React.Component {
             list={LANGUAGES}
             onChange={this.updateLanguage}
           />
-          <BackgroundSelect
-            onChange={this.updateBackground}
-            updateHighlights={this.updateHighlights}
-            mode={backgroundMode}
-            color={backgroundColor}
-            image={backgroundImage}
-            carbonRef={this.carbonNode.current}
-          />
-          <Settings
-            {...config}
-            onChange={this.updateSetting}
-            resetDefaultSettings={this.resetDefaultSettings}
-            format={this.format}
-            applyPreset={this.applyPreset}
-            getCarbonImage={this.getCarbonImage}
-          />
-          <div className="buttons">
-            <TweetButton onClick={this.upload} />
-            <ExportMenu
+          <div className="toolbar-second-row">
+            <BackgroundSelect
+              onChange={this.updateBackground}
+              updateHighlights={this.updateHighlights}
+              mode={backgroundMode}
+              color={backgroundColor}
+              image={backgroundImage}
+              carbonRef={this.carbonNode.current}
+            />
+            <Settings
+              {...config}
               onChange={this.updateSetting}
-              export={this.export}
-              exportSize={exportSize}
-              backgroundImage={backgroundImage}
+              resetDefaultSettings={this.resetDefaultSettings}
+              format={this.format}
+              applyPreset={this.applyPreset}
+              getCarbonImage={this.getCarbonImage}
             />
+            <div className="buttons">
+              <TweetButton onClick={this.upload} />
+              <ExportMenu
+                onChange={this.updateSetting}
+                export={this.export}
+                exportSize={exportSize}
+                backgroundImage={backgroundImage}
+              />
+            </div>
           </div>
         </Toolbar>
 
@@ -443,6 +445,14 @@ class Editor extends React.Component {
               display: flex;
               margin-left: auto;
             }
+            .toolbar-second-row {
+              height: 40px;
+              display: flex;
+              flex: 1;
+            }
+            .toolbar-second-row > :global(div:not(:last-of-type)) {
+              margin-right: 0.5rem;
+            }
           `}
         </style>
       </div>

components/ExportMenu.js

@@ -173,6 +173,7 @@ function ExportMenu({
           .export-menu-container {
             position: relative;
             color: ${COLORS.PURPLE};
+            flex: 1;
           }
 
           .flex {

components/Footer.js

@@ -5,7 +5,7 @@ import { COLORS } from '../lib/constants'
 const Footer = () => (
   <footer role="contentinfo" className="mt3">
     <nav className="mt3">
-      <Link href="/about">
+      <Link href="/about" prefetch={false}>
         <a className="link" href="/about">
           about
         </a>
@@ -43,6 +43,7 @@ const Footer = () => (
       {`
         footer {
           font-size: 14px;
+          text-align: center;
         }
 
         footer > div {
@@ -51,8 +52,7 @@ const Footer = () => (
         }
 
         nav {
-          display: flex;
-          align-items: center;
+          margin: 0 auto;
         }
 
         a {

components/Page.js

@@ -5,9 +5,15 @@ import Header from './Header'
 import Footer from './Footer'
 import Announcement from './Announcement'
 
+const COLUMN = `
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+`
 class Page extends React.Component {
   render() {
-    const { children, enableHeroText } = this.props
+    const { children, enableHeroText, flex } = this.props
     return (
       <main className="main mt4 mb4">
         <Meta />
@@ -22,11 +28,13 @@ class Page extends React.Component {
         <style jsx>
           {`
             .main {
-              display: flex;
-              justify-content: center;
-              flex-direction: column;
-              align-items: center;
-              min-width: 1080px; /* temporary fix for mobile overflow issue */
+              ${flex ? COLUMN : ''}
+            }
+            @media (min-width: 1024px) {
+              .main {
+                ${COLUMN};
+                min-width: 1080px; /* temporary fix for mobile overflow issue */
+              }
             }
           `}
         </style>

components/Toolbar.js

@@ -8,7 +8,7 @@ const Toolbar = props => (
         .toolbar {
           width: 100%;
           height: 40px;
-          margin-bottom: 16px;
+          margin-bottom: 1rem;
           display: flex;
           position: relative;
           z-index: 3;
@@ -22,6 +22,18 @@ const Toolbar = props => (
         .toolbar > :global(div):last-child {
           margin-right: 0px;
         }
+
+        @media (max-width: 768px) {
+          .toolbar {
+            max-width: 100%;
+            height: auto;
+            flex-direction: column;
+          }
+          .toolbar > :global(div:not(:last-of-type)) {
+            margin-right: 0;
+            margin-bottom: 1rem;
+          }
+        }
       `}
     </style>
   </div>

components/style/Reset.js

@@ -146,7 +146,6 @@ export default () => (
         font-style: normal;
         text-transform: initial;
         letter-spacing: initial;
-        /* min-width: 848px; */
         min-height: 704px;
       }
 

pages/about.js

@@ -112,6 +112,17 @@ export default () => (
         .about {
           font-size: 16px;
           max-width: 632px;
+          margin: 0 auto var(--x4);
+        }
+
+        @media (max-width: 768px) {
+          .about {
+            max-width: 90vw;
+          }
+        }
+
+        img {
+          max-width: 100%;
         }
 
         h2 {

pages/account.js

@@ -248,7 +248,7 @@ function Settings() {
 
 function SettingsPage() {
   return (
-    <Page>
+    <Page flex={true}>
       <MetaLinks />
       <Settings />
     </Page>

pages/snippets.js

@@ -240,7 +240,7 @@ function SnippetsPage() {
 }
 
 export default () => (
-  <Page enableHeroText={true}>
+  <Page enableHeroText={true} flex={true}>
     <MetaLinks />
     <SnippetsPage />
   </Page>