diff --git a/grade/report/grader/lib.php b/grade/report/grader/lib.php index 25e01cbcebe..6343f546911 100644 --- a/grade/report/grader/lib.php +++ b/grade/report/grader/lib.php @@ -808,16 +808,20 @@ class grade_report_grader extends grade_report { $categorycell = new html_table_cell(); $categorycell->attributes['class'] = 'category ' . $catlevel; $categorycell->colspan = $colspan; - $categorycell->text = $this->get_course_header($element); $categorycell->header = true; $categorycell->scope = 'col'; $statusicons = $this->gtree->set_grade_status_icons($element); if ($statusicons) { - $categorycell->text .= $statusicons; $categorycell->attributes['class'] .= ' statusicons'; } + $context = new stdClass(); + $context->courseheader = $this->get_course_header($element); + $context->actionmenu = $this->gtree->get_cell_action_menu($element, 'gradeitem', $this->gpr); + $context->statusicons = $statusicons; + $categorycell->text = $OUTPUT->render_from_template('gradereport_grader/categorycell', $context); + $headingrow->cells[] = $categorycell; } } else { @@ -846,11 +850,30 @@ class grade_report_grader extends grade_report { $itemcell->attributes['class'] .= ' statusicons'; } + switch ($element['object']->gradetype) { + case GRADE_TYPE_SCALE: + $itemcell->attributes['class'] .= ' grade_type_scale'; + break; + case GRADE_TYPE_VALUE: + $itemcell->attributes['class'] .= ' grade_type_value'; + break; + case GRADE_TYPE_TEXT: + $itemcell->attributes['class'] .= ' grade_type_text'; + break; + } + $itemcell->colspan = $colspan; - $itemcell->text = $headerlink . $arrow . $singleview . $statusicons; $itemcell->header = true; $itemcell->scope = 'col'; + $context = new stdClass(); + $context->headerlink = $headerlink; + $context->arrow = $arrow; + $context->singleview = $singleview; + $context->statusicons = $statusicons; + + $itemcell->text = $OUTPUT->render_from_template('gradereport_grader/headercell', $context); + $headingrow->cells[] = $itemcell; } } @@ -1311,6 +1334,14 @@ class grade_report_grader extends grade_report { $itemcell = new html_table_cell(); $itemcell->attributes['class'] .= ' range i'. $itemid; + if ($item->gradetype == GRADE_TYPE_SCALE) { + $itemcell->attributes['class'] .= ' grade_type_scale'; + } else if ($item->gradetype == GRADE_TYPE_VALUE) { + $itemcell->attributes['class'] .= ' grade_type_value'; + } else if ($item->gradetype == GRADE_TYPE_TEXT) { + $itemcell->attributes['class'] .= ' grade_type_text'; + } + $hidden = ''; if ($item->is_hidden()) { $hidden = ' dimmed_text '; @@ -1470,9 +1501,18 @@ class grade_report_grader extends grade_report { $decimalpoints = $averagesdecimalpoints; } + $gradetypeclass = ''; + if ($item->gradetype == GRADE_TYPE_SCALE) { + $gradetypeclass = ' grade_type_scale'; + } else if ($item->gradetype == GRADE_TYPE_VALUE) { + $gradetypeclass = ' grade_type_value'; + } else if ($item->gradetype == GRADE_TYPE_TEXT) { + $gradetypeclass = ' grade_type_text'; + } + if (!isset($sumarray[$item->id]) || $meancount == 0) { $avgcell = new html_table_cell(); - $avgcell->attributes['class'] = 'i'. $itemid; + $avgcell->attributes['class'] = $gradetypeclass . ' i'. $itemid; $avgcell->text = '-'; $avgrow->cells[] = $avgcell; @@ -1487,7 +1527,7 @@ class grade_report_grader extends grade_report { } $avgcell = new html_table_cell(); - $avgcell->attributes['class'] = 'i'. $itemid; + $avgcell->attributes['class'] = $gradetypeclass . ' i'. $itemid; $avgcell->text = $gradehtml.$numberofgrades; $avgrow->cells[] = $avgcell; } @@ -1505,8 +1545,6 @@ class grade_report_grader extends grade_report { * @return string HTML */ protected function get_course_header($element) { - $actionmenu = $this->gtree->get_cell_action_menu($element, 'gradeitem', $this->gpr); - if (in_array($element['object']->id, $this->collapsed['aggregatesonly'])) { $showing = get_string('showingaggregatesonly', 'grades'); } else if (in_array($element['object']->id, $this->collapsed['gradesonly'])) { @@ -1526,7 +1564,6 @@ class grade_report_grader extends grade_report { $courseheader .= html_writer::div($showing, 'sr-only', [ 'id' => $describedbyid ]); - $courseheader .= $actionmenu; return $courseheader; } diff --git a/grade/report/grader/styles.css b/grade/report/grader/styles.css index 36f025ba798..6de71c8b52a 100644 --- a/grade/report/grader/styles.css +++ b/grade/report/grader/styles.css @@ -5,22 +5,6 @@ position: relative; } -/** - * Tooltip and overlay. - */ -.path-grade-report-grader .gradeparent .grader-information-tooltip { - min-width: 200px; -} - -.path-grade-report-grader .gradeparent .graderreportoverlay { - background-color: white; - width: auto; - padding: 10px; - font-size: 12px; - border: 1px solid #ccc; - border-radius: 4px; -} - /** * The table. */ @@ -40,14 +24,9 @@ border: 1px solid #ccc; border-top-width: 0; border-left-width: 0; - padding: 4px 5px; - vertical-align: middle; - text-align: center; - white-space: nowrap; -} - -.path-grade-report-grader .action-menu { - display: inline-block; + padding: 10px; + vertical-align: top; + height: 1em; } .path-grade-report-grader .overriddengrade { @@ -65,8 +44,23 @@ color: #ca3120; } -.path-grade-report-grader .grade_icons { - text-align: center; +.path-grade-report-grader .grade_icons, +.path-grade-report-grader .category_grade_icons { + white-space: nowrap; + margin-top: 10px; + margin-right: 10px; +} + +.path-grade-report-grader .grade_type_value .grade_icons { + margin-left: auto; +} + +.path-grade-report-grader .grade_icons .icon { + margin-right: 20px; +} + +.path-grade-report-grader .grade_icons .icon:last-child { + margin-right: 0; } /** @@ -88,35 +82,32 @@ .path-grade-report-grader .gradeparent .user.cell { font-size: 14px; font-weight: normal; - text-align: left; +} + +.path-grade-report-grader .gradeparent .heading .header, +.path-grade-report-grader .gradeparent .heading .userfield { + white-space: nowrap; +} + +.path-grade-report-grader .heading .gradeitemheader { + text-indent: -24px; + padding-left: 22px; +} + +.path-grade-report-grader .heading .gradeitemheader .itemicon { + text-align: right; } /** * The user cells. */ .path-grade-report-grader .gradeparent .user.cell { - min-width: 250px; - width: 250px; - white-space: normal; - vertical-align: middle; - height: 100px; + white-space: nowrap; } .path-grade-report-grader .gradeparent .highlightable.cell { height: 80px; - text-align: center; - vertical-align: top; - padding-top: 20px; - min-width: 150px; -} - -.path-grade-report-grader .gradeparent .gradecell { - vertical-align: top; - padding-top: 20px; -} - -.path-grade-report-grader .gradeparent .locked { - padding-top: 27px; + min-width: 200px; } .path-grade-report-grader .gradeparent .user.cell .userpicture { @@ -132,20 +123,14 @@ vertical-align: middle; } -/** - * The additional user fields. - */ -.path-grade-report-grader .gradeparent .userfield { - font-weight: normal; - text-align: left; -} - /** * The footer's header. */ .path-grade-report-grader .gradeparent .range .header, -.path-grade-report-grader .gradeparent .avg .header { +.path-grade-report-grader .gradeparent .avg .header, +.path-grade-report-grader .gradeparent .groupavg .header { font-weight: bold; + text-align: right; } /** @@ -155,15 +140,6 @@ border-top-width: 1px; } -/** - * The footer's cells. - */ -.path-grade-report-grader .gradeparent .avg .cell { - text-align: right; - max-width: 200px; - text-overflow: ellipsis; - overflow: hidden; -} /** * Content styling. */ @@ -179,6 +155,12 @@ margin-right: 1px; } +.path-grade-report-grader .gradeparent td.grade_type_value, +.path-grade-report-grader .gradeparent td.grade_type_value input { + text-align: right; + margin-left: auto; +} + .path-grade-report-grader .gradeparent .gradevalue { display: inline-block; } @@ -216,26 +198,19 @@ text-align: center; } +.path-grade-report-grader .action-menu { + display: inline-block; + padding-left: 10px; +} + +.path-grade-report-grader .heading .action-menu { + padding-left: 0; +} + .path-grade-report-grader .dropdown-menu { width: max-content; } -.path-grade-report-grader .yui3-overlay { - border: 0; - background: none; - background-color: inherit; - min-width: 200px; -} - -.path-grade-report-grader .yui3-overlay { - background-color: white; - width: auto; - padding: 10px; - font-size: 12px; - border: 1px solid #ccc; - border-radius: 4px; -} - .path-grade-report-grader .initialsdropdown { width: 460px; } diff --git a/grade/report/grader/templates/categorycell.mustache b/grade/report/grader/templates/categorycell.mustache new file mode 100644 index 00000000000..5e27d5948a0 --- /dev/null +++ b/grade/report/grader/templates/categorycell.mustache @@ -0,0 +1,42 @@ +{{! + This file is part of Moodle - http://moodle.org/ + + Moodle is free software: you can redistribute it and/or modify + it under the terms of the GNU General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + Moodle is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU General Public License + along with Moodle. If not, see . +}} +{{! + @template gradereport_grader/headercell + + Header cell template + + Example context (json): + { + "headerlink": "AssignmentAssignment 1", + "arrow": "", + "singleview": "
", + "statusicons": "
" + } +}} +
+
+
+ {{{courseheader}}} +
+
+ {{{actionmenu}}} +
+
+
+ {{{statusicons}}} +
+
diff --git a/grade/report/grader/templates/cell.mustache b/grade/report/grader/templates/cell.mustache index 38a53bd1172..05cda44db07 100644 --- a/grade/report/grader/templates/cell.mustache +++ b/grade/report/grader/templates/cell.mustache @@ -33,16 +33,26 @@ "name": "grade[313][624]" } }} -{{#iseditable}} - {{#scale}} - {{>core_grades/grades/grader/scale}} - {{/scale}} - {{^scale}} - {{>core_grades/grades/grader/input}} - {{/scale}} -{{/iseditable}} -{{^iseditable}} - {{>core_grades/grades/grader/text}} -{{/iseditable}} -{{{actionmenu}}} -{{{statusicons}}} +
+
+
+ {{#iseditable}} + {{#scale}} + {{>core_grades/grades/grader/scale}} + {{/scale}} + {{^scale}} + {{>core_grades/grades/grader/input}} + {{/scale}} + {{/iseditable}} + {{^iseditable}} + {{>core_grades/grades/grader/text}} + {{/iseditable}} +
+
+ {{{actionmenu}}} +
+
+
+ {{{statusicons}}} +
+
diff --git a/grade/report/grader/templates/headercell.mustache b/grade/report/grader/templates/headercell.mustache new file mode 100644 index 00000000000..f6b1493c3ba --- /dev/null +++ b/grade/report/grader/templates/headercell.mustache @@ -0,0 +1,43 @@ +{{! + This file is part of Moodle - http://moodle.org/ + + Moodle is free software: you can redistribute it and/or modify + it under the terms of the GNU General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + Moodle is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU General Public License + along with Moodle. If not, see . +}} +{{! + @template gradereport_grader/headercell + + Header cell template + + Example context (json): + { + "headerlink": "AssignmentAssignment 1", + "arrow": "", + "singleview": "
", + "statusicons": "
" + } +}} +
+
+
+ {{{headerlink}}} + {{{arrow}}} +
+
+ {{{singleview}}} +
+
+
+ {{{statusicons}}} +
+
diff --git a/theme/boost/scss/moodle/grade.scss b/theme/boost/scss/moodle/grade.scss index de73f59ae3e..56040d1d8f1 100644 --- a/theme/boost/scss/moodle/grade.scss +++ b/theme/boost/scss/moodle/grade.scss @@ -508,8 +508,6 @@ border-color: $table-border-color; } - .userrow.odd .cell, - .floater .cell.odd, .heading .cell, .cell.category, .avg .cell { @@ -537,8 +535,13 @@ } th.header { + @include media-breakpoint-down(sm) { + left: 0; + } + @include media-breakpoint-up(md) { + left: -3rem; + } position: sticky; - left: -3rem; z-index: 1; } diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index ba59c6a15bc..897a2b1197c 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -34964,8 +34964,6 @@ p.arrow_button { .path-grade-report-grader .gradeparent .cell { border-color: #dee2e6; } -.path-grade-report-grader .gradeparent .userrow.odd .cell, -.path-grade-report-grader .gradeparent .floater .cell.odd, .path-grade-report-grader .gradeparent .heading .cell, .path-grade-report-grader .gradeparent .cell.category, .path-grade-report-grader .gradeparent .avg .cell { @@ -34989,9 +34987,18 @@ p.arrow_button { } .path-grade-report-grader .gradeparent th.header { position: sticky; - left: -3rem; z-index: 1; } +@media (max-width: 767.98px) { + .path-grade-report-grader .gradeparent th.header { + left: 0; + } +} +@media (min-width: 768px) { + .path-grade-report-grader .gradeparent th.header { + left: -3rem; + } +} .path-grade-report-grader .gradeparent td.noborder { border-right: transparent; } diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index 64401df24d9..be64e3ee533 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -34964,8 +34964,6 @@ p.arrow_button { .path-grade-report-grader .gradeparent .cell { border-color: #dee2e6; } -.path-grade-report-grader .gradeparent .userrow.odd .cell, -.path-grade-report-grader .gradeparent .floater .cell.odd, .path-grade-report-grader .gradeparent .heading .cell, .path-grade-report-grader .gradeparent .cell.category, .path-grade-report-grader .gradeparent .avg .cell { @@ -34989,9 +34987,18 @@ p.arrow_button { } .path-grade-report-grader .gradeparent th.header { position: sticky; - left: -3rem; z-index: 1; } +@media (max-width: 767.98px) { + .path-grade-report-grader .gradeparent th.header { + left: 0; + } +} +@media (min-width: 768px) { + .path-grade-report-grader .gradeparent th.header { + left: -3rem; + } +} .path-grade-report-grader .gradeparent td.noborder { border-right: transparent; }