Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-01 01:36:00 -04:00
Code Issues 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'); const sidebarPageNav = document.querySelector('.sidebar-page-nav');
if (sidebarPageNav) { if (sidebarPageNav) {
DOM.onChildEvent(sidebarPageNav, 'a', 'click', (event, child) => { DOM.onChildEvent(sidebarPageNav, 'a', 'click', (event, child) => {
event.preventDefault();
window.components['tri-layout'][0].showContent(); 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);
}); });
} }
} }

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

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

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

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