mirror of
https://github.com/moodle/moodle.git
synced 2025-01-18 22:08:20 +01:00
MDL-56768 boost: Special positioning for grader report
Grader report has custom overflow handling which does not cope with a scrollable content region. So we need to make the content region flow weirdly out to the right of the page, and push the blocks underneath - even on really wide screens where it looks bad. We also needed to upgrade the custom scroll code to handle the margin on the body changing.
This commit is contained in:
parent
258d07d37e
commit
1572a39251
@ -387,6 +387,15 @@ FloatingHeaders.prototype = {
|
||||
*/
|
||||
_eventHandles: [],
|
||||
|
||||
/**
|
||||
* The last value of the bodyMargin style. We need to recompute positions if it is changed.
|
||||
*
|
||||
* @property lastBodyMargin
|
||||
* @type Number
|
||||
* @protected
|
||||
*/
|
||||
lastBodyMargin: 0,
|
||||
|
||||
/**
|
||||
* Setup the grader report table.
|
||||
*
|
||||
@ -919,7 +928,19 @@ FloatingHeaders.prototype = {
|
||||
leftTitleFloats = false,
|
||||
floatingHeaderStyles = {},
|
||||
floatingFooterTitleStyles = {},
|
||||
floatingFooterTitleRow = false;
|
||||
floatingFooterTitleRow = false,
|
||||
bodyMargin = 0;
|
||||
|
||||
if (window.right_to_left()) {
|
||||
bodyMargin = parseInt(Y.one(Y.config.doc.body).getComputedStyle('marginRight'), 10);
|
||||
} else {
|
||||
bodyMargin = parseInt(Y.one(Y.config.doc.body).getComputedStyle('marginLeft'), 10);
|
||||
}
|
||||
|
||||
if (bodyMargin != this.lastBodyMargin) {
|
||||
// Recalculate the position of the edge cells for scroll positioning.
|
||||
this._calculateCellPositions();
|
||||
}
|
||||
|
||||
// Header position.
|
||||
gradeItemHeadingContainerStyles.left = this._getRelativeXFromX(this.headerRow.getX());
|
||||
@ -942,15 +963,16 @@ FloatingHeaders.prototype = {
|
||||
}
|
||||
|
||||
// User column position.
|
||||
|
||||
if (window.right_to_left()) {
|
||||
floatingUserTriggerPoint = Y.config.win.innerWidth + Y.config.win.pageXOffset - this.dockWidth;
|
||||
floatingUserRelativePoint = floatingUserTriggerPoint - this.firstUserCellWidth;
|
||||
userFloats = floatingUserTriggerPoint < (this.firstUserCellLeft + this.firstUserCellWidth);
|
||||
floatingUserRelativePoint = floatingUserTriggerPoint - this.firstUserCellWidth - bodyMargin;
|
||||
userFloats = floatingUserTriggerPoint < (this.firstUserCellLeft + this.firstUserCellWidth + bodyMargin);
|
||||
leftTitleFloats = (floatingUserTriggerPoint - this.firstNonUserCellWidth) <
|
||||
(this.firstNonUserCellLeft + this.firstUserCellWidth);
|
||||
} else {
|
||||
floatingUserRelativePoint = Y.config.win.pageXOffset;
|
||||
floatingUserTriggerPoint = floatingUserRelativePoint + this.dockWidth;
|
||||
floatingUserRelativePoint = Y.config.win.pageXOffset + bodyMargin;
|
||||
floatingUserTriggerPoint = floatingUserRelativePoint + this.dockWidth + bodyMargin;
|
||||
userFloats = floatingUserTriggerPoint > this.firstUserCellLeft;
|
||||
leftTitleFloats = floatingUserTriggerPoint > (this.firstNonUserCellLeft - this.firstUserCellWidth);
|
||||
}
|
||||
|
File diff suppressed because one or more lines are too long
@ -387,6 +387,15 @@ FloatingHeaders.prototype = {
|
||||
*/
|
||||
_eventHandles: [],
|
||||
|
||||
/**
|
||||
* The last value of the bodyMargin style. We need to recompute positions if it is changed.
|
||||
*
|
||||
* @property lastBodyMargin
|
||||
* @type Number
|
||||
* @protected
|
||||
*/
|
||||
lastBodyMargin: 0,
|
||||
|
||||
/**
|
||||
* Setup the grader report table.
|
||||
*
|
||||
@ -918,7 +927,19 @@ FloatingHeaders.prototype = {
|
||||
leftTitleFloats = false,
|
||||
floatingHeaderStyles = {},
|
||||
floatingFooterTitleStyles = {},
|
||||
floatingFooterTitleRow = false;
|
||||
floatingFooterTitleRow = false,
|
||||
bodyMargin = 0;
|
||||
|
||||
if (window.right_to_left()) {
|
||||
bodyMargin = parseInt(Y.one(Y.config.doc.body).getComputedStyle('marginRight'), 10);
|
||||
} else {
|
||||
bodyMargin = parseInt(Y.one(Y.config.doc.body).getComputedStyle('marginLeft'), 10);
|
||||
}
|
||||
|
||||
if (bodyMargin != this.lastBodyMargin) {
|
||||
// Recalculate the position of the edge cells for scroll positioning.
|
||||
this._calculateCellPositions();
|
||||
}
|
||||
|
||||
// Header position.
|
||||
gradeItemHeadingContainerStyles.left = this._getRelativeXFromX(this.headerRow.getX());
|
||||
@ -941,15 +962,16 @@ FloatingHeaders.prototype = {
|
||||
}
|
||||
|
||||
// User column position.
|
||||
|
||||
if (window.right_to_left()) {
|
||||
floatingUserTriggerPoint = Y.config.win.innerWidth + Y.config.win.pageXOffset - this.dockWidth;
|
||||
floatingUserRelativePoint = floatingUserTriggerPoint - this.firstUserCellWidth;
|
||||
userFloats = floatingUserTriggerPoint < (this.firstUserCellLeft + this.firstUserCellWidth);
|
||||
floatingUserRelativePoint = floatingUserTriggerPoint - this.firstUserCellWidth - bodyMargin;
|
||||
userFloats = floatingUserTriggerPoint < (this.firstUserCellLeft + this.firstUserCellWidth + bodyMargin);
|
||||
leftTitleFloats = (floatingUserTriggerPoint - this.firstNonUserCellWidth) <
|
||||
(this.firstNonUserCellLeft + this.firstUserCellWidth);
|
||||
} else {
|
||||
floatingUserRelativePoint = Y.config.win.pageXOffset;
|
||||
floatingUserTriggerPoint = floatingUserRelativePoint + this.dockWidth;
|
||||
floatingUserRelativePoint = Y.config.win.pageXOffset + bodyMargin;
|
||||
floatingUserTriggerPoint = floatingUserRelativePoint + this.dockWidth + bodyMargin;
|
||||
userFloats = floatingUserTriggerPoint > this.firstUserCellLeft;
|
||||
leftTitleFloats = floatingUserTriggerPoint > (this.firstNonUserCellLeft - this.firstUserCellWidth);
|
||||
}
|
||||
|
@ -243,6 +243,15 @@ FloatingHeaders.prototype = {
|
||||
*/
|
||||
_eventHandles: [],
|
||||
|
||||
/**
|
||||
* The last value of the bodyMargin style. We need to recompute positions if it is changed.
|
||||
*
|
||||
* @property lastBodyMargin
|
||||
* @type Number
|
||||
* @protected
|
||||
*/
|
||||
lastBodyMargin: 0,
|
||||
|
||||
/**
|
||||
* Setup the grader report table.
|
||||
*
|
||||
@ -775,7 +784,19 @@ FloatingHeaders.prototype = {
|
||||
leftTitleFloats = false,
|
||||
floatingHeaderStyles = {},
|
||||
floatingFooterTitleStyles = {},
|
||||
floatingFooterTitleRow = false;
|
||||
floatingFooterTitleRow = false,
|
||||
bodyMargin = 0;
|
||||
|
||||
if (window.right_to_left()) {
|
||||
bodyMargin = parseInt(Y.one(Y.config.doc.body).getComputedStyle('marginRight'), 10);
|
||||
} else {
|
||||
bodyMargin = parseInt(Y.one(Y.config.doc.body).getComputedStyle('marginLeft'), 10);
|
||||
}
|
||||
|
||||
if (bodyMargin != this.lastBodyMargin) {
|
||||
// Recalculate the position of the edge cells for scroll positioning.
|
||||
this._calculateCellPositions();
|
||||
}
|
||||
|
||||
// Header position.
|
||||
gradeItemHeadingContainerStyles.left = this._getRelativeXFromX(this.headerRow.getX());
|
||||
@ -798,15 +819,16 @@ FloatingHeaders.prototype = {
|
||||
}
|
||||
|
||||
// User column position.
|
||||
|
||||
if (window.right_to_left()) {
|
||||
floatingUserTriggerPoint = Y.config.win.innerWidth + Y.config.win.pageXOffset - this.dockWidth;
|
||||
floatingUserRelativePoint = floatingUserTriggerPoint - this.firstUserCellWidth;
|
||||
userFloats = floatingUserTriggerPoint < (this.firstUserCellLeft + this.firstUserCellWidth);
|
||||
floatingUserRelativePoint = floatingUserTriggerPoint - this.firstUserCellWidth - bodyMargin;
|
||||
userFloats = floatingUserTriggerPoint < (this.firstUserCellLeft + this.firstUserCellWidth + bodyMargin);
|
||||
leftTitleFloats = (floatingUserTriggerPoint - this.firstNonUserCellWidth) <
|
||||
(this.firstNonUserCellLeft + this.firstUserCellWidth);
|
||||
} else {
|
||||
floatingUserRelativePoint = Y.config.win.pageXOffset;
|
||||
floatingUserTriggerPoint = floatingUserRelativePoint + this.dockWidth;
|
||||
floatingUserRelativePoint = Y.config.win.pageXOffset + bodyMargin;
|
||||
floatingUserTriggerPoint = floatingUserRelativePoint + this.dockWidth + bodyMargin;
|
||||
userFloats = floatingUserTriggerPoint > this.firstUserCellLeft;
|
||||
leftTitleFloats = floatingUserTriggerPoint > (this.firstNonUserCellLeft - this.firstUserCellWidth);
|
||||
}
|
||||
|
@ -27,7 +27,22 @@
|
||||
}
|
||||
|
||||
.path-grade-report #maincontent + .urlselect {
|
||||
float: right;
|
||||
position: absolute;
|
||||
left: 40vw;
|
||||
}
|
||||
|
||||
.path-grade-report-grader {
|
||||
#region-main {
|
||||
width: auto;
|
||||
& > .card {
|
||||
width: auto;
|
||||
overflow-x: initial;
|
||||
}
|
||||
}
|
||||
[data-region="blocks-column"] {
|
||||
width: 100%;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
// Rubrics
|
||||
|
Loading…
x
Reference in New Issue
Block a user