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,6 +375,7 @@ class Editor extends React.Component {
             list={LANGUAGES}
             onChange={this.updateLanguage}
           />
+          <div className="toolbar-second-row">
             <BackgroundSelect
               onChange={this.updateBackground}
               updateHighlights={this.updateHighlights}
@@ -400,6 +401,7 @@ class Editor extends React.Component {
                 backgroundImage={backgroundImage}
               />
             </div>
+          </div>
         </Toolbar>
 
         <Dropzone accept="image/*, text/*, application/*" onDrop={this.onDrop}>
@@ -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;
+          margin: 0 auto;
-          align-items: center;
         }
 
         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,12 +28,14 @@ class Page extends React.Component {
         <style jsx>
           {`
             .main {
-              display: flex;
+              ${flex ? COLUMN : ''}
-              justify-content: center;
+            }
-              flex-direction: column;
+            @media (min-width: 1024px) {
-              align-items: center;
+              .main {
+                ${COLUMN};
                 min-width: 1080px; /* temporary fix for mobile overflow issue */
               }
+            }
           `}
         </style>
       </main>

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>