constructor(elem) {
this.elem = elem;
- this.middle = elem.querySelector('.tri-layout-middle');
- this.right = elem.querySelector('.tri-layout-right');
- this.left = elem.querySelector('.tri-layout-left');
this.lastLayoutType = 'none';
this.onDestroy = null;
+ this.scrollCache = {
+ 'content': 0,
+ 'info': 0,
+ };
+ this.lastTabShown = 'content';
+ // Bind any listeners
+ this.mobileTabClick = this.mobileTabClick.bind(this);
+ // Watch layout changes
this.updateLayout();
window.addEventListener('resize', event => {
this.updateLayout();
- });
+ }, {passive: true});
}
updateLayout() {
}
setupMobile() {
- const mobileSidebarClickBound = this.mobileSidebarClick.bind(this);
- const mobileContentClickBound = this.mobileContentClick.bind(this);
- this.left.addEventListener('click', mobileSidebarClickBound);
- this.right.addEventListener('click', mobileSidebarClickBound);
- this.middle.addEventListener('click', mobileContentClickBound);
+ const layoutTabs = document.querySelectorAll('[tri-layout-mobile-tab]');
+ for (let tab of layoutTabs) {
+ tab.addEventListener('click', this.mobileTabClick);
+ }
this.onDestroy = () => {
- this.left.removeEventListener('click', mobileSidebarClickBound);
- this.right.removeEventListener('click', mobileSidebarClickBound);
- this.middle.removeEventListener('click', mobileContentClickBound);
+ for (let tab of layoutTabs) {
+ tab.removeEventListener('click', this.mobileTabClick);
+ }
}
}
//
}
- /**
- * Slide the main content back into view if clicked and
- * currently slid out of view.
- * @param event
- */
- mobileContentClick(event) {
- this.elem.classList.remove('mobile-open');
- }
/**
- * On sidebar click, Show the content by sliding the main content out.
+ * Action to run when the mobile info toggle bar is clicked/tapped
* @param event
*/
- mobileSidebarClick(event) {
- if (this.elem.classList.contains('mobile-open')) {
- this.elem.classList.remove('mobile-open');
- } else {
- event.preventDefault();
- event.stopPropagation();
- this.elem.classList.add('mobile-open');
+ mobileTabClick(event) {
+ const tab = event.target.getAttribute('tri-layout-mobile-tab');
+ this.scrollCache[this.lastTabShown] = document.documentElement.scrollTop;
+
+ // Set tab status
+ const activeTabs = document.querySelectorAll('.tri-layout-mobile-tab.active');
+ for (let tab of activeTabs) {
+ tab.classList.remove('active');
}
+ event.target.classList.add('active');
+
+ // Toggle section
+ const showInfo = (tab === 'info');
+ 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[tab] || defaultScrollTop;
+ setTimeout(() => {
+ document.documentElement.scrollTop = this.scrollCache[tab] || defaultScrollTop;
+ }, 50);
+
+ this.lastTabShown = tab;
}
}
@include smaller-than($l) {
header .grid {
grid-template-columns: 1fr;
+ grid-row-gap: 0;
}
}
header {
position: relative;
display: block;
- z-index: 2;
+ z-index: 6;
top: 0;
background-color: $primary-dark;
color: #fff;
}
}
+.tri-layout-mobile-tabs {
+ position: sticky;
+ top: 0;
+ z-index: 5;
+ background-color: #FFF;
+ border-bottom: 1px solid #DDD;
+ box-shadow: $bs-card;
+}
+.tri-layout-mobile-tab {
+ text-align: center;
+ border-bottom: 3px solid #BBB;
+ &:first-child {
+ border-right: 1px solid #DDD;
+ }
+ &.active {
+ border-bottom-color: currentColor;
+ }
+}
+
.breadcrumbs {
display: flex;
flex-direction: row;
}
}
+@include smaller-than($l) {
+ .breadcrumbs .icon-list-item {
+ padding: $-xs;
+ > span + span {
+ display: none;
+ }
+ > span:first-child {
+ margin-right: 0;
+ }
+ }
+}
+
.breadcrumb-listing {
position: relative;
.breadcrumb-listing-toggle {
&.v-center {
align-items: center;
}
+ &.no-gap {
+ grid-row-gap: 0;
+ grid-column-gap: 0;
+ }
}
@include smaller-than($m) {
.grid.third {
grid-template-columns: 1fr 1fr;
}
- .grid.half, .grid.left-focus, .grid.right-focus {
+ .grid.half:not(.no-break), .grid.left-focus:not(.no-break), .grid.right-focus:not(.no-break) {
grid-template-columns: 1fr;
}
.grid.half.collapse-xs {
@include smaller-than($l) {
.tri-layout-container {
grid-template-areas: none;
- grid-template-columns: 10% 90%;
+ grid-template-columns: 1fr;
grid-column-gap: 0;
+ padding-right: $-xs;
+ padding-left: $-xs;
.tri-layout-left-contents, .tri-layout-right-contents {
padding-left: $-m;
padding-right: $-m;
z-index: 0;
}
.tri-layout-left > *, .tri-layout-right > * {
+ display: none;
pointer-events: none;
}
- .tri-layout-right, .tri-layout-left, .tri-layout-middle {
+ .tri-layout-left, .tri-layout-right {
grid-area: none;
- grid-column: 1/3;
+ grid-column: 1/1;
grid-row: 1;
+ padding-top: 0 !important;
}
.tri-layout-middle {
- grid-row: 1/3;
- grid-column: 2/3;
+ grid-area: none;
+ grid-row: 3;
+ grid-column: 1/1;
z-index: 1;
+ overflow: hidden;
transition: transform ease-in-out 240ms;
}
.tri-layout-left {
grid-row: 2;
}
- &.mobile-open {
+ &.show-info {
overflow: hidden;
.tri-layout-middle {
- transform: translateX(90%);
+ display: none;
}
.tri-layout-right > *, .tri-layout-left > * {
+ display: block;
pointer-events: auto;
}
}
}
}
+@include larger-than($l) {
+ .tri-layout-mobile-tabs {
+ display: none;
+ }
+}
+
+@include smaller-than($m) {
+ .tri-layout-container {
+ margin-left: 0;
+ margin-right: 0;
+ }
+}
.tri-layout-left-contents > div, .tri-layout-right-contents > div {
opacity: 0.6;
projects / bookstack / commitdiff