github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-11-25 09:42:10 +08:00
Code Issues Actions 24 Packages Projects Releases Wiki Activity

Fixed firefox tri-layout grid issue and added tablet sticky sidebar

Browse Source 
- Fixed issue with original left-sidebar content being placed halfway
down the page.
- Added sticky sidebar to mid-size tablet layout, only for original left
sidebar items.

Fixes #1434.
This commit is contained in:
Dan Brown 2019-06-16 12:46:23 +01:00
parent f08668706f
commit bf1371d04c
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
3 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
resources/assets/js/components/page-display.js
View File

@ -23,8 +23,11 @@ class PageDisplay {
const sidebarPageNav = document.querySelector('.sidebar-page-nav');
if (sidebarPageNav) {
DOM.onChildEvent(sidebarPageNav, 'a', 'click', (event, child) => {
event.preventDefault();
window.components['tri-layout'][0].showContent();
this.goToText(child.getAttribute('href').substr(1));
const contentId = child.getAttribute('href').substr(1);
this.goToText(contentId);
window.history.pushState(null, null, '#' + contentId);
});
}
}

16
resources/assets/js/components/tri-layout.js
View File

@ -74,14 +74,14 @@ class TriLayout {
* Used by the page-display component.
*/
showContent() {
this.showTab('content');
this.showTab('content', false);
}
/**
* Show the given tab
* @param tabName
*/
showTab(tabName) {
showTab(tabName, scroll = true) {
this.scrollCache[this.lastTabShown] = document.documentElement.scrollTop;
// Set tab status
@ -96,12 +96,14 @@ class TriLayout {
this.elem.classList.toggle('show-info', showInfo);
// Set the scroll position from cache
const pageHeader = document.querySelector('header');
const defaultScrollTop = pageHeader.getBoundingClientRect().bottom;
document.documentElement.scrollTop = this.scrollCache[tabName] || defaultScrollTop;
setTimeout(() => {
if (scroll) {
const pageHeader = document.querySelector('header');
const defaultScrollTop = pageHeader.getBoundingClientRect().bottom;
document.documentElement.scrollTop = this.scrollCache[tabName] || defaultScrollTop;
}, 50);
setTimeout(() => {
document.documentElement.scrollTop = this.scrollCache[tabName] || defaultScrollTop;
}, 50);
}
this.lastTabShown = tabName;
}

11
resources/assets/sass/_layout.scss
View File

@ -219,12 +219,19 @@ body.flexbox {
@include smaller-than($xxl) {
.tri-layout-container {
grid-template-areas: "c b b"
"a b b";
"a b b"
". b b";
grid-template-columns: 1fr 3fr;
grid-template-rows: max-content min-content;
grid-template-rows: min-content min-content 1fr;
padding-right: $-l;
}
}
@include between($l, $xxl) {
.tri-layout-left {
position: sticky;
top: $-m;
}
}
@include larger-than($xxl) {
.tri-layout-left-contents, .tri-layout-right-contents {
padding: $-m;