From 4e53672929708e399583edc95c6e5633978fa5ba Mon Sep 17 00:00:00 2001
From: Ryan Wyllie <ryan@ryanwyllie.com>
Date: Tue, 5 Nov 2019 13:02:25 +0800
Subject: [PATCH] MDL-66893 grade: update rubric template for grader

---
 .../grades/grader/gradingpanel.mustache       | 100 +++++---
 lang/en/grades.php                            |   1 +
 .../local/grader/grade_placeholder.mustache   | 235 +++++++++++++++++-
 3 files changed, 286 insertions(+), 50 deletions(-)

diff --git a/grade/grading/form/rubric/templates/grades/grader/gradingpanel.mustache b/grade/grading/form/rubric/templates/grades/grader/gradingpanel.mustache
index 94845f15866..a3d31cbda0d 100644
--- a/grade/grading/form/rubric/templates/grades/grader/gradingpanel.mustache
+++ b/grade/grading/form/rubric/templates/grades/grader/gradingpanel.mustache
@@ -57,49 +57,71 @@
     <input type="hidden" name="instanceid" value="{{instanceid}}">
     <div id="rubric-advancedgrading-{{uniqid}}" class="criterion">
         {{#criteria}}
-            <div class="d-block mb-2">
-                <h5 class="d-inline px-0 font-weight-bold mb-0">{{{description}}}</h5>
-                <button class="d-inline btn p-0 font-weight-bold mb-0 pull-right collapse"
-                        type="button"
-                        data-toggle="collapse"
-                        data-target="#criteria-{{id}}"
-                        aria-expanded="true"
-                        aria-controls="criteria-{{id}}">
-                </button>
-            </div>
-            <div class="collapse show" id="criteria-{{id}}">
-                {{#levels}}
-                    <div class="form-check">
-                        <input class="form-check-input level"
-                               type="radio"
-                               name="advancedgrading[criteria][{{criterionid}}][levelid]"
-                               id="advancedgrading-criteria-{{criterionid}}-levels-{{id}}-definition"
-                               value="{{id}}"
-                                {{#checked}}
-                                    aria-checked="true"
-                                    tabindex="0"
-                                    checked
-                                {{/checked}}
-                                {{^checked}}
-                                    aria-checked="false"
-                                    tabindex="-1"
-                                {{/checked}}
-                        >
-                        <label class="w-100" for="advancedgrading-criteria-{{criterionid}}-levels-{{id}}-definition">
-                            <label class="font-weight-bold">
-                                {{{definition}}}
+            <div class="mb-3">
+                <div class="d-flex align-items-center mb-2">
+                    <h5 class="px-0 mb-0 description font-weight-bold">{{{description}}}</h5>
+                    <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 show" id="criteria-{{id}}">
+                    {{#levels}}
+                        <div class="form-check">
+                            <input class="form-check-input level"
+                                   type="radio"
+                                   name="advancedgrading[criteria][{{criterionid}}][levelid]"
+                                   id="advancedgrading-criteria-{{criterionid}}-levels-{{id}}-definition"
+                                   value="{{id}}"
+                                    {{#checked}}
+                                        aria-checked="true"
+                                        tabindex="0"
+                                        checked
+                                    {{/checked}}
+                                    {{^checked}}
+                                        aria-checked="false"
+                                        tabindex="-1"
+                                    {{/checked}}
+                            >
+                            <label class="w-100" for="advancedgrading-criteria-{{criterionid}}-levels-{{id}}-definition">
+                                <span>
+                                    {{{definition}}}
+                                </span>
+                                <span class="pull-right">
+                                    {{#str}}pointsvalue, gradingform_rubric, {{score}}{{/str}}
+                                </span>
                             </label>
-                            <label class="pull-right font-weight-bold">
-                                {{#str}}pointsvalue, gradingform_rubric, {{score}}{{/str}}
-                            </label>
-                        </label>
+                        </div>
+                    {{/levels}}
+                    <div class="form-group">
+                        <label class="text-muted" for="advancedgrading-criteria-{{id}}-remark">{{#str}} additionalfeedback, core_grades {{/str}}</label>
+                        <textarea class="form-control"
+                                  name="advancedgrading[criteria][{{id}}][remark]"
+                                  id="advancedgrading-criteria-{{id}}-remark"
+                                  cols="10"
+                                  rows="1"
+                                  data-max-rows="5"
+                                  data-auto-rows="true"
+                        >{{{remark}}}</textarea>
                     </div>
-                {{/levels}}
-                <div class="form-group">
-                    <label for="advancedgrading-criteria-{{id}}-remark">Additional feedback</label>
-                    <textarea class="form-control" name="advancedgrading[criteria][{{id}}][remark]" id="advancedgrading-criteria-{{id}}-remark" cols="10" rows="5">{{{remark}}}</textarea>
                 </div>
             </div>
         {{/criteria}}
     </div>
 </form>
+{{#js}}
+require(['core/auto_rows'], function(AutoRows) {
+    AutoRows.init(document.getElementById('gradingform_rubric-{{uniqid}}'));
+});
+{{/js}}
\ No newline at end of file
diff --git a/lang/en/grades.php b/lang/en/grades.php
index 7a8ecb76375..669b4ae31b5 100644
--- a/lang/en/grades.php
+++ b/lang/en/grades.php
@@ -30,6 +30,7 @@ $string['addfeedback'] = 'Add feedback';
 $string['addgradeletter'] = 'Add a grade letter';
 $string['addidnumbers'] = 'Add ID numbers';
 $string['additem'] = 'Add grade item';
+$string['additionalfeedback'] = 'Additional feedback';
 $string['addoutcome'] = 'Add an outcome';
 $string['addoutcomeitem'] = 'Add outcome item';
 $string['addscale'] = 'Add a scale';
diff --git a/mod/forum/templates/local/grades/local/grader/grade_placeholder.mustache b/mod/forum/templates/local/grades/local/grader/grade_placeholder.mustache
index 7431ede1a3a..1fc5d6413b5 100644
--- a/mod/forum/templates/local/grades/local/grader/grade_placeholder.mustache
+++ b/mod/forum/templates/local/grades/local/grader/grade_placeholder.mustache
@@ -30,14 +30,227 @@
     {
     }
 }}
-<div class="bg-pulse-grey w-25" style="height: 20px;"></div>
-<div class="bg-pulse-grey w-50 mt-1" style="height: 25px;"></div>
-
-<div class="bg-pulse-grey w-25 mt-3" style="height: 20px;"></div>
-<div class="bg-pulse-grey w-50 mt-1" style="height: 25px;"></div>
-
-<div class="bg-pulse-grey w-25 mt-3" style="height: 20px;"></div>
-<div class="bg-pulse-grey w-100 mt-1" style="height: 25px;"></div>
-
-<div class="bg-pulse-grey w-25 mt-3" style="height: 20px;"></div>
-<div class="bg-pulse-grey w-100 mt-1" style="height: 25px;"></div>
+<div class="d-flex flex-column mb-3">
+    <div class="d-flex align-items-center mb-2" style="height: 36px">
+        <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+        <div class="bg-pulse-grey ml-auto mr-2" style="height: 16px; width: 16px"></div>
+    </div>
+    <div class="d-flex flex-column">
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div>
+            <div class="bg-pulse-grey mb-2" style="height: 22px; width: 150px"></div>
+            <div class="bg-pulse-grey" style="height: 36px; width: 100%"></div>
+        </div>
+    </div>
+</div>
+<div class="d-flex flex-column mb-3">
+    <div class="d-flex align-items-center mb-2" style="height: 36px">
+        <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+        <div class="bg-pulse-grey ml-auto mr-2" style="height: 16px; width: 16px"></div>
+    </div>
+    <div class="d-flex flex-column">
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div>
+            <div class="bg-pulse-grey mb-2" style="height: 22px; width: 150px"></div>
+            <div class="bg-pulse-grey" style="height: 36px; width: 100%"></div>
+        </div>
+    </div>
+</div>
+<div class="d-flex flex-column mb-3">
+    <div class="d-flex align-items-center mb-2" style="height: 36px">
+        <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+        <div class="bg-pulse-grey ml-auto mr-2" style="height: 16px; width: 16px"></div>
+    </div>
+    <div class="d-flex flex-column">
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div>
+            <div class="bg-pulse-grey mb-2" style="height: 22px; width: 150px"></div>
+            <div class="bg-pulse-grey" style="height: 36px; width: 100%"></div>
+        </div>
+    </div>
+</div>
+<div class="d-flex flex-column mb-3">
+    <div class="d-flex align-items-center mb-2" style="height: 36px">
+        <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+        <div class="bg-pulse-grey ml-auto mr-2" style="height: 16px; width: 16px"></div>
+    </div>
+    <div class="d-flex flex-column">
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div>
+            <div class="bg-pulse-grey mb-2" style="height: 22px; width: 150px"></div>
+            <div class="bg-pulse-grey" style="height: 36px; width: 100%"></div>
+        </div>
+    </div>
+</div>
+<div class="d-flex flex-column mb-3">
+    <div class="d-flex align-items-center mb-2" style="height: 36px">
+        <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+        <div class="bg-pulse-grey ml-auto mr-2" style="height: 16px; width: 16px"></div>
+    </div>
+    <div class="d-flex flex-column">
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div>
+            <div class="bg-pulse-grey mb-2" style="height: 22px; width: 150px"></div>
+            <div class="bg-pulse-grey" style="height: 36px; width: 100%"></div>
+        </div>
+    </div>
+</div>
+<div class="d-flex flex-column mb-3">
+    <div class="d-flex align-items-center mb-2" style="height: 36px">
+        <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+        <div class="bg-pulse-grey ml-auto mr-2" style="height: 16px; width: 16px"></div>
+    </div>
+    <div class="d-flex flex-column">
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div>
+            <div class="bg-pulse-grey mb-2" style="height: 22px; width: 150px"></div>
+            <div class="bg-pulse-grey" style="height: 36px; width: 100%"></div>
+        </div>
+    </div>
+</div>
+<div class="d-flex flex-column mb-3">
+    <div class="d-flex align-items-center mb-2" style="height: 36px">
+        <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+        <div class="bg-pulse-grey ml-auto mr-2" style="height: 16px; width: 16px"></div>
+    </div>
+    <div class="d-flex flex-column">
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div class="d-flex align-items-center mb-2" style="height: 22px">
+            <div class="bg-pulse-grey rounded-circle mr-1" style="height: 16px; width: 16px"></div>
+            <div class="bg-pulse-grey" style="height: 19px; width: 100px"></div>
+            <div class="bg-pulse-grey ml-auto" style="height: 19px; width: 50px"></div>
+        </div>
+        <div>
+            <div class="bg-pulse-grey mb-2" style="height: 22px; width: 150px"></div>
+            <div class="bg-pulse-grey" style="height: 36px; width: 100%"></div>
+        </div>
+    </div>
+</div>
\ No newline at end of file