Inicio Explorar Ayuda
Iniciar sesión
biheng
/
uppy
1
0
Fork 0
Archivos Incidencias 0 Pull Requests 0 Wiki
Explorar el Código

Refactoring, improvements and cleanup

Artur Paikin hace 9 años
padre
15298c1a80
commit
5a704af196
Se han modificado 10 ficheros con 189 adiciones y 176 borrados
Dividir vista Mostrar estadísticas de diff
  1. 0 12
      website/documentation.js
  2. 1 1
      website/themes/uppy/layout/example.ejs
  3. 0 2
      website/themes/uppy/layout/index.ejs
  4. 5 8
      website/themes/uppy/layout/layout.ejs
  5. 1 1
      website/themes/uppy/layout/page.ejs
  6. 3 2
      website/themes/uppy/layout/partials/main_menu.ejs
  7. 1 1
      website/themes/uppy/layout/partials/sidebar.ejs
  8. 134 17
      website/themes/uppy/source/css/_common.scss
  9. 16 120
      website/themes/uppy/source/css/_page.scss
  10. 28 12
      website/themes/uppy/source/js/common.js

+ 0 - 12
website/documentation.js
Ver fichero 

@@ -21,15 +21,3 @@ documentation('../src/index.js', {order: docOrder}, function (err, comments) {
 
     console.info(chalk.green('✓ documentation generated'));
 
   });
 
 });
 
-
 
-// var remark = require('remark');
 
-// var inputMarkdownContent = fs.readFileSync('src/api/docs.md', 'utf-8');
 
-// var docjsReadme = require('documentation-readme/lib/plugin');
 
-// remark().use(docjsReadme, {
 
-//  section: 'Uppy Core & Plugins', // inject into the ## Usage section of the input doc
 
-//  documentationArgs: [ '../src/index.js' ]
 
-// }).process(inputMarkdownContent, function (err, vfile, content) {
 
-// fs.writeFileSync('src/api/docs.md', content);
 
-//  // console.log(content);
 
-//  console.log('documentation generated');
 
-// });

+ 1 - 1
website/themes/uppy/layout/example.ejs
Ver fichero 

@@ -1,5 +1,5 @@
 
 <%- partial('partials/sidebar', { type: page.type, index: page.index }) %>
 
-<div class="content <%- page.type ? page.type + ' with-sidebar' : '' %>">
 
+<div class="Content js-Content <%- page.type ? page.type + ' with-sidebar' : '' %>">
 
   <h1><%- page.title %> Example</h1>
 
 
   <!--

+ 0 - 2
website/themes/uppy/layout/index.ejs
Ver fichero 

@@ -21,8 +21,6 @@
 
     <p class="IndexHero-descSecondary"><%- config.description_secondary %></p>
 
 
   </header>
 
-
 
-  <!-- <a href="/guide/" class="IndexHero-installBtn button">Install v<%- config.uppy_version %></a> -->
 
 </section>
 
 
 <section id="example" class="IndexExample">

+ 5 - 8
website/themes/uppy/layout/layout.ejs
Ver fichero 

@@ -17,15 +17,12 @@
 
   </head>
 
   <body class="<%= isIndex ? 'page-index' : 'page-inner' %>">
 
     <div class="page">
 
-      <nav id="mobile-bar" class="MobileBar">
 
-        <button class="menu-button"></button>
 
-        <a class="logo" href="/"><img src="<%- config.logo_icon %>"></a>
 
-      </nav>
 
+      <header id="header" class="MainHeader js-MainHeader">
 
+        <button class="MainHeader-menuBtn js-MenuBtn"></button>
 
 
-      <header id="header" class="MainHeader">
 
         <a id="logo" class="MainLogo" href="/">
 
-          <img src="<%- config.logo_medium %>">
 
-          <span><%- config.title %></span>
 
+          <img class="MainLogo-img" src="<%- config.logo_medium %>">
 
+          <span class="MainLogo-text"><%- config.title %></span>
 
         </a>
 
 
         <nav>
 
@@ -35,7 +32,7 @@
 
         </nav>
 
       </header>
 
 
-      <main id="main">
 
+      <main class="MainContent js-MainContent" id="main">
 
         <%- body %>
 
       </main>

+ 1 - 1
website/themes/uppy/layout/page.ejs
Ver fichero 

@@ -1,7 +1,7 @@
 
 <% if (page.type) { %>
 
     <%- partial('partials/sidebar', { type: page.type, index: page.index }) %>
 
 <% } %>
 
-<div class="content <%- page.type ? page.type + ' with-sidebar' : '' %>">
 
+<div class="Content js-Content <%- page.type ? page.type + ' with-sidebar' : '' %>">
 
     <h1><%- page.title %></h1>
 
     <%- page.content %>
 
     <% if (page.type === 'guide') { %>

+ 3 - 2
website/themes/uppy/layout/partials/main_menu.ejs
Ver fichero 

@@ -1,8 +1,9 @@
 
-<li>
 
+<!-- @todo uncomment search input when we get our own swifttype -->
 
+<!-- <li>
 
   <form id="search-form" class="MainMenu-search">
 
     <input type="text" id="search-query" class="MainMenu-searchQuery st-default-search-input">
 
   </form>
 
-</li>
 
+</li> -->
 
 <li><a href="/guide/" class="nav-link<%- page.path.match(/guide/) ? ' current' : '' %>">Guide</a></li>
 
 <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>

+ 1 - 1
website/themes/uppy/layout/partials/sidebar.ejs
Ver fichero 

@@ -1,4 +1,4 @@
 
-<div class="Sidebar js-sidebar">
 
+<div class="Sidebar js-Sidebar">
 
   <ul class="main-menu">
 
     <%- partial('partials/main_menu') %>
 
   </ul>

+ 134 - 17
website/themes/uppy/source/css/_common.scss
Ver fichero 

@@ -122,47 +122,158 @@ a.button {
 
   min-height: 100vh;
 
 }
 
 
-.page-index .BuildBadge { margin-left: -2px !important; }
 
-.page-inner .BuildBadge { margin-top: 15px; }
 
-
 
-.MainLogo {
 
-  display: block;
 
-  margin: 0 auto;
 
-  width: 120px;
 
+.page-inner .MainContent {
 
+  position: relative;
 
+  z-index: 1;
 
+  overflow-x: hidden;
 
+  padding: 2em 1.4em 0;
 
 
   @media #{$screen-medium} {
 
-    width: 150px;
 
+    padding: 0 60px 30px;
 
   }
 
 }
 
 
-.MainHeader {
 
-  background-color: $color-white;
 
-  padding: 25px 60px;
 
-  position: relative;
 
-  z-index: 2;
 
-  border-top: 6px solid $color-primary;
 
+/**
 
+* MainLogo
 
+*/
 
+.MainLogo {
 
+  display: inline-block;
 
+  font-size: 1.5em;
 
+  line-height: $size-headerHeight;
 
+  color: $color-dark;
 
+  font-family: $fontFamily-logo;
 
+  font-weight: 500;
 
+
 
+  img {
 
+    vertical-align: middle;
 
+    margin-right: 6px;
 
+    width: $size-headerHeight;
 
+    height: $size-headerHeight;
 
+  }
 
 }
 
 
-  .page-inner .MainHeader {
 
+  .MainLogo-text {
 
     display: none;
 
     @media #{$screen-medium} {
 
-      display: block;
 
+      display: inline;
 
     }
 
   }
 
 
+/**
 
+* MainHeader
 
+*/
 
+
 
+.page-index .MainHeader {
 
+  padding-top: 1.5em;
 
+  padding-bottom: 2.5em;
 
+  border-top: 6px solid $color-primary;
 
+}
 
+
 
+.page-inner .MainHeader {
 
+  position: fixed;
 
+  top: 0;
 
+  left: 0;
 
+  width: 100%;
 
+  height: 40px;
 
+  z-index: 9;
 
+  box-shadow: 0 0 4px rgba(0,0,0,.25);
 
+  background-color: $color-white;
 
+  text-align: center;
 
+
 
+  @media #{$screen-medium} {
 
+    position: static;
 
+    height: auto;
 
+    padding: 25px 60px;
 
+    box-shadow: none;
 
+    position: relative;
 
+    z-index: 2;
 
+    border-top: 6px solid $color-primary;
 
+    text-align: left;
 
+  }
 
+}
 
+
 
+.MainHeader-menuBtn {
 
+  display: block;
 
+
 
+  @media #{$screen-medium} {
 
+    display: none;
 
+  }
 
+}
 
+
 
+  .page-index .MainHeader-menuBtn {
 
+    display: none;
 
+  }
 
+
 
+  .page-inner .MainHeader-menuBtn {
 
+    background: none;
 
+    border: 0;
 
+    position: absolute;
 
+    width: 24px;
 
+    height: 24px;
 
+    top: 8px;
 
+    left: 12px;
 
+    background: svg('burger.svg', '[fill]: #{$color-gray}') center center no-repeat;
 
+    background-size: 22px;
 
+  }
 
+
 
+/**
 
+* MainMenu
 
+*/
 
+
 
 .MainMenu {
 
   text-transform: uppercase;
 
   letter-spacing: 2px;
 
   list-style-type: none;
 
   margin: 2em 1.8em 0;
 
   padding: 0;
 
+  font-size: $fontSize-s;
 
 
   @media #{$screen-medium} {
 
     margin: 0;
 
-    font-size: $fontSize-s;
 
   }
 
 }
 
 
+  .MainMenu-searchQuery {
 
+    height: 30px;
 
+    line-height: 30px;
 
+    padding: 0 15px 0 30px;
 
+    border: 1px solid #e3e3e3;
 
+    outline: none;
 
+    border-radius: 15px;
 
+    margin-right: 10px;
 
+    transition: border-color .2s ease;
 
+    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;
 
+    }
 
+  }
 
+
 
+  .page-inner .MainMenu {
 
+    display: none;
 
+    position: absolute;
 
+    right: 60px;
 
+    top: 25px;
 
+    height: $size-headerHeight;
 
+    line-height: $size-headerHeight;
 
+
 
+    li {
 
+      display: inline-block;
 
+      position: relative;
 
+      margin: 0 .6em;
 
+    }
 
+
 
+    @media #{$screen-medium} {
 
+      display: block;
 
+    }
 
+  }
 
+
 
 .nav-link {
 
   color: $color-light;
 
   padding-bottom: 3px;
 
@@ -178,3 +289,9 @@ a.button {
 
     font-size: 1em;
 
   }
 
 }
 
+
 
+/**
 
+* BuildBadge
 
+*/
 
+.page-index .BuildBadge { margin-left: -2px !important; }
 
+.page-inner .BuildBadge { margin-top: 15px; }

+ 16 - 120
website/themes/uppy/source/css/_page.scss
Ver fichero 

@@ -1,114 +1,6 @@
 
-.page-inner #main {
 
-  position: relative;
 
-  z-index: 1;
 
-  overflow-x: hidden;
 
-  padding: 2em 1.4em 0;
 
-
 
-  @media #{$screen-medium} {
 
-    padding: 0 60px 30px;
 
-  }
 
-}
 
-
 
-.page-inner #nav {
 
-  position: absolute;
 
-  right: 60px;
 
-  top: 25px;
 
-  height: $size-headerHeight;
 
-  line-height: $size-headerHeight;
 
-
 
-  li {
 
-    display: inline-block;
 
-    position: relative;
 
-    margin: 0 .6em;
 
-  }
 
-}
 
-
 
-.nav-link {
 
-  padding-bottom: 3px;
 
-  &:hover, &.current { border-bottom: 3px solid $color-primary; }
 
-}
 
-
 
-.MainMenu-searchQuery {
 
-  height: 30px;
 
-  line-height: 30px;
 
-  padding: 0 15px 0 30px;
 
-  border: 1px solid #e3e3e3;
 
-  outline: none;
 
-  border-radius: 15px;
 
-  margin-right: 10px;
 
-  transition: border-color .2s ease;
 
-  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 {
 
-  display: inline-block;
 
-  font-size: 1.5em;
 
-  line-height: $size-headerHeight;
 
-  color: $color-dark;
 
-  font-family: $fontFamily-logo;
 
-  font-weight: 500;
 
-
 
-  img {
 
-    vertical-align: middle;
 
-    margin-right: 6px;
 
-    width: $size-headerHeight;
 
-    height: $size-headerHeight;
 
-  }
 
-}
 
-
 
-.page-index .MobileBar {
 
-  display: none;
 
-}
 
-
 
-.MobileBar {
 
-  position: fixed;
 
-  top: 0;
 
-  left: 0;
 
-  width: 100%;
 
-  height: 40px;
 
-  background-color: $color-white;
 
-  z-index: 9;
 
-  box-shadow: 0 0 4px rgba(0,0,0,.25);
 
-
 
-  @media #{$screen-medium} {
 
-    display: none;
 
-  }
 
-
 
-  .menu-button {
 
-    background: none;
 
-    border: 0;
 
-    position: absolute;
 
-    width: 24px;
 
-    height: 24px;
 
-    top: 8px;
 
-    left: 12px;
 
-    background: svg('burger.svg', '[fill]: #{$color-gray}') center center no-repeat;
 
-    background-size: 22px;
 
-  }
 
-
 
-  .logo {
 
-    position: absolute;
 
-    width: 30px;
 
-    height: 30px;
 
-    top: 5px;
 
-    left: 50%;
 
-    margin-left: -15px;
 
-    background-size: 30px;
 
-  }
 
-}
 
-
 
-.fix-sidebar .Sidebar { position: fixed; }
 
+/**
 
+* Sidebar
 
+*/
 
 
 .Sidebar {
 
   position: fixed;
 
@@ -128,7 +20,8 @@
 
     padding-left: 0;
 
   }
 
 
-  &.open { transform: translate(0, 0); }
 
+  &.is-open { transform: translate(0, 0); }
 
+  .fix-sidebar & { position: fixed; }
 
 
   @media #{$screen-medium} {
 
     position: absolute;
 
@@ -199,7 +92,10 @@
 
   }
 
 }
 
 
-.content {
 
+/**
 
+* Content
 
+*/
 
+.Content {
 
   padding: 2.2em 0;
 
   max-width: 600px;
 
   margin: 0 auto;
 
@@ -337,10 +233,10 @@
 
   height: 1em;
 
 }
 
 
-.footer {
 
-  color: $color-light;
 
-  margin-top: 2em;
 
-  padding-top: 2em;
 
-  border-top: 1px solid #e5e5e5;
 
-  font-size: .9em;
 
-}
 
+// .footer {
 
+//   color: $color-light;
 
+//   margin-top: 2em;
 
+//   padding-top: 2em;
 
+//   border-top: 1px solid #e5e5e5;
 
+//   font-size: .9em;
 
+// }

+ 28 - 12
website/themes/uppy/source/js/common.js
Ver fichero 

@@ -1,28 +1,28 @@
 
 (function () {
 
 
   var each = [].forEach
 
-  var main = document.getElementById('main')
 
+
 
+  var main = document.querySelector('.js-MainContent')
 
   var doc = document.documentElement
 
   var body = document.body
 
-  var header = document.getElementById('header')
 
-  var menu = document.querySelector('.js-sidebar')
 
-  var content = document.querySelector('.content')
 
-  var mobileBar = document.getElementById('mobile-bar')
 
+  var header = document.querySelector('.js-MainHeader')
 
+  var menu = document.querySelector('.js-Sidebar')
 
+  var content = document.querySelector('.js-Content')
 
 
-  var menuButton = mobileBar.querySelector('.menu-button')
 
+  var menuButton = document.querySelector('.js-MenuBtn')
 
   menuButton.addEventListener('click', function () {
 
-    menu.classList.toggle('open')
 
+    menu.classList.toggle('is-open')
 
   })
 
 
   body.addEventListener('click', function (e) {
 
     if (e.target !== menuButton && !menu.contains(e.target)) {
 
-      menu.classList.remove('open')
 
+      menu.classList.remove('is-open')
 
     }
 
   })
 
 
   // build sidebar
 
   var currentPageAnchor = menu.querySelector('.sidebar-link.current')
 
-  var isAPI = document.querySelector('.content').classList.contains('api')
 
+  var isAPI = document.querySelector('.Content').classList.contains('api')
 
   if (currentPageAnchor || isAPI) {
 
     var allLinks = []
 
     var sectionContainer
 
@@ -85,9 +85,9 @@
 
     var top = doc && doc.scrollTop || body.scrollTop
 
     var headerHeight = header.offsetHeight
 
     if (top > headerHeight) {
 
-      main.className = 'fix-sidebar'
 
+      addClass(main, 'fix-sidebar');
 
     } else {
 
-      main.className = ''
 
+      removeClass(main, 'fix-sidebar');
 
     }
 
     if (animating || !allLinks) return
 
     var last
 
@@ -160,6 +160,22 @@
 
     wrapper.appendChild(link)
 
   }
 
 
+  function addClass(el, className) {
 
+    if (el.classList) {
 
+      el.classList.add(className);
 
+    } else {
 
+      el.className += ' ' + className;
 
+    }
 
+  }
 
+
 
+  function removeClass(el, className) {
 
+    if (el.classList) {
 
+      el.classList.remove(className);
 
+    } else {
 
+      el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
 
+    }
 
+  }
 
+
 
   // Search with SwiftType
 
   // @todo get our own swifttype
 
 
@@ -182,4 +198,4 @@
 
   //   }
 
   // })
 
 
-})()
 
+})();