mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-07-15 22:06:24 +02:00
Code Issues Releases Wiki Activity

Header UI fixes (#2371)

Browse Source 
* 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.
This commit is contained in:
Alexander Skvortsov
2020-10-09 19:05:53 -04:00
committed by GitHub
parent c843f4273c
commit 374d958dfb
4 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
framework/core/js/src/common/Application.js
View File

@ -198,13 +198,19 @@ export default class Application {
m.route(document.getElementById('content'), basePath + '/', mapRoutes(this.routes, basePath)); m.route(document.getElementById('content'), basePath + '/', mapRoutes(this.routes, basePath));
// Add a class to the body which indicates that the page has been scrolled // Add a class to the body which indicates that the page has been scrolled
// down. // down. When this happens, we'll add classes to the header and app body
new ScrollListener((top) => { // 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 $app = $('#app');
const offset = $app.offset().top; const offset = $app.offset().top;
$app.toggleClass('affix', top >= offset).toggleClass('scrolled', top > offset); $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'); $('body').addClass('ontouchstart' in window ? 'touch' : 'no-touch');

6
framework/core/less/common/App.less
View File

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

2
framework/core/views/frontend/admin.blade.php
View File

@ -4,7 +4,7 @@
<div id="drawer" class="App-drawer"> <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 id="header-navigation" class="Header-navigation"></div>
<div class="container"> <div class="container">
<h1 class="Header-title"> <h1 class="Header-title">

2
framework/core/views/frontend/forum.blade.php
View File

@ -6,7 +6,7 @@
<div id="drawer" class="App-drawer"> <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 id="header-navigation" class="Header-navigation"></div>
<div class="container"> <div class="container">
<h1 class="Header-title"> <h1 class="Header-title">