mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-09-06 01:22:23 +00:00
Added tri-layout desktop sticky-scroll
This commit is contained in:
parent
e1474194db
commit
8fd8652bbf
@ -18,7 +18,9 @@ class TriLayout {
|
||||
}
|
||||
|
||||
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 (this.onDestroy) {
|
||||
@ -28,7 +30,7 @@ class TriLayout {
|
||||
|
||||
if (newLayout === 'desktop') {
|
||||
this.setupDesktop();
|
||||
} else {
|
||||
} else if (newLayout === 'mobile') {
|
||||
this.setupMobile();
|
||||
}
|
||||
|
||||
@ -50,7 +52,7 @@ class TriLayout {
|
||||
}
|
||||
|
||||
setupDesktop() {
|
||||
// TODO
|
||||
//
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -55,9 +55,10 @@ body.flexbox {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr minmax(auto, 940px) 1fr;
|
||||
grid-template-areas: "a b c";
|
||||
grid-column-gap: $-xl;
|
||||
padding-right: $-xl;
|
||||
padding-left: $-xl;
|
||||
.tri-layout-right-contents, .tri-layout-left-contents {
|
||||
padding-right: $-xl;
|
||||
padding-left: $-xl;
|
||||
}
|
||||
.tri-layout-right {
|
||||
grid-area: c;
|
||||
}
|
||||
@ -85,18 +86,36 @@ body.flexbox {
|
||||
"a b b";
|
||||
grid-template-columns: 1fr 3fr;
|
||||
grid-template-rows: max-content min-content;
|
||||
padding-right: $-l;
|
||||
.content-wrap.card {
|
||||
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) {
|
||||
.tri-layout-container {
|
||||
grid-template-areas: none;
|
||||
grid-template-columns: 10% 90%;
|
||||
grid-column-gap: 0;
|
||||
padding-right: $-l;
|
||||
padding-left: $-l;
|
||||
.tri-layout-left-contents, .tri-layout-right-contents {
|
||||
padding-left: $-m;
|
||||
padding-right: $-m;
|
||||
}
|
||||
.tri-layout-right, .tri-layout-left {
|
||||
opacity: 0.6;
|
||||
z-index: 0;
|
||||
|
@ -11,7 +11,9 @@
|
||||
<div class="tri-layout-container" tri-layout @yield('container-attrs') >
|
||||
|
||||
<div class="tri-layout-left print-hidden " id="sidebar">
|
||||
@yield('left')
|
||||
<div class="tri-layout-left-contents">
|
||||
@yield('left')
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="@yield('body-wrap-classes') tri-layout-middle">
|
||||
@ -19,7 +21,9 @@
|
||||
</div>
|
||||
|
||||
<div class="tri-layout-right print-hidden">
|
||||
@yield('right')
|
||||
<div class="tri-layout-right-contents">
|
||||
@yield('right')
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user