mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-21 16:32:18 +02:00
Code Issues Projects Releases Wiki Activity

MDL-72456 theme_boost: detect drawers scroll

Browse Source
This commit is contained in:
Ferran Recio 2021-10-22 12:51:34 +02:00
parent 98617c5bc1
commit bcb35d9dbe
7 changed files with 50 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
theme/boost/amd/build/drawers.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
theme/boost/amd/build/drawers.min.js.map
View File

File diff suppressed because one or more lines are too long

30
theme/boost/amd/src/drawers.js
View File

@ -40,6 +40,11 @@ const SELECTORS = {
TOGGLEBTN: '[data-toggler="drawers"][data-action="toggle"]',
DRAWERS: '[data-region="fixed-drawer"]',
CONTAINER: '#page.drawers',
DRAWERCONTENT: '.drawercontent',
};
const CLASSES = {
SCROLLED: 'scrolled',
};
/**
@ -173,6 +178,25 @@ const enableDrawerTooltips = (drawerNode) => {
});
};
/**
* Add scroll listeners to a drawer element.
*
* @param {HTMLElement} drawerNode the drawer main node
* @private
*/
const addInnerScrollListener = (drawerNode) => {
const content = drawerNode.querySelector(SELECTORS.DRAWERCONTENT);
if (!content) {
return;
}
content.addEventListener("scroll", () => {
drawerNode.classList.toggle(
CLASSES.SCROLLED,
content.scrollTop != 0
);
});
};
/**
* The Drawers class is used to control on-screen drawer elements.
*
@ -246,6 +270,8 @@ export default class Drawers {
disableDrawerTooltips(this.drawerNode);
}
addInnerScrollListener(this.drawerNode);
drawerMap.set(drawerNode, this);
}
@ -520,9 +546,9 @@ const scroller = () => {
if (drawerLayout) {
drawerLayout.addEventListener("scroll", () => {
if (drawerLayout.scrollTop >= window.innerHeight) {
body.classList.add('scrolled');
body.classList.add(CLASSES.SCROLLED);
} else {
body.classList.remove('scrolled');
body.classList.remove(CLASSES.SCROLLED);
}
});
}

1
theme/boost/scss/moodle/courseindex.scss
View File

@ -102,7 +102,6 @@ $courseindex-item-current: $primary !default;
// Completion.
.completioninfo {
min-width: 24px;
transform: scale(0.7);
&.completion_complete {
color: $success;

8
theme/boost/scss/moodle/drawer.scss
View File

@ -124,7 +124,7 @@ $right-drawer-width: 320px;
right: 0;
height: calc(100% - #{$navbar-height});
width: $right-drawer-width;
box-shadow: -2px 2px 4px rgba(0, 0, 0, .08);
box-shadow: -2px 2px 4px $drawer-shadow-color;
padding: 0;
visibility: visible;
opacity: 1;
@ -158,7 +158,7 @@ $right-drawer-width: 320px;
.dir-rtl {
[data-region=right-hand-drawer] {
box-shadow: 2px 2px 4px rgba(0, 0, 0, .08);
box-shadow: 2px 2px 4px $drawer-shadow-color;
}
}
@ -233,6 +233,9 @@ $right-drawer-width: 320px;
display: flex;
align-items: center;
}
.drawer.scrolled .drawerheader {
box-shadow: 0 8px 11px -7px $drawer-shadow-color;
}
@include media-breakpoint-down(md) {
.drawer-md {
@ -252,6 +255,7 @@ $right-drawer-width: 320px;
.drawercontent {
position: relative;
z-index: -1;
height: calc(100% - #{$navbar-height});
display: flex;
flex-direction: column;

11
theme/boost/style/moodle.css
View File

@ -14712,7 +14712,7 @@ body.drawer-ease {
right: 0;
height: calc(100% - 60px);
width: 320px;
box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.08);
box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.25);
padding: 0;
visibility: visible;
opacity: 1; }
@ -14736,7 +14736,7 @@ body.drawer-ease {
overflow: hidden; } }
.dir-rtl [data-region=right-hand-drawer] {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.08); }
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); }
.drawer {
transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease;
@ -14781,6 +14781,9 @@ body.drawer-ease {
display: flex;
align-items: center; }
.drawer.scrolled .drawerheader {
box-shadow: 0 8px 11px -7px rgba(0, 0, 0, 0.25); }
@media (max-width: 991.98px) {
.drawer-md {
display: block;
@ -14845,6 +14848,7 @@ body.drawer-ease {
.drawercontent {
position: relative;
z-index: -1;
height: calc(100% - 60px);
display: flex;
flex-direction: column;
@ -20963,8 +20967,7 @@ div.editor_atto_toolbar button .icon {
.courseindex .courseindex-item.pageitem a {
color: black; }
.courseindex .courseindex-item .completioninfo {
min-width: 24px;
transform: scale(0.7); }
min-width: 24px; }
.courseindex .courseindex-item .completioninfo.completion_complete {
color: #357a32; }
.courseindex .courseindex-item .completioninfo.completion_fail {

11
theme/classic/style/moodle.css
View File

@ -14712,7 +14712,7 @@ body.drawer-ease {
right: 0;
height: calc(100% - 50px);
width: 320px;
box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.08);
box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.25);
padding: 0;
visibility: visible;
opacity: 1; }
@ -14736,7 +14736,7 @@ body.drawer-ease {
overflow: hidden; } }
.dir-rtl [data-region=right-hand-drawer] {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.08); }
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); }
.drawer {
transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease;
@ -14781,6 +14781,9 @@ body.drawer-ease {
display: flex;
align-items: center; }
.drawer.scrolled .drawerheader {
box-shadow: 0 8px 11px -7px rgba(0, 0, 0, 0.25); }
@media (max-width: 991.98px) {
.drawer-md {
display: block;
@ -14845,6 +14848,7 @@ body.drawer-ease {
.drawercontent {
position: relative;
z-index: -1;
height: calc(100% - 50px);
display: flex;
flex-direction: column;
@ -20909,8 +20913,7 @@ div.editor_atto_toolbar button .icon {
.courseindex .courseindex-item.pageitem a {
color: black; }
.courseindex .courseindex-item .completioninfo {
min-width: 24px;
transform: scale(0.7); }
min-width: 24px; }
.courseindex .courseindex-item .completioninfo.completion_complete {
color: #357a32; }
.courseindex .courseindex-item .completioninfo.completion_fail {