Revert last PR - still some problems to tackle

material/base.html

@@ -31,7 +31,7 @@
       {% endif %}
     {% endblock %}
     {% block libs %}
-      <script src="{{ base_url }}/assets/javascripts/modernizr-facb31f4a3.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/modernizr-0d3dc73294.js"></script>
     {% endblock %}
     {% block fonts %}
       {% if config.extra.font != "none" %}
@@ -45,7 +45,7 @@
       <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-5acf1a644d.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-f3ab63f78a.css">
       {% if config.extra.palette %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-02ce7adcc2.palette.css">
       {% endif %}
@@ -124,7 +124,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ base_url }}/assets/javascripts/application-a14c00d87b.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/application-16f434a21a.js"></script>
       <script>var config={url:{base:"{{ base_url }}"}},app=new Application(config);app.initialize()</script>
       {% for path in extra_javascript %}
         <script src="{{ path }}"></script>

src/assets/javascripts/application.js

@@ -93,6 +93,13 @@ export default class Application {
       }
     }).listen()
 
+    /* Component: sidebar container */
+    if (!Modernizr.csscalc)
+      new Material.Event.MatchMedia("(min-width: 960px)",
+        new Material.Event.Listener(window, [
+          "resize", "orientationchange"
+        ], new Material.Sidebar.Container("[data-md-component=container]")))
+
     /* Component: sidebar with navigation */
     new Material.Event.MatchMedia("(min-width: 1220px)",
       new Material.Event.Listener(window, [

src/assets/javascripts/components/Material/Sidebar.js

@@ -20,6 +20,7 @@
  * IN THE SOFTWARE.
  */
 
+import Container from "./Sidebar/Container"
 import Position from "./Sidebar/Position"
 
 /* ----------------------------------------------------------------------------
@@ -27,5 +28,6 @@ import Position from "./Sidebar/Position"
  * ------------------------------------------------------------------------- */
 
 export default {
+  Container,
   Position
 }

src/assets/javascripts/components/Material/Sidebar/Container.js

@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) 2016-2017 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+/* ----------------------------------------------------------------------------
+ * Class
+ * ------------------------------------------------------------------------- */
+
+export default class Container {
+
+  /**
+   * Monitor window height to stretch sidebar container to viewport
+   *
+   * @constructor
+   * @param {(string|HTMLElement)} el - Selector or HTML element
+   */
+  constructor(el) {
+    this.el_ = (typeof el === "string")
+      ? document.querySelector(el)
+      : el
+
+    /* Retrieve parent node */
+    this.parent_ = this.el_.parentNode
+  }
+
+  /**
+   * Initialize container state
+   */
+  setup() {
+    this.update()
+  }
+
+  /**
+   * Update minimum height
+   */
+  update() {
+    const height = this.parent_.offsetHeight - this.el_.offsetTop
+    this.el_.style.minHeight = `${height}px`
+  }
+
+  /**
+   * Reset minimum height
+   */
+  reset() {
+    this.el_.style.minHeight = ""
+  }
+}

src/assets/stylesheets/layout/_base.scss

@@ -106,6 +106,23 @@ hr {
     margin-top: 5.6rem;
     padding-top: 2.4rem + 0.6rem;
     overflow: auto;
+
+    // If the browser supports calc(), no JavaScript is necessary
+    .csscalc & {
+      min-height: calc(100% - #{5.6rem - 3rem});
+
+      // Hack: Firefox doesn't correctly calculate min-height, as it takes the
+      // top margin into account which leads to the container overflowing its
+      // parent. For this reason we use this hack here to target only Firefox
+      // and see if we can find a better solution later.
+
+      // stylelint-disable-next-line function-url-quotes
+      @-moz-document url-prefix() {
+        & {
+          min-height: calc(100% - 5.6rem);
+        }
+      }
+    }
   }
 }