Refactored sidebar/container spacing for arbitrary height elements above content

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.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-f3ab63f78a.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-5f7edede88.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-2afe21e0b2.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/application-62dc17fe98.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/components/Material/Sidebar/Position.js

@@ -46,7 +46,7 @@ export default class Position {
    * Initialize sidebar state
    */
   setup() {
-    this.offset_ = this.el_.offsetTop - this.parent_.offsetTop
+    this.offset_ = this.el_.offsetTop - 56
     this.update()
   }
 
@@ -55,18 +55,18 @@ export default class Position {
    *
    * The inner height of the window (= the visible area) is the maximum
    * possible height for the stretching sidebar. This height must be deducted
-   * by the top offset of the parent container, which accounts for the fixed
+   * by the height of the fixed header (56px). Depending on the page y-offset,
-   * header, setting the baseline. Depending on the page y-offset, the top
+   * the top offset of the sidebar must be taken into account, as well as the
-   * offset of the sidebar must be taken into account, as well as the case
+   * case where the window is scrolled beyond the sidebar container.
-   * where the window is scrolled beyond the sidebar container.
    */
   update() {
     const offset  = window.pageYOffset
     const visible = window.innerHeight
 
-    /* Calculate bounds of sidebar container  */
+    /* Set bounds of sidebar container - must be calculated on every run, as
+       the height of the content might change due to loading images etc. */
     this.bounds_ = {
-      top: this.parent_.offsetTop,
+      top: 56,
       bottom: this.parent_.offsetTop + this.parent_.offsetHeight
     }
 

src/assets/stylesheets/layout/_base.scss

@@ -93,6 +93,7 @@ hr {
   display: table;
   width: 100%;
   height: 100%;
+  padding-top: 5.6rem;
   table-layout: fixed;
 }
 
@@ -103,7 +104,6 @@ hr {
 
   // Top-spacing to account for header and some additional padding
   &__inner {
-    margin-top: 5.6rem;
     padding-top: 2.4rem + 0.6rem;
     overflow: auto;