mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-07-21 09:22:09 +03:00
Layout: Added scroll fade to the sidebars
This commit is contained in:
@ -5,6 +5,7 @@ export class TriLayout extends Component {
|
|||||||
setup() {
|
setup() {
|
||||||
this.container = this.$refs.container;
|
this.container = this.$refs.container;
|
||||||
this.tabs = this.$manyRefs.tab;
|
this.tabs = this.$manyRefs.tab;
|
||||||
|
this.sidebarScrollContainers = this.$manyRefs.sidebarScrollContainer;
|
||||||
|
|
||||||
this.lastLayoutType = 'none';
|
this.lastLayoutType = 'none';
|
||||||
this.onDestroy = null;
|
this.onDestroy = null;
|
||||||
@ -22,6 +23,8 @@ export class TriLayout extends Component {
|
|||||||
window.addEventListener('resize', () => {
|
window.addEventListener('resize', () => {
|
||||||
this.updateLayout();
|
this.updateLayout();
|
||||||
}, {passive: true});
|
}, {passive: true});
|
||||||
|
|
||||||
|
this.setupSidebarScrollHandlers();
|
||||||
}
|
}
|
||||||
|
|
||||||
updateLayout() {
|
updateLayout() {
|
||||||
@ -108,4 +111,28 @@ export class TriLayout extends Component {
|
|||||||
this.lastTabShown = tabName;
|
this.lastTabShown = tabName;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setupSidebarScrollHandlers() {
|
||||||
|
for (const sidebar of this.sidebarScrollContainers) {
|
||||||
|
sidebar.addEventListener('scroll', () => this.handleSidebarScroll(sidebar), {
|
||||||
|
passive: true,
|
||||||
|
});
|
||||||
|
this.handleSidebarScroll(sidebar);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
for (const sidebar of this.sidebarScrollContainers) {
|
||||||
|
this.handleSidebarScroll(sidebar);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
handleSidebarScroll(sidebar) {
|
||||||
|
const scrollable = sidebar.clientHeight !== sidebar.scrollHeight;
|
||||||
|
const atTop = sidebar.scrollTop === 0;
|
||||||
|
const atBottom = (sidebar.scrollTop + sidebar.clientHeight) === sidebar.scrollHeight;
|
||||||
|
|
||||||
|
sidebar.parentElement.classList.toggle('scroll-away-from-top', !atTop && scrollable);
|
||||||
|
sidebar.parentElement.classList.toggle('scroll-away-from-bottom', !atBottom && scrollable);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -389,10 +389,12 @@ body.flexbox {
|
|||||||
.tri-layout-right {
|
.tri-layout-right {
|
||||||
grid-area: c;
|
grid-area: c;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
.tri-layout-left {
|
.tri-layout-left {
|
||||||
grid-area: a;
|
grid-area: a;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include mixins.larger-than(vars.$bp-xxl) {
|
@include mixins.larger-than(vars.$bp-xxl) {
|
||||||
@ -523,4 +525,26 @@ body.flexbox {
|
|||||||
margin-inline-start: 0;
|
margin-inline-start: 0;
|
||||||
margin-inline-end: 0;
|
margin-inline-end: 0;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Scroll Indicators
|
||||||
|
*/
|
||||||
|
.scroll-away-from-top:before,
|
||||||
|
.scroll-away-from-bottom:after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
@include mixins.lightDark(color, #F2F2F2, #111);
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
background: linear-gradient(to bottom, currentColor, transparent);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.scroll-away-from-bottom:after {
|
||||||
|
top: auto;
|
||||||
|
bottom: 0;
|
||||||
|
background: linear-gradient(to top, currentColor, transparent);
|
||||||
}
|
}
|
@ -28,15 +28,15 @@
|
|||||||
<div refs="tri-layout@container" class="tri-layout-container" @yield('container-attrs') >
|
<div refs="tri-layout@container" class="tri-layout-container" @yield('container-attrs') >
|
||||||
|
|
||||||
<div class="tri-layout-sides print-hidden">
|
<div class="tri-layout-sides print-hidden">
|
||||||
<div class="tri-layout-sides-content">
|
<div refs="tri-layout@sidebar-scroll-container" class="tri-layout-sides-content">
|
||||||
<div class="tri-layout-right print-hidden">
|
<div class="tri-layout-right print-hidden">
|
||||||
<aside class="tri-layout-right-contents">
|
<aside refs="tri-layout@sidebar-scroll-container" class="tri-layout-right-contents">
|
||||||
@yield('right')
|
@yield('right')
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="tri-layout-left print-hidden" id="sidebar">
|
<div class="tri-layout-left print-hidden" id="sidebar">
|
||||||
<aside class="tri-layout-left-contents">
|
<aside refs="tri-layout@sidebar-scroll-container" class="tri-layout-left-contents">
|
||||||
@yield('left')
|
@yield('left')
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
|
Reference in New Issue
Block a user