docs(styles): tidy up JS, better affix the sidebar menu

Author: flynnduism

mkdocs.yml

@@ -86,7 +86,8 @@ markdown_extensions:
   - toc:
       permalink: True
 extra_javascript:
+  - static/js/foundation.js
+  - static/js/foundation.offcanvas.js
+  - static/js/headroom.min.js
   - static/js/adjustments.js
-  - static/js/bootstrap.min.js
-  - static/js/checkURL.js
 google_analytics: ['UA-42867143-1', 'deis.io']

themes/deis/base.html

@@ -15,11 +15,9 @@
   <meta name="msvalidate.01" content="08598E7D936D9217891AE6C1665A645D" />
 
   <title>{% if page_title %}{{ page_title }} - {% endif %}{{ site_name }}</title>
-  <!-- <base href="https://deis.com/docs"> -->
 
+  <script type="text/javascript">var documentationBaseURL = "{{ base_url}}"</script>
   <link rel="icon" href="{{ base_url }}/static/img/favicon/favicon.png" type="image/png">
-
-  <!-- styles -->
   <link rel="stylesheet" href="{{ base_url }}/static/css/styles.css" type="text/css">
 </head>
 
@@ -29,6 +27,7 @@
       <![endif]-->
 
   {%- include "topbar.html" %}
+  {%- include "offcanvas.html" %}
 
   <!-- banner at the top of the page for temporary announcements-->
   <div data-alert class="alert-box alert banner text-center">
@@ -49,7 +48,9 @@
 
     <nav class="sidebar">
       <div class="sidebar-inner">
-        <ul class="current">
+        <h1><a href="/" class="logo"><img src="{{ base_url }}/static/img/svg/logo.svg" width="128px" height="41px" alt="Deis"></a></h1>
+
+        <ul class="current sidebar-main">
           {%- include "nav.html" %}
           <li class="toctree-l1">
             {% if READTHEDOCS %}
@@ -78,28 +79,13 @@
 
   {%- include "footer.html" %}
 
-  <!-- scripts -->
-  <script type="text/javascript">var documentationBaseURL = "{{ base_url}}"</script>
-  <script src="{{ base_url }}/static/js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
-  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-  <script>window.jQuery || document.write('<script src="{{ base_url }}/static/js/jquery-1.10.2.min.js"><\/script>')</script>
-
-  <!--
-    extra_javascript contains paths to JavaScript files in the
-    users documentation directory or a list of JavaScript files
-    defined in their mkdocs.yml.
-
-    http://www.mkdocs.org/user-guide/configuration/#extra_javascript
-  -->
+  <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
+  <script>window.jQuery || document.write('<script src="{{ base_url }}/static/js/jquery-1.12.4.min.js"><\/script>')</script>
+  <!-- extra_javascript - defined in the root 'mkdocs.yml -->
   {% for path in extra_javascript %}
-    <script src="{{ path }}"></script>
+    <script src="{{ path }}" async></script>
   {% endfor %}
 
-  <!--
-    Include Google Analytics tracking code.
-
-    http://www.mkdocs.org/user-guide/configuration/#google_analytics
-  -->
   {% if google_analytics %}
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

themes/deis/footer.html

@@ -22,7 +22,7 @@
           </form>
         </div>
 
-        <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
+        <script type='text/javascript' src='{{ base_url }}/static/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
         <!--End mc_embed_signup-->
 
       </div>

themes/deis/offcanvas.html

@@ -0,0 +1,22 @@
+<aside class="right-off-canvas-menu">
+  <ul>
+    <li>
+      <a href="/how-it-works" id="m-header-hiw" class="item" title="How It Works">How It Works</a>
+    </li>
+    <li>
+      <a href="/why-deis" id="m-header-why-deis" class="item" title="Why Use Deis">Why Use Deis</a>
+    </li>
+    <li>
+      <a href="/services" id="m-header-services" class="item" title="Support &amp; Services">Support &amp; Services</a>
+    </li>
+    <li>
+      <a href="/community" id="m-header-community" class="item" title="Community">Community</a>
+    </li>
+    <li>
+      <a href="/blog" id="m-header-blog" class="item" title="Blog">Blog</a>
+    </li>
+    <li>
+      <a href="https://github.com/deis/workflow" data-event-category="Get Started" data-event-action="click" class="item button expand" title="Get Started">Get Started</a>
+    </li>
+  </ul>
+</aside>

themes/deis/static/css/styles.css

@@ -1,46 +1,26 @@
-$(function(){
-  var pageHeight;
+$(document).ready(function() {
 
-  function set_columns() {
-    pageHeight = 0;
-    $('footer').css('margin-top', '0');
-    $('.nav-border').css('height', '600');
-    pageHeight = $(document).height();
-    // console.log(pageHeight);
-    $('.nav-border').css('height', pageHeight);
+  // init foundation for offcanvas menu
+  $(document).foundation();
 
-    var margin = pageHeight - 511 - 158;
-    if (pageHeight < 800){
-      margin = 270;
-      $('body').css('height', '930');
-      $('.nav-border').css('height', '930');
-    }
-    $('footer').css('margin-top', margin);
-    $('footer').css('display', 'block');
-
-    if($(window).width() > 1171){$('.docs-sidebar').css({'position': 'absolute', 'right': '0'})};
-    if($(window).width() < 1171){$('.docs-sidebar').css('position', 'static');}
-  }
 
-//This variable checks if all accordions are closed. Used to ensure styling for Releases & FAQ page.
+  // custom theme js for sidebar links
   var allClosed;
 
-  //Close all accordions, besides the menu containing the page that you've clicked on.
+  // close all accordions, besides the menu containing the page that you've clicked on.
   $('.toctree-l1').each(function(){
     if($(this).children('a').attr('state') == 'open') {
       $(this).children('ul').show();
-      set_columns();
       allClosed = false;
       return false;
     } else {
       allClosed = true;
     }
   });
 
-  if (allClosed == true) {set_columns();}
+  if (allClosed == true) { }
 
-
-  //If menu is closed when clicked, expand it
+  // if menu is closed when clicked, expand it
   $('.toctree-l1 > a').click(function() {
 
     //Make the titles of open accordions dead links
@@ -51,14 +31,33 @@ $(function(){
       $('.toctree-l1 > ul').hide();
       $('.toctree-l1 > a').attr('state', '');
       $(this).attr('state', 'open');
-      $(this).next().slideDown(function(){set_columns();});
+      $(this).next().slideDown(function(){});
       return false;
     }
   });
 
-  $('#AWS').attr('href', documentationBaseURL + '/quickstart/provider/aws/boot/')
-  $('#GKE').attr('href', documentationBaseURL + '/quickstart/provider/gke/boot/')
-  $('#Vagrant').attr('href', documentationBaseURL + '/quickstart/provider/vagrant/boot/')
 
-  $(window).resize(set_columns);
+  // insert urls into markdown
+  $(function(){
+    $('#AWS').attr('href', documentationBaseURL + '/quickstart/provider/aws/boot/')
+    $('#GKE').attr('href', documentationBaseURL + '/quickstart/provider/gke/boot/')
+    $('#Vagrant').attr('href', documentationBaseURL + '/quickstart/provider/vagrant/boot/')
+  });
+
 });
+
+
+// use headroom.js for sticky topbar
+(function() {
+  var searchBar = document.querySelector(".top-bar");
+  new Headroom(searchBar, {
+    offset: 50,
+    classes: {
+      "initial": "headroom",
+      "pinned": "headroom--pinned",
+      "unpinned": "headroom--unpinned",
+      "top" : "headroom--top",
+      "notTop" : "headroom--not-top"
+    }
+  }).init();
+}());