From 588ed785d26ce66af0ba709e71a5c1323519c29e Mon Sep 17 00:00:00 2001 From: lawsssscat Date: Tue, 19 Sep 2023 22:12:33 +0800 Subject: [PATCH 1/2] fix Sidebar scrolling at mid-range sceen --- resources/sass/_layout.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/resources/sass/_layout.scss b/resources/sass/_layout.scss index 503298fcc..ac0e96a90 100644 --- a/resources/sass/_layout.scss +++ b/resources/sass/_layout.scss @@ -391,6 +391,18 @@ body.flexbox { position: sticky; top: $-m; } + .tri-layout-left-contents { + position: sticky; + top: 0; + max-height: 100vh; + overflow-y: scroll; + height: 100%; + scrollbar-width: none; + -ms-overflow-style: none; + &::-webkit-scrollbar { + display: none; + } + } } @include larger-than($xxl) { .tri-layout-left-contents, .tri-layout-right-contents { From 031067745b9e95a39639f9ff165d71331370bf0b Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Fri, 6 Oct 2023 11:57:55 +0100 Subject: [PATCH 2/2] Layout: Restructured tri-layout for sidebar control Restructured tri-layout grid system, so the sidebars are contained in their own child grid system, mimicking the parent grid, so we can treat them as part of the same parent scroll container at smaller screen sizes for consistent scroll/sticky behavior. Tested on Firefox, Chromium, Gnome Web and Safari (MacOS). For #4394 Changes made during review of #4562 --- resources/sass/_layout.scss | 150 ++++++++++++++------------ resources/views/layouts/tri.blade.php | 24 +++-- 2 files changed, 98 insertions(+), 76 deletions(-) diff --git a/resources/sass/_layout.scss b/resources/sass/_layout.scss index ac0e96a90..d157ffdc3 100644 --- a/resources/sass/_layout.scss +++ b/resources/sass/_layout.scss @@ -354,56 +354,36 @@ body.flexbox { grid-template-columns: 1fr 4fr 1fr; grid-template-areas: "a b c"; grid-column-gap: $-xl; - .tri-layout-right { - 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; - } + position: relative; } -@include smaller-than($xxl) { - .tri-layout-container { - grid-template-areas: "c b b" - "a b b" - ". 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: c; + grid-row: 1; + min-width: 0; + z-index: 4; } -@include between($xxl, $xxxl) { - .tri-layout-container { - grid-template-columns: 1fr calc(940px + (2 * $-m)) 1fr; - grid-column-gap: $-s; - margin-inline-start: $-m; - margin-inline-end: $-m; - } +.tri-layout-sides-content { + display: grid; + grid-template-areas: "a b c"; + grid-template-columns: 1fr 4fr 1fr; + height: 100%; } -@include between($l, $xxl) { - .tri-layout-left { - position: sticky; - top: $-m; - } - .tri-layout-left-contents { - position: sticky; - top: 0; - max-height: 100vh; - overflow-y: scroll; - height: 100%; - scrollbar-width: none; - -ms-overflow-style: none; - &::-webkit-scrollbar { - display: none; - } - } +.tri-layout-middle { + grid-area: b; + padding-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) { .tri-layout-left-contents, .tri-layout-right-contents { padding: $-xl $-m; @@ -425,7 +405,62 @@ body.flexbox { 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) { .tri-layout-container { grid-template-areas: none; @@ -433,18 +468,16 @@ body.flexbox { grid-column-gap: 0; padding-inline-end: $-xs; padding-inline-start: $-xs; - .tri-layout-left-contents, .tri-layout-right-contents { + .tri-layout-sides { padding-inline-start: $-m; padding-inline-end: $-m; + grid-column: 1/1; } .tri-layout-left > *, .tri-layout-right > * { display: none; pointer-events: none; } .tri-layout-left, .tri-layout-right { - grid-area: none; - grid-column: 1/1; - grid-row: 1; padding-top: 0 !important; } .tri-layout-middle { @@ -470,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) { .tri-layout-container { diff --git a/resources/views/layouts/tri.blade.php b/resources/views/layouts/tri.blade.php index 14016830d..c3cedf0fb 100644 --- a/resources/views/layouts/tri.blade.php +++ b/resources/views/layouts/tri.blade.php @@ -27,10 +27,20 @@
- - -
- -
@stop