Noissue - Fix broken layout from changeset 1940351cdb4c

static/js/main.js

Index: static/js/main.js
===================================================================
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1,36 +1,36 @@
 (function(){
   document.addEventListener("DOMContentLoaded", function()
   {
     /**************************************************************************
      * General
      **************************************************************************/
 
-     document.documentElement.classList.add("js");
-     document.documentElement.classList.remove("no-js");
-     // the class "open" was added just in case it's a no-js state
-     document.getElementById("sidebar").classList.remove("open");
+    document.documentElement.classList.add("js");
+    document.documentElement.classList.remove("no-js");
+    // the class "open" was added just in case it's a no-js state
+    document.getElementById("sidebar").classList.remove("open");
 
     /**************************************************************************
      * Sidebar
      **************************************************************************/
 
-    var sidebar = document.getElementById("sidebar");
     var sidebarOpen = document.getElementById("sidebar-open");
     var sidebarClose = document.getElementById("sidebar-close");
+    var root = document.documentElement;
 
     sidebarOpen.addEventListener("click", function()
     {
-      sidebar.classList.add("open");
+      root.classList.add("open-sidebar");
     }, false);
 
     sidebarClose.addEventListener("click", function()
     {
-      sidebar.classList.remove("open");
+      root.classList.remove("open-sidebar");
     }, false);
 
 
     /**************************************************************************
      * Youtube Embed
      **************************************************************************/
 
     function YoutubeEmbed(container)
@@ -75,10 +75,65 @@
         this.container.classList.add("show-disclaimer");
         this.timeClickedVideo = new Date().getTime();
       }
     };
 
     if (document.querySelector(".youtube-embed"))
       new YoutubeEmbed(document.querySelector(".youtube-embed"));
 
+      /**************************************************************************
+       * Header disappears on scroll down and re-appears on scroll up in small screens
+       **************************************************************************/
+
+    function initNavbarToggle()
+    {
+      var sidebarHeight = document.getElementById("sidebar").offsetHeight;
+      var scrollHandled = false;
+      var lastScrollTop = 0;
+      var desktopBreakpoint = 1199;
+
+      // IE9 does not support offsetHeight when element is fixed
+      if (!sidebarHeight)
+        return;
+
+      window.addEventListener("scroll", (function()
+      {
+        scrollHandled = false;
+      }));
+
+      setInterval(function()
+      {
+        if (window.innerWidth <= desktopBreakpoint)
+        {
+          root.classList.add("mobile");
+          if (!root.classList.contains("open-sidebar") && !scrollHandled)
+          {
+            scrollHandled = handleScroll();
+          }
+        }
+        else
+        {
+          root.classList.remove("mobile");
+        }
+      }, 250);
+
+      function handleScroll()
+      {
+        var currentScroll = window.pageYOffset;
+        if (currentScroll > lastScrollTop)
+        {
+          root.classList.add("scrollDown");
+        }
+        else
+        {
+          root.classList.remove("scrollDown");
+        }
+        lastScrollTop = currentScroll;
+        return true;
+      }
+    }
+
+    initNavbarToggle();
+
   }, false);
+
 }());