mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-11-22 09:06:40 +08:00
Fixed firefox tri-layout grid issue and added tablet sticky sidebar
- 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:
parent
f08668706f
commit
bf1371d04c
|
@ -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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue
Block a user