Skip to content

Commit

Permalink
MDL-78216 gradereport_grader: Fix overlapping caused by sticky cells
Browse files Browse the repository at this point in the history
  • Loading branch information
Mihail Geshoski committed Jun 19, 2023
1 parent 95e0d9c commit ac4099d
Show file tree
Hide file tree
Showing 6 changed files with 88 additions and 41 deletions.
5 changes: 2 additions & 3 deletions grade/report/grader/amd/build/stickycolspan.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion grade/report/grader/amd/build/stickycolspan.min.js.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

41 changes: 20 additions & 21 deletions grade/report/grader/amd/src/stickycolspan.js
View file
Expand Up @@ -21,41 +21,40 @@
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/

import $ from 'jquery';

const SELECTORS = {
GRADEPARENT: '.gradeparent',
STUDENTHEADER: '#studentheader',
TABLEHEADER: 'th.header',
BEHAT: 'body.behat-site',
AVERAGEROW: 'tr.lastrow',
TABLEHEADING: 'tr.heading',
GRADERDROPDOWN: 'tr th.category .dropdown-menu',
USERDROPDOWN: '.userrow th .dropdown',
AVERAGEROWHEADER: '.lastrow th',
};

/**
* Initialize module
*/
export const init = () => {
const grader = document.querySelector(SELECTORS.GRADEPARENT);
const tableHeaders = grader.querySelectorAll(SELECTORS.TABLEHEADER);

let i = 0;
tableHeaders.forEach((tableHeader) => {
if (tableHeader.colSpan <= 1) {
tableHeader.style.zIndex = tableHeaders.length - i;
}
i++;
// The sticky positioning attributed to the user column cells affects the stacking context and makes the dropdowns
// within these cells to be cut off. To solve this problem, whenever one of these action menus (dropdowns) is opened
// we need to manually bump up the z-index value of the parent container element and revert once closed.
$(SELECTORS.USERDROPDOWN).on('show.bs.dropdown hide.bs.dropdown', (e) => {
// The closest heading element has sticky positioning which affects the stacking context in this case.
e.target.closest(SELECTORS.TABLEHEADER).classList.toggle('actions-menu-active');
});

const categoryDropdowns = grader.querySelectorAll(SELECTORS.GRADERDROPDOWN);
categoryDropdowns.forEach(dropdown => {
// Ensure we take all the displayed users + any & all categories and add a bit extra for safe measure.
dropdown.style.zIndex = (tableHeaders.length + categoryDropdowns.length) + 1;
});

const tableHeader = grader.querySelector(SELECTORS.TABLEHEADING);
tableHeader.style.zIndex = tableHeaders.length + 1;
// Register an observer that will bump up the z-index value of the average overall row when it's pinned to prevent
// the row being cut-off by the user column cells or other components within the report table that have higher
// z-index values.
const observer = new IntersectionObserver(
([e]) => e.target.closest('tr').classList.toggle('pinned', e.intersectionRatio < 1),
{threshold: [1]}
);
observer.observe(document.querySelector(SELECTORS.AVERAGEROWHEADER));

if (!document.querySelector(SELECTORS.BEHAT)) {
const grader = document.querySelector(SELECTORS.GRADEPARENT);
const tableHeaders = grader.querySelectorAll(SELECTORS.TABLEHEADER);
const studentHeader = grader.querySelector(SELECTORS.STUDENTHEADER);
const leftOffset = getComputedStyle(studentHeader).getPropertyValue('left');
const rightOffset = getComputedStyle(studentHeader).getPropertyValue('right');
Expand Down
33 changes: 29 additions & 4 deletions theme/boost/scss/moodle/grade.scss
View file
Expand Up @@ -498,10 +498,17 @@
*/
.path-grade-report-grader {
.gradeparent {
z-index: 5;
tr .cell,
.floater .cell {
background-color: $pagination-bg;

&.gradecell {
.dropdown-menu {
&.show {
z-index: 1;
}
}
}
}

table,
Expand All @@ -522,12 +529,27 @@
tr.heading {
position: sticky;
top: 0;
z-index: 1;
z-index: 4;
}

tr.userrow {
th {
z-index: 2;

&.actions-menu-active {
z-index: 3;
}
}
}

tr.lastrow {
position: sticky;
bottom: 0;
// Hack used by the observer to help detecting when the sticky 'Overall average' row is pinned. */
bottom: -1px;

&.pinned {
z-index: 4;
}

td,
th {
Expand All @@ -543,7 +565,10 @@
left: -3rem;
}
position: sticky;
z-index: 1;

&#studentheader {
z-index: 1;
}
}

td.noborder {
Expand Down
24 changes: 18 additions & 6 deletions theme/boost/style/moodle.css
View file
Expand Up @@ -34945,13 +34945,14 @@ p.arrow_button {
/**
* Grader report.
*/
.path-grade-report-grader .gradeparent {
z-index: 5;
}
.path-grade-report-grader .gradeparent tr .cell,
.path-grade-report-grader .gradeparent .floater .cell {
background-color: #fff;
}
.path-grade-report-grader .gradeparent tr .cell.gradecell .dropdown-menu.show,
.path-grade-report-grader .gradeparent .floater .cell.gradecell .dropdown-menu.show {
z-index: 1;
}
.path-grade-report-grader .gradeparent table,
.path-grade-report-grader .gradeparent .cell {
border-color: #dee2e6;
Expand All @@ -34967,19 +34968,27 @@ p.arrow_button {
.path-grade-report-grader .gradeparent tr.heading {
position: sticky;
top: 0;
z-index: 1;
z-index: 4;
}
.path-grade-report-grader .gradeparent tr.userrow th {
z-index: 2;
}
.path-grade-report-grader .gradeparent tr.userrow th.actions-menu-active {
z-index: 3;
}
.path-grade-report-grader .gradeparent tr.lastrow {
position: sticky;
bottom: 0;
bottom: -1px;
}
.path-grade-report-grader .gradeparent tr.lastrow.pinned {
z-index: 4;
}
.path-grade-report-grader .gradeparent tr.lastrow td,
.path-grade-report-grader .gradeparent tr.lastrow th {
border-top: 1px solid #dee2e6;
}
.path-grade-report-grader .gradeparent th.header {
position: sticky;
z-index: 1;
}
@media (max-width: 767.98px) {
.path-grade-report-grader .gradeparent th.header {
Expand All @@ -34991,6 +35000,9 @@ p.arrow_button {
left: -3rem;
}
}
.path-grade-report-grader .gradeparent th.header#studentheader {
z-index: 1;
}
.path-grade-report-grader .gradeparent td.noborder {
border-right: transparent;
}
Expand Down
24 changes: 18 additions & 6 deletions theme/classic/style/moodle.css
View file
Expand Up @@ -34945,13 +34945,14 @@ p.arrow_button {
/**
* Grader report.
*/
.path-grade-report-grader .gradeparent {
z-index: 5;
}
.path-grade-report-grader .gradeparent tr .cell,
.path-grade-report-grader .gradeparent .floater .cell {
background-color: #fff;
}
.path-grade-report-grader .gradeparent tr .cell.gradecell .dropdown-menu.show,
.path-grade-report-grader .gradeparent .floater .cell.gradecell .dropdown-menu.show {
z-index: 1;
}
.path-grade-report-grader .gradeparent table,
.path-grade-report-grader .gradeparent .cell {
border-color: #dee2e6;
Expand All @@ -34967,19 +34968,27 @@ p.arrow_button {
.path-grade-report-grader .gradeparent tr.heading {
position: sticky;
top: 0;
z-index: 1;
z-index: 4;
}
.path-grade-report-grader .gradeparent tr.userrow th {
z-index: 2;
}
.path-grade-report-grader .gradeparent tr.userrow th.actions-menu-active {
z-index: 3;
}
.path-grade-report-grader .gradeparent tr.lastrow {
position: sticky;
bottom: 0;
bottom: -1px;
}
.path-grade-report-grader .gradeparent tr.lastrow.pinned {
z-index: 4;
}
.path-grade-report-grader .gradeparent tr.lastrow td,
.path-grade-report-grader .gradeparent tr.lastrow th {
border-top: 1px solid #dee2e6;
}
.path-grade-report-grader .gradeparent th.header {
position: sticky;
z-index: 1;
}
@media (max-width: 767.98px) {
.path-grade-report-grader .gradeparent th.header {
Expand All @@ -34991,6 +35000,9 @@ p.arrow_button {
left: -3rem;
}
}
.path-grade-report-grader .gradeparent th.header#studentheader {
z-index: 1;
}
.path-grade-report-grader .gradeparent td.noborder {
border-right: transparent;
}
Expand Down

0 comments on commit ac4099d

Please sign in to comment.