From 1b7a0a4d1ac0c536e2715ce9fd843bb3e3cb5c0f Mon Sep 17 00:00:00 2001 From: Damyon Wiese Date: Tue, 4 Sep 2018 13:07:52 +0800 Subject: [PATCH 1/4] MDL-62465 CSS: scrolling tables Tables displayed inside a flex box container need position:relative to calculate their size or they cause incorrect scrollable regions to appear in the page. --- theme/boost/scss/moodle/core.scss | 2 ++ theme/boost/style/moodle.css | 1 + 2 files changed, 3 insertions(+) diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss index 238cc9d4ad7..d4ac3138a25 100644 --- a/theme/boost/scss/moodle/core.scss +++ b/theme/boost/scss/moodle/core.scss @@ -287,7 +287,9 @@ form.popupform div { } // Minimum height required for a menu in a table inside a scrollable div. +// Position required for table sizing inside a flex container. .no-overflow > .generaltable { + position: relative; margin-bottom: 0; min-height: 10em; } diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index 3a5ff2b37d6..f9761cfa31b 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -8995,6 +8995,7 @@ form.popupform div { overflow: auto; } .no-overflow > .generaltable { + position: relative; margin-bottom: 0; min-height: 10em; } From 9cf38a5d244a6009cd62e78adcfaa6f8180c8b9d Mon Sep 17 00:00:00 2001 From: Damyon Wiese Date: Tue, 4 Sep 2018 14:21:21 +0800 Subject: [PATCH 2/4] MDL-62465 grade: scrolling CSS Grading pages have their own special javascript to force "fixed" headers when scrolling a large table. They rely on the entire page being scrolled, not just the main region. --- theme/boost/scss/moodle/grade.scss | 1 + theme/boost/style/moodle.css | 1 + 2 files changed, 2 insertions(+) diff --git a/theme/boost/scss/moodle/grade.scss b/theme/boost/scss/moodle/grade.scss index 5d92a34c2f0..afb76988c5d 100644 --- a/theme/boost/scss/moodle/grade.scss +++ b/theme/boost/scss/moodle/grade.scss @@ -33,6 +33,7 @@ .path-grade-report-grader { #region-main { + overflow-x: visible; min-width: 100%; width: auto; & > .card { diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index f9761cfa31b..cb7e95477da 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -16008,6 +16008,7 @@ p.arrow_button { left: 40vw; } .path-grade-report-grader #region-main { + overflow-x: visible; min-width: 100%; width: auto; } .path-grade-report-grader #region-main > .card, .path-grade-report-grader #page-enrol-users #region-main > #filterform, #page-enrol-users .path-grade-report-grader #region-main > #filterform, .path-grade-report-grader .que #region-main > .history, .que .path-grade-report-grader #region-main > .history, .path-grade-report-grader .userprofile .profile_tree #region-main > section, .userprofile .profile_tree .path-grade-report-grader #region-main > section, .path-grade-report-grader #region-main > .groupinfobox, .path-grade-report-grader #region-main > .well { From ac3a49cd4a12be3ab50d946f942bc99d22cd1766 Mon Sep 17 00:00:00 2001 From: Damyon Wiese Date: Tue, 4 Sep 2018 14:57:13 +0800 Subject: [PATCH 3/4] MDL-62465 assign: Allow grade scrolling Remove the custom override that disables no-overflow in the grading table. This page is better to use when the grading table is scrollable and the controls around it are not scrollable. --- theme/boost/scss/moodle/modules.scss | 3 --- theme/boost/style/moodle.css | 3 --- 2 files changed, 6 deletions(-) diff --git a/theme/boost/scss/moodle/modules.scss b/theme/boost/scss/moodle/modules.scss index d3f11d69ffd..15313eca551 100644 --- a/theme/boost/scss/moodle/modules.scss +++ b/theme/boost/scss/moodle/modules.scss @@ -522,9 +522,6 @@ div#dock { .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons { top: auto; } -.path-mod-assign .no-overflow { - overflow: initial; -} // This section removes the responsiveness from the form in the grading panel $popout-header-font-size: 1.5 * $font-size-base; diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index cb7e95477da..abfcb165686 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -15611,9 +15611,6 @@ div#dock { .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons { top: auto; } -.path-mod-assign .no-overflow { - overflow: initial; } - .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement { height: calc(100% - 4rem); } From 438cf695bf271298af09df4e320c11ea453cd546 Mon Sep 17 00:00:00 2001 From: Damyon Wiese Date: Tue, 5 Mar 2019 14:41:25 +0800 Subject: [PATCH 4/4] MDL-62465 assign: Remove behat step We don't need to open the menu to choose the "Grade" item, we can just click the button. --- mod/assign/feedback/editpdf/tests/behat/annotate_pdf.feature | 1 - .../editpdf/tests/behat/view_previous_annotations.feature | 1 - 2 files changed, 2 deletions(-) diff --git a/mod/assign/feedback/editpdf/tests/behat/annotate_pdf.feature b/mod/assign/feedback/editpdf/tests/behat/annotate_pdf.feature index b2deb53178a..df377d4abcc 100644 --- a/mod/assign/feedback/editpdf/tests/behat/annotate_pdf.feature +++ b/mod/assign/feedback/editpdf/tests/behat/annotate_pdf.feature @@ -51,7 +51,6 @@ Feature: In an assignment, teacher can annotate PDF files during grading And I am on "Course 1" course homepage And I follow "Test assignment name" And I navigate to "View all submissions" in current page administration - And I open the action menu in "Submitted for grading" "table_row" And I click on "Grade" "link" in the "Submitted for grading" "table_row" And I should see "Page 1 of 3" And I click on ".navigate-next-button" "css_element" diff --git a/mod/assign/feedback/editpdf/tests/behat/view_previous_annotations.feature b/mod/assign/feedback/editpdf/tests/behat/view_previous_annotations.feature index e3a490cfdff..b593498dd7f 100644 --- a/mod/assign/feedback/editpdf/tests/behat/view_previous_annotations.feature +++ b/mod/assign/feedback/editpdf/tests/behat/view_previous_annotations.feature @@ -43,7 +43,6 @@ Feature: In an assignment, teacher can view the feedback for a previous attempt. And I am on "Course 1" course homepage And I follow "Test assignment name" And I navigate to "View all submissions" in current page administration - And I open the action menu in "Submitted for grading" "table_row" And I click on "Grade" "link" in the "Submitted for grading" "table_row" And I should see "Page 1 of 3" And I click on ".navigate-next-button" "css_element"