Mobile styles and layout, refactoring

website/src/images/check.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="15px" height="12px" viewBox="0 0 15 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="noun_93131_cc" sketch:type="MSLayerGroup" fill="#000000">
+            <g id="Group" transform="translate(7.451000, 5.800000) scale(-1, -1) translate(-7.451000, -5.800000) translate(0.451000, 0.300000)" sketch:type="MSShapeGroup">
+                <path d="M8.362,0.8 L13.3117,5.7499 L11.8976,7.164 L8.362,3.6285 L2.0172,10.0116 L0.5839,8.5783 L8.362,0.8 Z" id="Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>

website/themes/uppy/layout/partials/main_menu.ejs

@@ -7,7 +7,3 @@
 <li><a href="/api/" class="nav-link<%- page.path.match(/api/) ? ' current' : '' %>">API</a></li>
 <li><a href="/examples/cdn/" class="nav-link<%- page.path.match(/examples/) ? ' current' : '' %>">Examples</a></li>
 <li><a href="https://github.com/transloadit/uppy" class="nav-link">Github</a></li>
-<!--
-<li><a href="/blog/" class="nav-link<%- page.path.match(/blog/) ? ' current' : '' %>">Blog</a></li>
-<%- partial('partials/community_dropdown') %>
--->

website/themes/uppy/layout/partials/sidebar.ejs

@@ -1,4 +1,4 @@
-<div class="sidebar">
+<div class="Sidebar js-sidebar">
   <ul class="main-menu">
     <%- partial('partials/main_menu') %>
   </ul>
@@ -13,7 +13,7 @@
         </li>
       <% }) %>
     </ul>
-    <div id="buildbadge" class="BuildBadge">
+    <div class="BuildBadge">
       <span class="wrapper" style="width: 110px">
         <a href="https://travis-ci.org/transloadit/uppy"><img src="https://travis-ci.org/transloadit/uppy.svg" alt="Build Status"></a>
       </span>

website/themes/uppy/source/css/_common.scss

@@ -1,7 +1,3 @@
-@mixin zoom() {
-  transform: scale(1.05);
-}
-
 html { box-sizing: border-box; }
 *, *:after, *:before { box-sizing: inherit; }
 
@@ -21,11 +17,6 @@ body {
   }
 }
 
-.page {
-  background-color: $color-white;
-  min-height: 100vh;
-}
-
 a {
   text-decoration: none;
   color: $color-medium;
@@ -60,8 +51,6 @@ code {
 
 em { color: $color-light; }
 
-// p { word-spacing: 0.05em; }
-
 a.button {
   display: inline-block;
   font-family: $fontFamily-code;
@@ -128,6 +117,11 @@ a.button {
   &.css .code:after { content: 'CSS'; }
 }
 
+.page {
+  background-color: $color-white;
+  min-height: 100vh;
+}
+
 .page-index .BuildBadge { margin-left: -2px !important; }
 .page-inner .BuildBadge { margin-top: 15px; }
 
@@ -151,7 +145,7 @@ a.button {
 
   .page-inner .MainHeader {
     display: none;
-    @media #{$screen-large} {
+    @media #{$screen-medium} {
       display: block;
     }
   }

website/themes/uppy/source/css/_index.scss

@@ -2,7 +2,7 @@
   text-align: center;
 
   li {
-    display: inline-block;;
+    display: inline-block;
     position: relative;
     line-height: 40px;
 
@@ -102,7 +102,11 @@
 .IndexExample {
   text-align: center;
   max-width: 1200px;
-  margin: 0 auto 3em;
+  margin: 0 1em 3em;
+
+  @media #{$screen-medium} {
+    margin: 0 auto 3em;
+  }
 
   code, pre {
     padding: 0;
@@ -140,7 +144,7 @@
 .IndexExample-block {
   padding: 7px;
   text-align: left;
-  height: 250px;
+
   background-color: $color-codebg;
   border-radius: $size-radius;
   overflow-x: scroll;
@@ -149,18 +153,23 @@
     width: 43%;
     display: inline-block;
     vertical-align: middle;
+    height: 250px;
   }
 }
 
 .IndexDesignGoals {
-  padding: 4em 0;
+  padding: 4em 1em;
   background-color: $color-primary;
   color: $color-white;
   overflow: hidden;
 
+  @media #{$screen-medium} {
+    padding: 4em 0;
+  }
+
   h2 {
     margin-top: 0;
-    color: #fff;
+    color: $color-white;
     font-size: 1.5em;
     text-align: center;
   }
@@ -168,31 +177,42 @@
   ul {
     line-height: 1.8em;
     font-size: 1.15em;
-    width: 640px;
+    max-width: 640px;
     margin: 0 auto;
     padding: 0;
     list-style-type: none;
   }
 
-  li:before {
-    content: '';
-    display: inline-block;
-    width: 24px;
-    height: 24px;
-    background: url('../images/check.png') center center no-repeat;
+  li {
+    background: svg('check.svg', '[fill]: #{$color-white}') left 5px no-repeat;
     background-size: 24px 24px;
-    margin-right: 10px;
-    position: relative;
-    top: 4px;
+    padding-left: 40px;
+    margin-bottom: 0.5em;
   }
+
+  // li:before {
+  //   content: '';
+  //   display: inline-block;
+  //   width: 24px;
+  //   height: 24px;
+  //   background: svg('check.svg', '[fill]: #{$color-white}') center center no-repeat;
+  //   background-size: 24px 24px;
+  //   margin-right: 10px;
+  //   position: relative;
+  //   top: 4px;
+  // }
 }
 
 .IndexFooter {
   text-align: center;
   color: $color-white;
-  padding: 4em 0;
+  padding: 4em 1em;
   background-color: darken($color-primary, 15%);
 
+  @media #{$screen-medium} {
+    padding: 4em 0;
+  }
+
   a {
     color: $color-white;
     text-decoration: underline;
@@ -201,98 +221,84 @@
   p { margin: .3em 0; }
 }
 
-@media screen and (max-width: 480px) {
-
-  // #nav {
-  //   margin: 2em 1.8em 0;
-  // }
-
-  // .nav-link {
-  //   font-size: .85em;
-  //   margin: 0 .5em;
-  // }
-
-  // .divider {
-  //   font-size: 1.2em;
-  //   margin: 2.5em 1em;
-  // }
-
-  #hero {
-    .inner h1 {
-      font-size: 2em;
-      font-weight: 400;
-    }
-
-    .buttons {
-      max-width: 300px;
-      margin: 1em auto;
-    }
-
-    a.button {
-      width: 260px;
-      font-size: .8em;
-      margin: .5em 0;
-    }
-
-    .desc {
-      max-width: 300px;
-    }
-
-    .warning, .desc {
-      font-size: .85em;
-      margin: 1em auto;
-      br { display: none; }
-    }
-
-    // .down { display: none; }
-  }
-
-  #social {
-    max-width: 340px;
-    margin: 1.2em auto;
-  }
-
-  .cool { margin-top: 0; }
-
-  #features .feat {
-    font-size: 14px;
-    margin: .8em 0;
-    width: 250px;
-  }
-
-  #design_goals {
-    ul {
-      width: 280px;
-      font-size: 1.1em;
-    }
-
-    h2 {
-      font-size: 1.4em;
-    }
-  }
-}
-
-@media screen and (max-width: 860px) {
-  #features, #hero {
-    font-size: 16px;
-  }
-
-  #example {
-    .block {
-      display: block;
-      width: auto;
-      height: auto;
-    }
-  }
-
-  #demo {
-    padding: 5px 20px 20px;
-  }
-
-  .sign {
-    display: block;
-    height: 1em;
-    line-height: 1em;
-    padding: .5em 0;
-  }
-}
+// @media screen and (max-width: 480px) {
+//
+//   #hero {
+//     .inner h1 {
+//       font-size: 2em;
+//       font-weight: 400;
+//     }
+//
+//     .buttons {
+//       max-width: 300px;
+//       margin: 1em auto;
+//     }
+//
+//     a.button {
+//       width: 260px;
+//       font-size: .8em;
+//       margin: .5em 0;
+//     }
+//
+//     .desc {
+//       max-width: 300px;
+//     }
+//
+//     .warning, .desc {
+//       font-size: .85em;
+//       margin: 1em auto;
+//       br { display: none; }
+//     }
+//
+//     // .down { display: none; }
+//   }
+//
+//   #social {
+//     max-width: 340px;
+//     margin: 1.2em auto;
+//   }
+//
+//   .cool { margin-top: 0; }
+//
+//   #features .feat {
+//     font-size: 14px;
+//     margin: .8em 0;
+//     width: 250px;
+//   }
+//
+//   #design_goals {
+//     ul {
+//       width: 280px;
+//       font-size: 1.1em;
+//     }
+//
+//     h2 {
+//       font-size: 1.4em;
+//     }
+//   }
+// }
+//
+// @media screen and (max-width: 860px) {
+//   #features, #hero {
+//     font-size: 16px;
+//   }
+//
+//   #example {
+//     .block {
+//       display: block;
+//       width: auto;
+//       height: auto;
+//     }
+//   }
+//
+//   #demo {
+//     padding: 5px 20px 20px;
+//   }
+//
+//   .sign {
+//     display: block;
+//     height: 1em;
+//     line-height: 1em;
+//     padding: .5em 0;
+//   }
+// }

website/themes/uppy/source/css/_mixins.scss

@@ -0,0 +1,3 @@
+@mixin zoom() {
+  transform: scale(1.05);
+}

website/themes/uppy/source/css/_page.scss

@@ -1,8 +1,12 @@
 .page-inner #main {
   position: relative;
   z-index: 1;
-  // padding: 0 60px 30px;
   overflow-x: hidden;
+  padding: 2em 1.4em 0;
+
+  @media #{$screen-medium} {
+    padding: 0 60px 30px;
+  }
 }
 
 .page-inner #nav {
@@ -12,8 +16,6 @@
   height: $size-headerHeight;
   line-height: $size-headerHeight;
 
-  // .break { display: none; }
-
   li {
     display: inline-block;
     position: relative;
@@ -35,9 +37,18 @@
   border-radius: 15px;
   margin-right: 10px;
   transition: border-color .2s ease;
-  background: svg('search.svg', '[fill]: #{$color-lightgray}') 8px 6px no-repeat;
+  background: svg('search.svg', '[fill]: #{$color-gray}') 8px 5px no-repeat;
   background-size: 18px;
+  margin-bottom: 10px;
+
   &:focus { border-color: $color-primary; }
+
+  @media #{$screen-medium} {
+    width: auto;
+    width: 200px;
+    margin-bottom: 0;
+  }
+
 }
 
 .MainLogo {
@@ -70,7 +81,7 @@
   z-index: 9;
   box-shadow: 0 0 4px rgba(0,0,0,.25);
 
-  @media #{$screen-large} {
+  @media #{$screen-medium} {
     display: none;
   }
 
@@ -83,7 +94,7 @@
     top: 8px;
     left: 12px;
     background: svg('burger.svg', '[fill]: #{$color-gray}') center center no-repeat;
-    background-size: 24px;
+    background-size: 22px;
   }
 
   .logo {
@@ -97,21 +108,46 @@
   }
 }
 
-.sidebar {
-  position: absolute;
-  z-index: 10;
+.Sidebar {
+  position: fixed;
+  background-color: #f9f9f9;
+  height: 100%;
   top: 0;
-  left: 60px;
-  bottom: 0;
-  padding: 2.2em 0;
-  width: 260px;
-  margin-right: 20px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  -ms-overflow-style: none;
-  &::-webkit-scrollbar { width: 0 !important; }
-  h2 { margin-top: .2em; }
+  left: 0;
+  padding: 60px 30px 20px;
+  box-shadow: 0 0 10px rgba(0,0,0,.2);
+  transition: all .4s cubic-bezier(0.4, 0, 0, 1);
+  transform: translate(-280px, 0);
+  z-index: 10;
+
+  .main-menu {
+    margin-bottom: 20px;
+    display: block;
+    padding-left: 0;
+  }
+
+  &.open { transform: translate(0, 0); }
+
+  @media #{$screen-medium} {
+    position: absolute;
+    top: 0;
+    left: 60px;
+    bottom: 0;
+    padding: 2.2em 0;
+    width: 260px;
+    margin-right: 20px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: none;
+    transform: none;
+    background-color: transparent;
+    box-shadow: none;
+
+    .main-menu { display: none; }
+    &::-webkit-scrollbar { width: 0 !important; }
+    h2 { margin-top: .2em; }
+  }
 
   ul {
     list-style-type: none;
@@ -120,11 +156,6 @@
     padding-left: 1em;
   }
 
-  .version-select {
-    vertical-align: middle;
-    margin-left: 5px;
-  }
-
   .menu-root {
     padding-left: 0;
   }
@@ -164,12 +195,6 @@
     font-weight: bold;
     color: $color-primary;
   }
-
-  .main-menu {
-    margin-bottom: 20px;
-    display: none;
-    padding-left: 0;
-  }
 }
 
 .content {
@@ -177,6 +202,12 @@
   max-width: 600px;
   margin: 0 auto;
 
+  @media #{$screen-medium} {
+    &.with-sidebar {
+      margin-left: 280px;
+    }
+  }
+
   &.api {
     ul {
       padding-left: 1.25em;
@@ -215,6 +246,17 @@
     margin: 2em 0 .8em;
     padding-bottom: .7em;
     border-bottom: 1px solid $color-border;
+    position: relative;
+
+    &:before {
+      content: "#";
+      color: $color-primary;
+      position: absolute;
+      left: -0.7em;
+      top: -4px;
+      font-size: 1.2em;
+      font-weight: bold;
+    }
   }
 
   h3 {
@@ -300,74 +342,3 @@
   border-top: 1px solid #e5e5e5;
   font-size: .9em;
 }
-
-@media screen and (min-width: 720px) {
-  #main.fix-sidebar .sidebar {
-    position: fixed;
-  }
-}
-
-@media screen and (max-width: 1200px) {
-  .content.with-sidebar {
-    margin-left: 280px;
-  }
-}
-
-// @media screen and (max-width: 560px) {
-//   #downloads {
-//     text-align: center;
-//     margin-bottom: 25px;
-//
-//     .info {
-//       margin-top: 5px;
-//       margin-left: 0;
-//     }
-//   }
-//
-//   iframe { margin: 0 !important; }
-// }
-
-@media screen and (max-width: 860px) {
-  .nav-link {
-    padding-bottom: 1px;
-    &:hover, &.current {
-      border-bottom: 2px solid $color-primary;
-    }
-  }
-
-  #search-query {
-    width: 200px;
-    margin-bottom: 10px;
-  }
-
-  #main {
-    padding: 2em 1.4em 0;
-  }
-
-  .highlight pre {
-    padding: 1.2em 1em;
-  }
-
-  .sidebar {
-    position: fixed;
-    background-color: #f9f9f9;
-    height: 100%;
-    top: 0;
-    left: 0;
-    padding: 60px 30px 20px;
-    box-shadow: 0 0 10px rgba(0,0,0,.2);
-    transition: all .4s cubic-bezier(0.4, 0, 0, 1);
-    transform: translate(-280px, 0);
-
-    .main-menu { display: block; }
-
-    &.open { transform: translate(0, 0); }
-  }
-
-  .content.with-sidebar { margin-left: 0; }
-
-  .footer {
-    margin-left: 0;
-    text-align: center;
-  }
-}

website/themes/uppy/source/css/_settings.scss

@@ -39,5 +39,5 @@ $size-headerHeight: 40px;
 // Media queries
 
 // small screen
-$screen-medium: 'only screen and (min-width: 769px)';
-$screen-large: 'only screen and (min-width: 860px)';
+$screen-medium: 'only screen and (min-width: 1024px)';
+// $screen-large: 'only screen and (min-width: 860px)';

website/themes/uppy/source/css/main.scss

@@ -1,4 +1,5 @@
 @import '_settings.scss';
+@import '_mixins.scss';
 @import '_syntax.scss';
 @import '_common.scss';
 @import '_index.scss';

website/themes/uppy/source/js/common.js

@@ -5,7 +5,7 @@
   var doc = document.documentElement
   var body = document.body
   var header = document.getElementById('header')
-  var menu = document.querySelector('.sidebar')
+  var menu = document.querySelector('.js-sidebar')
   var content = document.querySelector('.content')
   var mobileBar = document.getElementById('mobile-bar')