From 1d2f0ca407570c51ed3d256ae6740ed7d8974b2a Mon Sep 17 00:00:00 2001 From: Alexander Skvortsov <38059171+askvortsov1@users.noreply.github.com> Date: Fri, 9 Oct 2020 19:05:53 -0400 Subject: [PATCH] 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 | 12 +++++++++--- less/common/App.less | 6 +++++- views/frontend/admin.blade.php | 2 +- views/frontend/forum.blade.php | 2 +- 4 files changed, 16 insertions(+), 6 deletions(-) diff --git a/js/src/common/Application.js b/js/src/common/Application.js index 4218e1b830..1fb2017f28 100644 --- a/js/src/common/Application.js +++ b/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'); diff --git a/less/common/App.less b/less/common/App.less index eaef1d2cb9..b20588ac84 100644 --- a/less/common/App.less +++ b/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); } diff --git a/views/frontend/admin.blade.php b/views/frontend/admin.blade.php index 38e29fb818..56a6aa2b9c 100644 --- a/views/frontend/admin.blade.php +++ b/views/frontend/admin.blade.php @@ -4,7 +4,7 @@
-