Skip to content

Commit 8307b6d

Browse files
muhammadarnaldomuhammadarnaldo
committed
MDL-89075 theme_boost: dynamic height of anchored drawers
1 parent 70771c1 commit 8307b6d

4 files changed

Lines changed: 87 additions & 6 deletions

File tree

‎public/theme/boost/scss/moodle/drawer.scss‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,18 @@ $drawer-scroll-bg-track: $gray-100 !default;
1313
$drawer-shadow-color: rgba(0, 0, 0, .25) !default;
1414

1515
$drawer-main-gap: calc(0.5rem + 20px);
16+
// Line up the drawers with the page title.
17+
$drawer-anchored-top-gap: 3rem !default;
18+
$drawer-anchored-bottom-gap: 1rem !default;
19+
$drawer-anchored-content-bottom-gap: 1rem !default;
20+
// The wrapper is pulled up by this amount and the same value is re-added as
21+
// header padding, so the header content stays aligned with the page title
22+
// while the drawer's rounded top edge gets some breathing room above it.
23+
$drawer-anchored-header-padding: 0.5rem !default;
24+
$drawer-anchored-header-bottom-gap: 0.5rem !default;
25+
$drawer-anchored-top-offset: calc(#{$navbar-height} + #{$drawer-anchored-top-gap} - #{$drawer-anchored-header-padding});
26+
$drawer-anchored-vertical-offset: calc(#{$drawer-anchored-top-offset} + #{$drawer-anchored-bottom-gap});
27+
$drawer-anchored-toggler-top: calc(#{$navbar-height} + #{$drawer-anchored-top-gap});
1628
$drawer-anchor-none: calc(50% + #{$course-content-maxwidth} / 2 + #{$drawer-main-gap});
1729
$drawer-anchor-left-open: calc(100% - #{$drawer-left-width});
1830
$drawer-right-anchor-left-open: calc(50% + #{$course-content-maxwidth} / 2 + #{$drawer-main-gap} + #{$drawer-left-width} / 2);
@@ -294,6 +306,24 @@ $right-drawer-width: 320px;
294306
.drawer.drawer-left,
295307
.drawer.drawer-right {
296308
z-index: map-get($zindex-levels, 2);
309+
top: $drawer-anchored-top-offset;
310+
@include border-radius();
311+
height: auto;
312+
max-height: calc(100vh - #{$drawer-anchored-vertical-offset} - var(--sticky-footer-total-height, 0px));
313+
// Keeps the scrollable area, and its scrollbar, clear of the rounded corners.
314+
padding-bottom: $drawer-anchored-content-bottom-gap;
315+
316+
.drawerheader {
317+
flex-shrink: 0;
318+
padding-top: $drawer-anchored-header-padding;
319+
320+
// Let the toggle button set the row height, so it lines up with
321+
// the page title instead of sitting below it.
322+
.drawerheadertop {
323+
height: auto;
324+
padding-bottom: $drawer-anchored-header-bottom-gap;
325+
}
326+
}
297327
}
298328

299329
.drawer.drawer-left {
@@ -304,7 +334,7 @@ $right-drawer-width: 320px;
304334
max-width: $drawer-left-width;
305335
overflow: clip;
306336
overscroll-behavior: none;
307-
@include transition(width 0.2s ease, right 0.2s ease, visibility 0.2s ease);
337+
@include transition(width 0.2s ease, right 0.2s ease, visibility 0.2s ease, max-height 0.2s ease);
308338

309339
&.show {
310340
left: auto;
@@ -325,7 +355,7 @@ $right-drawer-width: 320px;
325355
max-width: $drawer-right-width;
326356
clip-path: inset(0 100% 0 0);
327357
overscroll-behavior: none;
328-
@include transition(clip-path 0.2s ease, left 0.2s ease, visibility 0.2s ease);
358+
@include transition(clip-path 0.2s ease, left 0.2s ease, visibility 0.2s ease, max-height 0.2s ease);
329359

330360
&.show {
331361
right: auto;

‎public/theme/boost/scss/moodle/layout.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -231,6 +231,11 @@
231231
.pagelayout-standard,
232232
body.limitedwidth {
233233
.drawer-toggles {
234+
// Keep the open togglers of closed drawers aligned with the drawers.
235+
.drawer-toggler {
236+
top: $drawer-anchored-toggler-top;
237+
}
238+
234239
.drawer-left-toggle {
235240
left: auto;
236241
right: calc(100% - #{$icon-medium-width} - 2 * 16px);

‎public/theme/boost/style/moodle.css‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34737,6 +34737,25 @@ body.drawer-ease {
3473734737
body.limitedwidth .drawer.drawer-left,
3473834738
body.limitedwidth .drawer.drawer-right {
3473934739
z-index: 2;
34740+
top: calc(60px + 3rem - 0.5rem);
34741+
border-radius: 0.5rem;
34742+
height: auto;
34743+
max-height: calc(100vh - calc(calc(60px + 3rem - 0.5rem) + 1rem) - var(--sticky-footer-total-height, 0px));
34744+
padding-bottom: 1rem;
34745+
}
34746+
.pagelayout-standard .drawer.drawer-left .drawerheader,
34747+
.pagelayout-standard .drawer.drawer-right .drawerheader,
34748+
body.limitedwidth .drawer.drawer-left .drawerheader,
34749+
body.limitedwidth .drawer.drawer-right .drawerheader {
34750+
flex-shrink: 0;
34751+
padding-top: 0.5rem;
34752+
}
34753+
.pagelayout-standard .drawer.drawer-left .drawerheader .drawerheadertop,
34754+
.pagelayout-standard .drawer.drawer-right .drawerheader .drawerheadertop,
34755+
body.limitedwidth .drawer.drawer-left .drawerheader .drawerheadertop,
34756+
body.limitedwidth .drawer.drawer-right .drawerheader .drawerheadertop {
34757+
height: auto;
34758+
padding-bottom: 0.5rem;
3474034759
}
3474134760
.pagelayout-standard .drawer.drawer-left,
3474234761
body.limitedwidth .drawer.drawer-left {
@@ -34747,7 +34766,7 @@ body.drawer-ease {
3474734766
max-width: 285px;
3474834767
overflow: clip;
3474934768
overscroll-behavior: none;
34750-
transition: width 0.2s ease, right 0.2s ease, visibility 0.2s ease;
34769+
transition: width 0.2s ease, right 0.2s ease, visibility 0.2s ease, max-height 0.2s ease;
3475134770
}
3475234771
}
3475334772
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
@@ -34780,7 +34799,7 @@ body.drawer-ease {
3478034799
max-width: 315px;
3478134800
clip-path: inset(0 100% 0 0);
3478234801
overscroll-behavior: none;
34783-
transition: clip-path 0.2s ease, left 0.2s ease, visibility 0.2s ease;
34802+
transition: clip-path 0.2s ease, left 0.2s ease, visibility 0.2s ease, max-height 0.2s ease;
3478434803
}
3478534804
}
3478634805
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
@@ -42443,6 +42462,10 @@ body.tox-fullscreen .tox.tox-tinymce-aux {
4244342462
}
4244442463
}
4244542464
@media (min-width: 992px) {
42465+
.pagelayout-standard .drawer-toggles .drawer-toggler,
42466+
body.limitedwidth .drawer-toggles .drawer-toggler {
42467+
top: calc(60px + 3rem);
42468+
}
4244642469
.pagelayout-standard .drawer-toggles .drawer-left-toggle,
4244742470
body.limitedwidth .drawer-toggles .drawer-left-toggle {
4244842471
left: auto;

‎public/theme/classic/style/moodle.css‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32377,6 +32377,25 @@ body.drawer-ease {
3237732377
body.limitedwidth .drawer.drawer-left,
3237832378
body.limitedwidth .drawer.drawer-right {
3237932379
z-index: 2;
32380+
top: calc(50px + 3rem - 0.5rem);
32381+
border-radius: 0.375rem;
32382+
height: auto;
32383+
max-height: calc(100vh - calc(calc(50px + 3rem - 0.5rem) + 1rem) - var(--sticky-footer-total-height, 0px));
32384+
padding-bottom: 1rem;
32385+
}
32386+
.pagelayout-standard .drawer.drawer-left .drawerheader,
32387+
.pagelayout-standard .drawer.drawer-right .drawerheader,
32388+
body.limitedwidth .drawer.drawer-left .drawerheader,
32389+
body.limitedwidth .drawer.drawer-right .drawerheader {
32390+
flex-shrink: 0;
32391+
padding-top: 0.5rem;
32392+
}
32393+
.pagelayout-standard .drawer.drawer-left .drawerheader .drawerheadertop,
32394+
.pagelayout-standard .drawer.drawer-right .drawerheader .drawerheadertop,
32395+
body.limitedwidth .drawer.drawer-left .drawerheader .drawerheadertop,
32396+
body.limitedwidth .drawer.drawer-right .drawerheader .drawerheadertop {
32397+
height: auto;
32398+
padding-bottom: 0.5rem;
3238032399
}
3238132400
.pagelayout-standard .drawer.drawer-left,
3238232401
body.limitedwidth .drawer.drawer-left {
@@ -32387,7 +32406,7 @@ body.drawer-ease {
3238732406
max-width: 285px;
3238832407
overflow: clip;
3238932408
overscroll-behavior: none;
32390-
transition: width 0.2s ease, right 0.2s ease, visibility 0.2s ease;
32409+
transition: width 0.2s ease, right 0.2s ease, visibility 0.2s ease, max-height 0.2s ease;
3239132410
}
3239232411
}
3239332412
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
@@ -32420,7 +32439,7 @@ body.drawer-ease {
3242032439
max-width: 315px;
3242132440
clip-path: inset(0 100% 0 0);
3242232441
overscroll-behavior: none;
32423-
transition: clip-path 0.2s ease, left 0.2s ease, visibility 0.2s ease;
32442+
transition: clip-path 0.2s ease, left 0.2s ease, visibility 0.2s ease, max-height 0.2s ease;
3242432443
}
3242532444
}
3242632445
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
@@ -40017,6 +40036,10 @@ body.tox-fullscreen .tox.tox-tinymce-aux {
4001740036
}
4001840037
}
4001940038
@media (min-width: 992px) {
40039+
.pagelayout-standard .drawer-toggles .drawer-toggler,
40040+
body.limitedwidth .drawer-toggles .drawer-toggler {
40041+
top: calc(50px + 3rem);
40042+
}
4002040043
.pagelayout-standard .drawer-toggles .drawer-left-toggle,
4002140044
body.limitedwidth .drawer-toggles .drawer-left-toggle {
4002240045
left: auto;

0 commit comments

Comments
 (0)