webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-21 09:22:09 +03:00
Code Activity

Layout: Added scroll fade to the sidebars

Browse Source
This commit is contained in:
Dan Brown
2025-06-30 14:10:48 +01:00
parent 6045aff33a
commit 9186e77d27
3 changed files with 54 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
resources/js/components/tri-layout.js
View File

@ -5,6 +5,7 @@ export class TriLayout extends Component {
setup() {
this.container = this.$refs.container;
this.tabs = this.$manyRefs.tab;
this.sidebarScrollContainers = this.$manyRefs.sidebarScrollContainer;
this.lastLayoutType = 'none';
this.onDestroy = null;
@ -22,6 +23,8 @@ export class TriLayout extends Component {
window.addEventListener('resize', () => {
this.updateLayout();
}, {passive: true});
this.setupSidebarScrollHandlers();
}
updateLayout() {
@ -108,4 +111,28 @@ export class TriLayout extends Component {
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);
}
}

24
resources/sass/_layout.scss
View File

@ -389,10 +389,12 @@ body.flexbox {
.tri-layout-right {
grid-area: c;
min-width: 0;
position: relative;
}
.tri-layout-left {
grid-area: a;
min-width: 0;
position: relative;
}
@include mixins.larger-than(vars.$bp-xxl) {
@ -523,4 +525,26 @@ body.flexbox {
margin-inline-start: 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);
}

6
resources/views/layouts/tri.blade.php
View File

@ -28,15 +28,15 @@
<div refs="tri-layout@container" class="tri-layout-container" @yield('container-attrs') >
<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">
<aside class="tri-layout-right-contents">
<aside refs="tri-layout@sidebar-scroll-container" class="tri-layout-right-contents">
@yield('right')
</aside>
</div>
<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')
</aside>
</div>