mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-01-17 22:29:15 +01: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 bb69c3bd57
commit 1d2f0ca407
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
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));
// 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');

6
less/common/App.less
View File

@ -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);
}

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

@ -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">

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

@ -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">