colin
/
bookstack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'LawssssCat/development' into development

This commit is contained in:
Dan Brown 2023-10-06 12:01:18 +01:00
parent 1267068d9c 031067745b
commit 2e2272343b
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
2 changed files with 98 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
resources/sass/_layout.scss
View File

@ -354,44 +354,36 @@ body.flexbox {
grid-template-columns: 1fr 4fr 1fr; grid-template-columns: 1fr 4fr 1fr;
grid-template-areas: "a b c"; grid-template-areas: "a b c";
grid-column-gap: $-xl; grid-column-gap: $-xl;
.tri-layout-right { position: relative;
grid-area: c;
min-width: 0;
}
.tri-layout-left {
grid-area: a;
min-width: 0;
}
.tri-layout-middle {
grid-area: b;
padding-top: $-m;
min-width: 0;
}
} }
@include smaller-than($xxl) { .tri-layout-sides {
.tri-layout-container { grid-column-start: a;
grid-template-areas: "c b b" grid-column-end: c;
"a b b" grid-row: 1;
". b b"; min-width: 0;
grid-template-columns: 1fr 3fr; z-index: 4;
grid-template-rows: min-content min-content 1fr;
padding-inline-end: $-l;
}
} }
@include between($xxl, $xxxl) { .tri-layout-sides-content {
.tri-layout-container { display: grid;
grid-template-columns: 1fr calc(940px + (2 * $-m)) 1fr; grid-template-areas: "a b c";
grid-column-gap: $-s; grid-template-columns: 1fr 4fr 1fr;
margin-inline-start: $-m; height: 100%;
margin-inline-end: $-m;
}
} }
@include between($l, $xxl) { .tri-layout-middle {
.tri-layout-left { grid-area: b;
position: sticky; padding-top: $-m;
top: $-m; min-width: 0;
} z-index: 5;
} }
.tri-layout-right {
grid-area: c;
min-width: 0;
}
.tri-layout-left {
grid-area: a;
min-width: 0;
}
@include larger-than($xxl) { @include larger-than($xxl) {
.tri-layout-left-contents, .tri-layout-right-contents { .tri-layout-left-contents, .tri-layout-right-contents {
padding: $-xl $-m; padding: $-xl $-m;
@ -413,7 +405,62 @@ body.flexbox {
margin: 0 auto; margin: 0 auto;
} }
} }
@include between($xxl, $xxxl) {
.tri-layout-sides-content, .tri-layout-container {
grid-template-columns: 1fr calc(940px + (2 * $-m)) 1fr;
}
.tri-layout-container {
grid-column-gap: $-s;
margin-inline-start: $-m;
margin-inline-end: $-m;
}
}
@include smaller-than($xxl) {
.tri-layout-container {
grid-template-areas: "a b b";
grid-template-columns: 1fr 3fr;
grid-template-rows: min-content min-content 1fr;
padding-inline-end: $-l;
}
.tri-layout-sides {
grid-column-start: a;
grid-column-end: a;
}
.tri-layout-sides-content {
display: block;
}
}
@include between($l, $xxl) {
.tri-layout-sides-content {
position: sticky;
top: 0;
max-height: 100vh;
min-height: 50vh;
overflow-y: scroll;
overflow-x: hidden;
height: 100%;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
}
}
@include larger-than($l) {
.tri-layout-mobile-tabs {
display: none;
}
.tri-layout-left-contents > *, .tri-layout-right-contents > * {
@include lightDark(opacity, 0.6, 0.75);
transition: opacity ease-in-out 120ms;
&:hover, &:focus-within {
opacity: 1 !important;
}
@media (prefers-contrast: more) {
opacity: 1 !important;
}
}
}
@include smaller-than($l) { @include smaller-than($l) {
.tri-layout-container { .tri-layout-container {
grid-template-areas: none; grid-template-areas: none;
@ -421,18 +468,16 @@ body.flexbox {
grid-column-gap: 0; grid-column-gap: 0;
padding-inline-end: $-xs; padding-inline-end: $-xs;
padding-inline-start: $-xs; padding-inline-start: $-xs;
.tri-layout-left-contents, .tri-layout-right-contents { .tri-layout-sides {
padding-inline-start: $-m; padding-inline-start: $-m;
padding-inline-end: $-m; padding-inline-end: $-m;
grid-column: 1/1;
} }
.tri-layout-left > *, .tri-layout-right > * { .tri-layout-left > *, .tri-layout-right > * {
display: none; display: none;
pointer-events: none; pointer-events: none;
} }
.tri-layout-left, .tri-layout-right { .tri-layout-left, .tri-layout-right {
grid-area: none;
grid-column: 1/1;
grid-row: 1;
padding-top: 0 !important; padding-top: 0 !important;
} }
.tri-layout-middle { .tri-layout-middle {
@ -458,21 +503,6 @@ body.flexbox {
} }
} }
} }
@include larger-than($l) {
.tri-layout-mobile-tabs {
display: none;
}
.tri-layout-left-contents > *, .tri-layout-right-contents > * {
@include lightDark(opacity, 0.6, 0.75);
transition: opacity ease-in-out 120ms;
&:hover, &:focus-within {
opacity: 1 !important;
}
@media (prefers-contrast: more) {
opacity: 1 !important;
}
}
}
@include smaller-than($m) { @include smaller-than($m) {
.tri-layout-container { .tri-layout-container {

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

@ -27,10 +27,20 @@
<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-left print-hidden" id="sidebar"> <div class="tri-layout-sides print-hidden">
<aside class="tri-layout-left-contents"> <div class="tri-layout-sides-content">
@yield('left') <div class="tri-layout-right print-hidden">
</aside> <aside class="tri-layout-right-contents">
@yield('right')
</aside>
</div>
<div class="tri-layout-left print-hidden" id="sidebar">
<aside class="tri-layout-left-contents">
@yield('left')
</aside>
</div>
</div>
</div> </div>
<div class="@yield('body-wrap-classes') tri-layout-middle"> <div class="@yield('body-wrap-classes') tri-layout-middle">
@ -38,12 +48,6 @@
@yield('body') @yield('body')
</div> </div>
</div> </div>
<div class="tri-layout-right print-hidden">
<aside class="tri-layout-right-contents">
@yield('right')
</aside>
</div>
</div> </div>
@stop @stop