Misc fixes

themes/manual/pagenav.html

@@ -9,14 +9,8 @@ <h3>
 
 {{ toctree( collapse=false, titles_only=1) }}
 
-<ul class="extra-contents">
-    <li class="toctree-l1">
-        <a href="{{pathto('about')}}">{{_('About')}}</a>
-    </li>
-    <li class="toctree-l1">
-        <a href="{{ pathto(master_doc) }}">{{ _('Contents') }}</a>
-    </li>
-    <li class="toctree-l1">
-        <a href="{{ pathto('genindex') }}">{{ _('Index') }}</a>
-    </li>
-</ul>
+<div class="nav-footer">
+  <a href="{{pathto('about')}}">{{_('About')}}</a> |
+  <a href="{{ pathto(master_doc) }}">{{ _('Contents') }}</a> |
+  <a href="{{ pathto('genindex') }}">{{ _('Index') }}</a>
+</div>

themes/mongodb/layout.html

@@ -228,6 +228,7 @@
   {%- block header %}
     <header id="header-db" class="row" role="navigation">
       <div class="header-content">
+        <a class="fa fa-bars expand-toc-icon pull-left" href="#"></a>
         <div class="logo pull-left">MongoDB Docs</div>
         <div>
           {%- block searchbox %}

themes/mongodb/static/mongodb-docs.css_t

@@ -493,15 +493,8 @@ div.highlight pre {
     white-space: pre;
 }
 
-div.section > h1 {
-    margin-top: -75px;
-    padding-top: 75px;
-}
-
 div.section > h2, div.section > h3,div.section > h4 {
-    margin-top: -50px;
-    padding-top: 75px;
-    margin-bottom: 0;
+    margin: 25px 0;
 }
 
 #btnv {
@@ -616,6 +609,10 @@ div.versionadded > p > span, div.versionchanged > p > span, div.deprecated > p >
     min-height: 600px;
     width: 800px;
     padding: 25px 30px;
+
+    transition: margin-left 0.4s cubic-bezier(.02,.01,.47,1);
+    -moz-transition: margin-left 0.4s cubic-bezier(.02,.01,.47,1);
+    -webkit-transition: margin-left 0.4s cubic-bezier(.02,.01,.47,1);
 }
 
 #see-also > p {
@@ -641,6 +638,10 @@ div.versionadded > p > span, div.versionchanged > p > span, div.deprecated > p >
 #header-db .header-content {
     width: 1393px;
     padding-left: 12px;
+
+    transition: width 0.4s cubic-bezier(.02,.01,.47,1);
+    -moz-transition: width 0.4s cubic-bezier(.02,.01,.47,1);
+    -webkit-transition: width 0.4s cubic-bezier(.02,.01,.47,1);
 }
 
 #header-db .nav-items {
@@ -895,6 +896,11 @@ input.gsc-search-button[title], input.gsc-search-button:hover[title], input.gsc-
     left: 0;
     overflow: auto;
     font-size: 0.85em;
+    z-index: 100;
+
+    transition: left 0.4s cubic-bezier(.02,.01,.47,1);
+    -moz-transition: left 0.4s cubic-bezier(.02,.01,.47,1);
+    -webkit-transition: left 0.4s cubic-bezier(.02,.01,.47,1);
 }
 
 div.sphinxsidebarwrapper {
@@ -959,6 +965,10 @@ div.sphinxsidebar h3 a.showlink {
     padding: 0 12px;
 }
 
+.sphinxsidebarwrapper .nav-footer {
+    padding: 50px 12px 12px 12px;
+}
+
 div.sphinxsidebar li.toctree-l2 > a {
     padding-left: 24px;
 }
@@ -1052,6 +1062,7 @@ div.sphinxsidebarwrapper div.idxcontents {
     height: 303px;
     bottom: 0;
     left: 0;
+    z-index: 100;
 
     transition: bottom 0.4s cubic-bezier(.02,.01,.47,1);
     -moz-transition: bottom 0.4s cubic-bezier(.02,.01,.47,1);
@@ -1245,3 +1256,48 @@ div.admonition.note table.docutils tr:last-child td {
     border-bottom: 0;
 }
 
+@media (max-width: 1393px) {
+    #header-db .header-content {
+        width: 1068px;
+    }
+
+    .content .right-column {
+        display: none;
+    }
+}
+
+.expand-toc-icon {
+    display: none;
+}
+
+@media (max-width: 1093px) {
+    .expand-toc-icon {
+        display: block;
+        padding-top: 10px;
+        padding-right: 10px;
+        color: white;
+    }
+
+    .expand-toc-icon:hover,
+    .expand-toc-icon:active {
+        color: white;
+        text-decoration: none;
+    }
+
+    #header-db .header-content {
+        width: 775px;
+        padding-left: 25px;
+    }
+
+    .sidebar {
+        left: -293px;
+    }
+
+    .sidebar.reveal {
+        left: 0;
+    }
+
+    .content .main-column {
+        margin-left: 0;
+    }
+}

themes/mongodb/static/navbar.js

@@ -15,19 +15,31 @@ $(function() {
     $('.sphinxsidebarwrapper > ul li:not(.current) > ul:not(.current)').hide();
     $('.sphinxsidebarwrapper').show();
 
+    // There should really be a less fragile selector for the relaese notes list item
+    var $lastNode = $('.sphinxsidebarwrapper .toctree-l1:last-child');
+    function isReleaseNotesChild($node) {
+        return $lastNode.has($node.parent()).length;
+    }
+
     $('.sphinxsidebarwrapper .toctree-l1').on('click', 'a', function(e) {
         var $target = $(e.currentTarget);
         if (isLeafNode($target)) {
             return; // Do a full page reload on leaf nodes
         }
 
+        // Release notes has special behavior to click through
+        if (!$target.parent().hasClass('current') && isReleaseNotesChild($target)) {
+            return;
+        }
+
         e.preventDefault();
 
         if ($target.parent().hasClass('current')) {
             // collapse target node
             $target.removeClass('current').parent().removeClass('current leaf-item');
             $target.siblings('ul').slideUp();
         } else {
+
             $current.removeClass('current');
             $current.parent().removeClass('leaf-item');
             // roll up all navigation up to the common ancestor
@@ -88,4 +100,23 @@ $(function() {
         }
         $currentTarget.toggleClass('collapsed');
     });
+
+    /* Expand/collapse navbar on narrower viewports */
+    $('.expand-toc-icon').on('click', function(e) {
+        e.preventDefault();
+        $('.sidebar').toggleClass('reveal');
+    });
+
+    /* Reset the sidebar when the viewport is wider than tablet size */
+    var $window = $(window),
+        $sidebar = $('.sidebar'),
+        isTabletWidth = $window.width() <= 1093;
+    $window.resize(function(e) {
+        if (isTabletWidth && $window.width() > 1093) {
+            isTabletWidth = false;
+            $sidebar.removeClass('reveal');
+        } else if (!isTabletWidth && $window.width() <= 1093) {
+            isTabletWidth = true;
+        }
+    });
 });