Fixed a bug with breakpoints and sidebar height

material/base.html

@@ -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-cfcead01e1.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-9fbcbbadc4.css">
       {% if config.extra.palette %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-02ce7adcc2.palette.css">
       {% endif %}
@@ -128,7 +128,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ base_url }}/assets/javascripts/application-5964b4977f.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/application-ce981a9b53.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

@@ -94,9 +94,10 @@ export default class Application {
     }).listen()
 
     /* Component: header shadow toggle */
+    new Material.Event.MatchMedia("(min-width: 1220px)",
       new Material.Event.Listener(window, [
         "scroll", "resize", "orientationchange"
-    ], new Material.Header.Shadow("[data-md-component=container]")).listen()
+      ], new Material.Header.Shadow("[data-md-component=container]")))
 
     /* Component: tabs visibility toggle */
     new Material.Event.Listener(window, [
@@ -116,8 +117,13 @@ export default class Application {
         "scroll", "resize", "orientationchange"
       ], new Material.Sidebar.Position("[data-md-component=navigation]")))
 
-    /* Component: sidebar with table of contents */
+    /* Component: sidebar with table of contents - register two separate
-    new Material.Event.MatchMedia("(min-width: 960px)",
+       listeners, as the offset at the top might change */
+    new Material.Event.MatchMedia("(min-width: 960px) and (max-width: 1219px)",
+      new Material.Event.Listener(window, [
+        "scroll", "resize", "orientationchange"
+      ], new Material.Sidebar.Position("[data-md-component=toc]")))
+    new Material.Event.MatchMedia("(min-width: 1220px)",
       new Material.Event.Listener(window, [
         "scroll", "resize", "orientationchange"
       ], new Material.Sidebar.Position("[data-md-component=toc]")))

src/assets/javascripts/components/Material.js

@@ -26,7 +26,7 @@ import Nav from "./Material/Nav"
 import Search from "./Material/Search"
 import Sidebar from "./Material/Sidebar"
 import Source from "./Material/Source"
-import Tabs from "./Material/tabs"
+import Tabs from "./Material/Tabs"
 
 /* ----------------------------------------------------------------------------
  * Module

src/assets/stylesheets/layout/_header.scss

@@ -26,6 +26,8 @@
 
 // Application header (stays always on top)
 .md-header {
+  @include z-depth(3);
+
   position: fixed;
   top: 0;
   right: 0;
@@ -41,6 +43,10 @@
     @include z-depth(2);
   }
 
+  // [screen +]: Show shadow depending on scroll offset
+  @include break-from-device(screen) {
+    box-shadow: none;
+
     // Show and animate shadow
     &[data-md-state="shadow"] {
       @include z-depth(3);
@@ -49,6 +55,7 @@
         background-color 0.25s,
         box-shadow 0.25s;
     }
+  }
 
   // Hide for print
   @media print {

src/assets/stylesheets/layout/_tabs.scss

@@ -30,6 +30,11 @@
   background: $md-color-primary;
   overflow-x: scroll;
 
+  // [tablet -]: Hide tabs for tablet and below, as they don't make any sense
+  @include break-to-device(tablet) {
+    display: none;
+  }
+
   // List of items
   &__list {
     margin: 0;