github-mirror/BookStack
github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-05-01 00:24:05 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added tri-layout desktop sticky-scroll

Browse Source
This commit is contained in:
Dan Brown 2018-12-09 13:42:35 +00:00
parent e1474194db
commit 8fd8652bbf
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
3 changed files with 35 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
resources/assets/js/components/tri-layout.js
View File

@ -18,7 +18,9 @@ class TriLayout {
} }
updateLayout() { updateLayout() {
const newLayout = (window.innerWidth <= 1000) ? 'mobile' : 'desktop'; let newLayout = 'tablet';
if (window.innerWidth <= 1000) newLayout = 'mobile';
if (window.innerWidth >= 1400) newLayout = 'desktop';
if (newLayout === this.lastLayoutType) return; if (newLayout === this.lastLayoutType) return;
if (this.onDestroy) { if (this.onDestroy) {
@ -28,7 +30,7 @@ class TriLayout {
if (newLayout === 'desktop') { if (newLayout === 'desktop') {
this.setupDesktop(); this.setupDesktop();
} else { } else if (newLayout === 'mobile') {
this.setupMobile(); this.setupMobile();
} }
@ -50,7 +52,7 @@ class TriLayout {
} }
setupDesktop() { setupDesktop() {
// TODO //
} }
/** /**

29
resources/assets/sass/_grid.scss
View File

@ -55,9 +55,10 @@ body.flexbox {
display: grid; display: grid;
grid-template-columns: 1fr minmax(auto, 940px) 1fr; grid-template-columns: 1fr minmax(auto, 940px) 1fr;
grid-template-areas: "a b c"; grid-template-areas: "a b c";
grid-column-gap: $-xl; .tri-layout-right-contents, .tri-layout-left-contents {
padding-right: $-xl; padding-right: $-xl;
padding-left: $-xl; padding-left: $-xl;
}
.tri-layout-right { .tri-layout-right {
grid-area: c; grid-area: c;
} }
@ -85,18 +86,36 @@ body.flexbox {
"a b b"; "a b b";
grid-template-columns: 1fr 3fr; grid-template-columns: 1fr 3fr;
grid-template-rows: max-content min-content; grid-template-rows: max-content min-content;
padding-right: $-l;
.content-wrap.card { .content-wrap.card {
padding: $-l $-l; padding: $-l $-l;
} }
} }
} }
@include larger-than($xxl) {
.tri-layout-left-contents, .tri-layout-right-contents {
position: sticky;
top: $-m;
max-height: 100vh;
overflow-y: scroll;
overflow-x: visible;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
}
}
@include smaller-than($l) { @include smaller-than($l) {
.tri-layout-container { .tri-layout-container {
grid-template-areas: none; grid-template-areas: none;
grid-template-columns: 10% 90%; grid-template-columns: 10% 90%;
grid-column-gap: 0; grid-column-gap: 0;
padding-right: $-l; .tri-layout-left-contents, .tri-layout-right-contents {
padding-left: $-l; padding-left: $-m;
padding-right: $-m;
}
.tri-layout-right, .tri-layout-left { .tri-layout-right, .tri-layout-left {
opacity: 0.6; opacity: 0.6;
z-index: 0; z-index: 0;

8
resources/views/tri-layout.blade.php
View File

@ -11,7 +11,9 @@
<div class="tri-layout-container" tri-layout @yield('container-attrs') > <div class="tri-layout-container" tri-layout @yield('container-attrs') >
<div class="tri-layout-left print-hidden " id="sidebar"> <div class="tri-layout-left print-hidden " id="sidebar">
@yield('left') <div class="tri-layout-left-contents">
@yield('left')
</div>
</div> </div>
<div class="@yield('body-wrap-classes') tri-layout-middle"> <div class="@yield('body-wrap-classes') tri-layout-middle">
@ -19,7 +21,9 @@
</div> </div>
<div class="tri-layout-right print-hidden"> <div class="tri-layout-right print-hidden">
@yield('right') <div class="tri-layout-right-contents">
@yield('right')
</div>
</div> </div>
</div> </div>