Header UI fixes (#2371)

* Revert "Fix header contents moving when opening modal (#2131)"
* Fix header contents moving when modal opened/closed.

Conditionally apply the navbar-fixed-top class only when needed, so that we can take advantage of it without always having the navbar in position:fixed, as was done in the previous solution. That resulted in a clash with custom headers.

* Show header on refresh of scrolled page

Due to some magic in Mithril 0.1's context:retain flag, some DOM elements were cached across page reloads. Since that has been eliminated, if we refresh the page and we are scrolled down, the "affix" class which makes the header fixed (and as a result, visible) isn't applied until the first scroll. We fix this by running ScrollListener.update() immediately to set initial navbar state.

js/src/common/Application.js

@@ -198,13 +198,19 @@ export default class Application {
     m.route(document.getElementById('content'), basePath + '/', mapRoutes(this.routes, basePath));
 
     // Add a class to the body which indicates that the page has been scrolled
-    // down.
-    new ScrollListener((top) => {
+    // down. When this happens, we'll add classes to the header and app body
+    // which will set the navbar's position to fixed. We don't want to always
+    // have it fixed, as that could overlap with custom headers.
+    const scrollListener = new ScrollListener((top) => {
       const $app = $('#app');
       const offset = $app.offset().top;
 
       $app.toggleClass('affix', top >= offset).toggleClass('scrolled', top > offset);
-    }).start();
+      $('.App-header').toggleClass('navbar-fixed-top', top >= offset);
+    });
+
+    scrollListener.start();
+    scrollListener.update();
 
     $(() => {
       $('body').addClass('ontouchstart' in window ? 'touch' : 'no-touch');

less/common/App.less

@@ -236,12 +236,16 @@
   .App-header {
     padding: 8px;
     height: @header-height;
-    position: fixed;
+    position: absolute;
     top: 0;
     left: 0;
     right: 0;
     z-index: @zindex-header;
 
+    .affix & {
+      position: fixed;
+    }
+
     & when (@config-colored-header = true) {
       .light-contents(@header-color, @header-control-bg, @header-control-color);
     }

views/frontend/admin.blade.php

@@ -4,7 +4,7 @@
 
     <div id="drawer" class="App-drawer">
 
-        <header id="header" class="App-header navbar-fixed-top">
+        <header id="header" class="App-header">
             <div id="header-navigation" class="Header-navigation"></div>
             <div class="container">
                 <h1 class="Header-title">

views/frontend/forum.blade.php

@@ -6,7 +6,7 @@
 
     <div id="drawer" class="App-drawer">
 
-        <header id="header" class="App-header navbar-fixed-top">
+        <header id="header" class="App-header">
             <div id="header-navigation" class="Header-navigation"></div>
             <div class="container">
                 <h1 class="Header-title">