MDL-66893 grade: update marking guide template for grader

moodle · Nov 6, 2019 · bf7018b · bf7018b
1 parent 01aa126
commit bf7018b
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 108 deletions.
diff --git a/grade/grading/form/guide/templates/grades/grader/gradingpanel.mustache b/grade/grading/form/guide/templates/grades/grader/gradingpanel.mustache
@@ -61,19 +61,35 @@
 <form id="gradingform_guide-{{uniqid}}">
   <input type="hidden" name="instanceid" value="{{instanceid}}">
   {{#criterion}}
-    <div data-gradingform-guide-role="criterion">
-      <h5>
-        {{name}}
-        <a
-          href="#gradingform_guide-{{uniqid}}-criteria-{{id}}-description"
-          aria-controls="gradingform_guide-{{uniqid}}-criteria-{{id}}-description"
-          aria-expanded="false"
-          data-toggle="collapse"
-          role="button"
+    <div class="mb-3 criterion" data-gradingform-guide-role="criterion">
+      <div class="d-flex align-items-center">
+        <h5 class="description font-weight-bold mb-0">{{name}}</h5>
+        <button
+            class="btn btn-link px-1"
+            aria-controls="gradingform_guide-{{uniqid}}-criteria-{{id}}-description"
+            aria-expanded="false"
+            data-target="#gradingform_guide-{{uniqid}}-criteria-{{id}}-description"
+            data-toggle="collapse"
+            type="button"
           >
             {{# pix }} info, gradingform_guide {{/ pix }}
-        </a>
-      </h5>
+        </button>
+        <button class="criterion-toggle btn btn-icon icon-no-margin text-reset p-0 font-weight-bold mb-0 ml-auto"
+                type="button"
+                data-toggle="collapse"
+                data-target="#criteria-{{id}}"
+                aria-expanded="true"
+                aria-controls="criteria-{{id}}">
+                <span class="collapsed-icon">
+                    {{#pix}} t/collapsed, core {{/pix}}
+                    <span class="sr-only">{{#str}} expandcriterion, core_grades {{/str}}</span>
+                </span>
+                <span class="expanded-icon">
+                    {{#pix}} t/expanded, core {{/pix}}
+                    <span class="sr-only">{{#str}} collapsecriterion, core_grades {{/str}}</span>
+                </span>
+        </button>
+      </div>
       <div class="collapse" id="gradingform_guide-{{uniqid}}-criteria-{{id}}-description">
           <div class="border p-3 mb-3 bg-white rounded">
               {{{description}}}
@@ -83,52 +99,59 @@
               {{/descriptionmarkers}}
           </div>
       </div>
-      <div class="form-group">
-        <label for="gradingform_guide-{{uniqid}}-criteria-{{id}}-score">{{#str}}outof, gradingform_guide, {{maxscore}}{{/str}}</label>
-        <input class="form-control" type="number" name="advancedgrading[criteria][{{id}}][score]" value="{{score}}"
-            id="gradingform_guide-{{uniqid}}-criteria-{{id}}-score"
-            aria-describedby="gradingform_guide-{{uniqid}}-help-{{id}}-score">
-        <small id="gradingform_guide-{{uniqid}}-help-{{id}}-score" class="sr-only">{{#str}}grade_help, gradingform_guide{{/str}}</small>
-      </div>
-      <div class="form-group ">
-        <label for="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark">{{#str}}additionalcomments, gradingform_guide{{/str}}</label>
-        <div class="input-group mb-3 form-inset form-inset-right">
-          <textarea class="form-control" type="text" name="advancedgrading[criteria][{{id}}][remark]"
-              id="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark"
-              aria-describedby="gradingform_guide-{{uniqid}}-help-{{id}}-remark"
-              data-gradingform-guide-role="remark"
-              >{{remark}}</textarea>
-          {{#hascomments}}
-            <a
-              class="form-inset-item"
-              href="#gradingform_guide-{{uniqid}}-criteria-{{id}}-remark-frequent-comments"
-              aria-controls="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark-frequent-comments"
-              aria-expanded="false"
-              data-toggle="collapse"
-              role="button"
-              >
-                {{#pix}}plus, gradingform_guide{{/pix}}
-            </a>
-          {{/hascomments}}
+      <div class="collapse show" id="criteria-{{id}}">
+        <div class="form-group">
+          <label for="gradingform_guide-{{uniqid}}-criteria-{{id}}-score">{{#str}}outof, gradingform_guide, {{maxscore}}{{/str}}</label>
+          <input class="form-control" type="number" name="advancedgrading[criteria][{{id}}][score]" value="{{score}}"
+              id="gradingform_guide-{{uniqid}}-criteria-{{id}}-score"
+              aria-describedby="gradingform_guide-{{uniqid}}-help-{{id}}-score">
+          <small id="gradingform_guide-{{uniqid}}-help-{{id}}-score" class="sr-only">{{#str}}grade_help, gradingform_guide{{/str}}</small>
         </div>
-        {{#hascomments}}
-          <div class="collapse" id="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark-frequent-comments">
-            <div data-gradingform_guide-frequent-comments="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark">
-              <div class="list-group">
-                {{#comments}}
-                  <button type="button" class="list-group-item list-group-item-action" data-gradingform_guide-role="frequent-comment">{{description}}</button>
-                {{/comments}}
+        <div class="form-group ">
+          <label class="text-muted" for="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark">{{#str}}additionalcomments, gradingform_guide{{/str}}</label>
+          <div class="input-group mb-3 form-inset form-inset-right">
+            <textarea class="form-control" type="text" name="advancedgrading[criteria][{{id}}][remark]"
+                id="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark"
+                aria-describedby="gradingform_guide-{{uniqid}}-help-{{id}}-remark"
+                data-gradingform-guide-role="remark"
+                rows="2"
+                data-max-rows="5"
+                data-auto-rows
+                >{{remark}}</textarea>
+            {{#hascomments}}
+              <button
+                class="btn btn-icon form-inset-item icon-no-margin p-0 mt-1 mr-1 text-reset collapsed"
+                aria-controls="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark-frequent-comments"
+                aria-expanded="false"
+                data-toggle="collapse"
+                data-target="#gradingform_guide-{{uniqid}}-criteria-{{id}}-remark-frequent-comments"
+                type="button"
+              >
+                  {{#pix}}plus, gradingform_guide{{/pix}}
+              </button>
+            {{/hascomments}}
+          </div>
+          {{#hascomments}}
+            <div class="collapse" id="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark-frequent-comments">
+              <div data-gradingform_guide-frequent-comments="gradingform_guide-{{uniqid}}-criteria-{{id}}-remark">
+                  <h6>{{#str}}comments, gradingform_guide{{/str}}</h6>
+                <div class="list-group">
+                  {{#comments}}
+                    <button type="button" class="list-group-item list-group-item-action" data-gradingform_guide-role="frequent-comment">{{description}}</button>
+                  {{/comments}}
+                </div>
               </div>
             </div>
-          </div>
-        {{/hascomments}}
-        <small id="gradingform_guide-{{uniqid}}-help-{{id}}-remark" class="sr-only">{{#str}}grade_help, gradingform_guide{{/str}}</small>
+          {{/hascomments}}
+          <small id="gradingform_guide-{{uniqid}}-help-{{id}}-remark" class="sr-only">{{#str}}grade_help, gradingform_guide{{/str}}</small>
+        </div>
       </div>
     </div>
   {{/criterion}}
 </form>
 {{#js}}
-require(['gradingform_guide/grades/grader/gradingpanel/comments'], function(Comments) {
+require(['gradingform_guide/grades/grader/gradingpanel/comments', 'core/auto_rows'], function(Comments, AutoRows) {
   Comments.init('gradingform_guide-{{uniqid}}');
+  AutoRows.init(document.getElementById('gradingform_guide-{{uniqid}}'));
 });
 {{/js}}
diff --git a/lang/en/grades.php b/lang/en/grades.php
@@ -118,6 +118,7 @@
 $string['categorytotal'] = 'Category total';
 $string['categorytotalname'] = 'Category total name';
 $string['categorytotalfull'] = '{$a->category} total';
+$string['collapsecriterion'] = 'Collapse criterion';
 $string['combo'] = 'Tabs and drop-down menu';
 $string['compact'] = 'Compact';
 $string['componentcontrolsvisibility'] = 'Whether this grade item is hidden is controlled by the activity settings.';
@@ -207,6 +208,7 @@
 $string['excluded'] = 'Excluded';
 $string['excluded_help'] = 'If ticked, the grade will not be included in any aggregation.';
 $string['expand'] = 'Expand category';
+$string['expandcriterion'] = 'Expand criterion';
 $string['export'] = 'Export';
 $string['exportalloutcomes'] = 'Export all outcomes';
 $string['exportfeedback'] = 'Include feedback in export';

diff --git a/theme/boost/scss/moodle/forms.scss b/theme/boost/scss/moodle/forms.scss
@@ -366,6 +366,7 @@ select[size="1"] {
 
 textarea[data-auto-rows] {
     overflow-x: hidden;
+    resize: none;
 }
 
 /** Display elements under labels in vertical forms regardless of the screen size. */

diff --git a/theme/boost/scss/moodle/grade.scss b/theme/boost/scss/moodle/grade.scss
@@ -240,20 +240,30 @@
     }
 }
 
-.criterion button.collapse[aria-expanded="true"]:before {
-    content: $fa-var-angle-down;
-    margin-right: 0;
-    @include fa-icon();
-    font-size: 16px;
-    width: 16px;
-}
+.criterion {
+    .description {
+        font-size: 1rem;
+    }
+
+    .criterion-toggle {
+        .expanded-icon {
+            display: block;
+        }
+
+        .collapsed-icon {
+            display: none;
+        }
 
-.criterion button.collapse[aria-expanded="false"]:before {
-    content: $fa-var-angle-up;
-    margin-right: 0;
-    @include fa-icon();
-    font-size: 16px;
-    width: 16px;
+        &.collapsed {
+            .expanded-icon {
+                display: none;
+            }
+
+            .collapsed-icon {
+                display: block;
+            }
+        }
+    }
 }
 
 // Set up grades layout.

diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
@@ -16067,7 +16067,8 @@ select[size="1"] {
   overflow: visible; }
 
 textarea[data-auto-rows] {
-  overflow-x: hidden; }
+  overflow-x: hidden;
+  resize: none; }
 
 /** Display elements under labels in vertical forms regardless of the screen size. */
 .mform.full-width-labels .fitem.row {
@@ -17407,29 +17408,20 @@ p.arrow_button {
     margin-left: 5px;
     margin-right: 12px; }
 
-.criterion button.collapse[aria-expanded="true"]:before {
-  content: "";
-  margin-right: 0;
-  display: inline-block;
-  font: normal normal normal 14px/1 FontAwesome;
-  font-size: inherit;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-size: 16px;
-  width: 16px; }
+.criterion .description {
+  font-size: 1rem; }
 
-.criterion button.collapse[aria-expanded="false"]:before {
-  content: "";
-  margin-right: 0;
-  display: inline-block;
-  font: normal normal normal 14px/1 FontAwesome;
-  font-size: inherit;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-size: 16px;
-  width: 16px; }
+.criterion .criterion-toggle .expanded-icon {
+  display: block; }
+
+.criterion .criterion-toggle .collapsed-icon {
+  display: none; }
+
+.criterion .criterion-toggle.collapsed .expanded-icon {
+  display: none; }
+
+.criterion .criterion-toggle.collapsed .collapsed-icon {
+  display: block; }
 
 .path-grade-edit-tree .setup-grades h4 {
   margin: 0; }

diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
@@ -16338,7 +16338,8 @@ select[size="1"] {
   overflow: visible; }
 
 textarea[data-auto-rows] {
-  overflow-x: hidden; }
+  overflow-x: hidden;
+  resize: none; }
 
 /** Display elements under labels in vertical forms regardless of the screen size. */
 .mform.full-width-labels .fitem.row {
@@ -17683,29 +17684,20 @@ p.arrow_button {
     margin-left: 5px;
     margin-right: 12px; }
 
-.criterion button.collapse[aria-expanded="true"]:before {
-  content: "";
-  margin-right: 0;
-  display: inline-block;
-  font: normal normal normal 14px/1 FontAwesome;
-  font-size: inherit;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-size: 16px;
-  width: 16px; }
+.criterion .description {
+  font-size: 1rem; }
 
-.criterion button.collapse[aria-expanded="false"]:before {
-  content: "";
-  margin-right: 0;
-  display: inline-block;
-  font: normal normal normal 14px/1 FontAwesome;
-  font-size: inherit;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-size: 16px;
-  width: 16px; }
+.criterion .criterion-toggle .expanded-icon {
+  display: block; }
+
+.criterion .criterion-toggle .collapsed-icon {
+  display: none; }
+
+.criterion .criterion-toggle.collapsed .expanded-icon {
+  display: none; }
+
+.criterion .criterion-toggle.collapsed .collapsed-icon {
+  display: block; }
 
 .path-grade-edit-tree .setup-grades h4 {
   margin: 0; }