Fix & improve state, move activity to the index page

website/src/stats.ejs

@@ -1,5 +1,6 @@
 ---
 title: Stats
+type: guide
 layout: stats
 permalink: stats/
 ---

website/themes/uppy/layout/index.ejs

@@ -43,17 +43,6 @@
   <a class="GetStartedBtn" href="/guide/index.html">Get Started</a>
 </section>
 
-<!-- <section id="features">
-  <div class="feats">
-    <% for (var k in site.data.features) { var v = site.data.features[k]; %>
-      <div class="feat">
-        <h2><span class="icon <%- v.icon %>"></span><%- v.title %></h2>
-        <p> <%- render(v.description, 'swig', {size_minjsgz: theme.uppy_bundle_kb_sizes['uppy.min.js.gz']}) %></p>
-      </div>
-    <% } %>
-  </div>
-</section> -->
-
 <section class="IndexDesignGoals">
   <h2>Design Goals:</h2>
   <ul>
@@ -65,6 +54,17 @@
   </ul>
 </section>
 
+<section class="IndexActivity">
+  <h2>Activity Feed</h2>
+
+  <div class="on-the-githubs" data-event-source="repos/transloadit/uppy">Loading...</div>
+  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+  <script src="//kvz.github.io/on-the-githubs/js/jquery.on-the-githubs.min.js"></script>
+  <script type="text/javascript">
+    $('.on-the-githubs').onthegithubs();
+  </script>
+</section>
+
 <footer class="IndexFooter">
   <p>Released under the <a href="http://opensource.org/licenses/MIT" target="_blank">MIT License</a></p>
   <p>This site borrows heavily from Evan You's excellent <a href="https://github.com/vuejs/vuejs.org">Vue.js</a> (<a href="https://github.com/transloadit/uppy/blob/master/website/VUEORG_LICENSE">LICENSE</a>) (he <a href="https://twitter.com/youyuxi/status/672441843183960067">approves</a>)</p>

website/themes/uppy/layout/stats.ejs

@@ -1,70 +1,62 @@
-<div class="Sidebar js-Sidebar Stats">
-  <strong class="underline">Current pre-built bundle sizes:</strong><br/>
-  <dl>
-    <% for (var type in theme.uppy_bundle_kb_sizes) { %>
-      <% var kb = theme.uppy_bundle_kb_sizes[type]; %>
-      <dt>
-        <% if (kb === 'N/A') { %>
-          <%- type %>
-        <% } else { %>
-          <a href="/uppy/<%- type %>"><%- type %></a>
-        <% }%>
-      </dt>
-      <dd class="
-        <% if (kb > 100) { %>
-          red
-        <% } %>
-        <% if (kb < 50) { %>
-          green
-        <% } %>
-      ">
-
-        <% if (kb === 'N/A') { %>
-          <%- kb %>
-        <% } else { %>
-          <%- kb %> Kb
-        <% }%>
-      </dd>
-    <% } %>
-  </dl>
-</div>
+<%- partial('partials/sidebar', { type: page.type, index: page.index }) %>
 
 <div class="Content js-Content <%- page.type ? page.type + ' with-sidebar' : '' %>">
-  <h1><%- page.title %></h1>
-
-  <p>
-    At this (early) stage, we're allowing ourselves speed of development over
-    lean packaging, but as Uppy matures, we'll be using be using <a href="http://rollupjs.org/">rollup.js</a> for
-    tree-shaking, and in addition we'll be trimming away fat ourselves where we can.
-    The graph below will help us discover low hanging fruit.
-  </p>
-
-  <strong>Current module dependency sizes:</strong><br/>
-
-  <iframe scrolling="no" seamless="seamless" class="Disc" src="/disc.html"></iframe>
-  This graph is built with
-  <a href="https://twitter.com/hughskennedy">Hugh Kennedy</a>'s excellent
-  <a href="http://hughsk.io/disc/">disc</a>.
-  <br />
+  <div class="Stats">
+      <h1><%- page.title %></h1>
+
+      <div class="Stats-info">
+        <div class="Stats-bundleSizes">
+          <strong class="underline">Bundle Sizes</strong>
+          <dl>
+            <% for (var type in theme.uppy_bundle_kb_sizes) { %>
+              <% var kb = theme.uppy_bundle_kb_sizes[type]; %>
+              <dt>
+                <% if (kb === 'N/A') { %>
+                  <%- type %>
+                <% } else { %>
+                  <a href="/uppy/<%- type %>"><%- type %></a>
+                <% }%>
+              </dt>
+              <dd class="
+                <% if (kb > 100) { %>
+                  red
+                <% } %>
+                <% if (kb < 50) { %>
+                  green
+                <% } %>
+              ">
+
+                <% if (kb === 'N/A') { %>
+                  <%- kb %>
+                <% } else { %>
+                  <%- kb %> Kb
+                <% }%>
+              </dd>
+            <% } %>
+          </dl>
+        </div>
+
+        <p class="Stats-infoText">
+          At this (early) stage, we’re allowing ourselves speed of development over
+          lean packaging, but as Uppy matures, we’ll be using be using
+          <a href="http://rollupjs.org/">rollup.js</a> for tree-shaking, and in addition
+          we’ll be trimming away fat ourselves where we can.
+          The graph below will help us discover low hanging fruit:
+        </p>
+      </div>
+
+      <iframe scrolling="no" seamless="seamless" class="Disc" src="/disc.html"></iframe>
+      This graph is built with
+      <a href="https://twitter.com/hughskennedy">Hugh Kennedy</a>’s excellent
+      <a href="http://hughsk.io/disc/">disc</a>.
+
+      <div class="footer">Caught a mistake or want to contribute to the documentation?
+        <a href="https://github.com/transloadit/uppy/blob/master/website/src/<%- page.source %>" target="_blank">
+          Edit/fork this page directly on Github
+        </a>!
+      </div>
+
+      <%- partial('partials/social') %>
 
-  <%- page.content %>
-
-  <h2>Activity feed</h2>
-
-  <div class="on-the-githubs" data-event-source="repos/transloadit/uppy">Loading...</div>
-  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-  <script src="//kvz.github.io/on-the-githubs/js/jquery.on-the-githubs.min.js"></script>
-  <script type="text/javascript">
-    $('.on-the-githubs').onthegithubs();
-    // If you use bootstrap and want to enable tooltips
-    // $('a[rel]').tooltip();
-  </script>
-
-  <div><br /><br /></div>
-
-  <div class="footer">Caught a mistake or want to contribute to the documentation?
-     <a href="https://github.com/transloadit/uppy/blob/master/website/src/<%- page.source %>" target="_blank">Edit/fork this page directly on Github</a>!
   </div>
-
-  <%- partial('partials/social') %>  
 </div>

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

@@ -39,6 +39,10 @@
     width: 33.333333%;
   }
 
+  .column-2-3 {
+    width: 66.6667%;
+  }
+
   .column-1-4 {
     width: 25%;
   }

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

@@ -224,6 +224,16 @@
   }
 }
 
+.IndexActivity {
+  max-width: 760px;
+  margin: 3em auto;
+  padding: 0 20px;
+
+  h2 {
+    text-align: center;
+  }
+}
+
 .IndexDesignGoals {
   padding: 4em 1em;
   background-color: $color-primary;

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

@@ -233,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;
+}

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

@@ -40,4 +40,4 @@ $size-headerHeight: 40px;
 
 // small screen
 $screen-medium: 'only screen and (min-width: 1024px)';
-// $screen-large: 'only screen and (min-width: 860px)';
+$screen-large: 'only screen and (min-width: 1150px)';

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

@@ -1,22 +1,36 @@
-.Disc {
-  border: 0 none;
-  width: 100%;
-  min-height: 500px;
-  padding: 0;
-  margin: 0;
-  overflow-y: hidden;
+.Stats-info {
+  @include clearfix;
+}
+
+.Stats-infoText {
+  max-width: 90%;
+  font-size: 1.3em;
+}
+
+.Stats-bundleSizes {
+  @media #{$screen-large} {
+    max-width: 320px;
+    float: right;
+    margin-right: -320px;
+    padding-left: 50px;
+  }
 }
 
-.Sidebar.Stats {
+.Stats-bundleSizes {
   strong.underline {
+    display: inline-block;
     border-bottom: 1px solid #eee;
+    margin-bottom: 5px;
   }
+
   dl {
+    @include clearfix;
     width: 100%;
-    overflow: hidden;
     padding: 0;
     margin: 0;
+    line-height: 1.5;
   }
+
   dt {
     float: left;
     width: 50%;
@@ -26,6 +40,7 @@
       color: #e02177;
     }
   }
+
   dd {
     float: left;
     width: 50%;
@@ -40,8 +55,17 @@
   }
 }
 
+.Disc {
+  border: 0 none;
+  width: 100%;
+  min-height: 500px;
+  padding: 0;
+  margin: 0;
+  overflow-y: hidden;
+}
+
 
-.Content .on-the-githubs {
+.on-the-githubs {
   >li {
     list-style-type: none;
     margin: 0;