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