MOBILE-2588 assign: style rubrics table

src/addon/mod/assign/components/submission/addon-mod-assign-submission.html

@@ -197,7 +197,7 @@
 
                 <!-- Attempt status. -->
                 <ng-container *ngIf="isGrading && assign.attemptreopenmethod != attemptReopenMethodNone">
-                    <ion-item text-wrap >
+                    <ion-item text-wrap>
                         <h2>{{ 'addon.mod_assign.attemptsettings' | translate }}</h2>
                         <p *ngIf="assign.maxattempts == unlimitedAttempts">{{ 'addon.mod_assign.outof' | translate : {'$a': {'current': currentAttempt, 'total': maxAttemptsText} } }}</p>
                         <p *ngIf="assign.maxattempts != unlimitedAttempts">{{ 'addon.mod_assign.outof' | translate : {'$a': {'current': currentAttempt, 'total': assign.maxattempts} } }}</p>

src/addon/mod/assign/components/submission/submission.scss

@@ -16,3 +16,244 @@ ion-app.app-root addon-mod-assign-submission {
         display: none;
     }
 }
+
+core-format-text {
+
+    .gradingform_rubric_editform .status {
+        font-weight: normal;
+        text-transform: uppercase;
+        font-size: 60%;
+        padding: 0.25em;
+        border: 1px solid $gray-light;
+    }
+
+    .gradingform_rubric_editform .status.ready {
+        background-color: $green-light;
+        border-color: $green;
+    }
+
+    .gradingform_rubric_editform .status.draft {
+        background-color: $yellow-light;
+        border-color: $yellow;
+    }
+
+    .gradingform_rubric {
+        overflow: auto;
+        padding-bottom: 1.5em;
+        max-width: 720px;
+        position: relative;
+        margin: 0 auto;
+        tbody {
+            background: $white;
+        }
+    }
+
+    // Do not display remark column.
+    .gradingform_rubric .criterion .remark {
+        display: none;
+    }
+
+    .gradingform_rubric.editor .criterion .controls,
+    .gradingform_rubric .criterion .description,
+    .gradingform_rubric .criterion .levels,
+    .gradingform_rubric.editor .criterion .addlevel,
+    .gradingform_rubric .criterion .remark,
+    .gradingform_rubric .criterion .levels .level {
+        vertical-align: top;
+    }
+
+    .gradingform_rubric.editor .criterion .controls,
+    .gradingform_rubric .criterion .description,
+    .gradingform_rubric.editor .criterion .addlevel,
+    .gradingform_rubric .criterion .remark,
+    .gradingform_rubric .criterion .levels .level {
+        padding: 3px;
+    }
+
+    .gradingform_rubric .criteria {
+        height: 100%;
+    }
+
+    .gradingform_rubric .criterion {
+        border: 1px solid $gray;
+        overflow: hidden;
+    }
+
+    .gradingform_rubric .criterion.even {
+        background: $gray-lighter;
+    }
+
+    .gradingform_rubric .criterion .description {
+        width: 150px;
+        font-weight: bold;
+    }
+
+    .gradingform_rubric .criterion .levels table {
+        width: 100%;
+        height: 100%;
+    }
+
+    .gradingform_rubric .criterion .levels,
+    .gradingform_rubric .criterion .levels table,
+    .gradingform_rubric .criterion .levels table tbody {
+        padding: 0;
+        margin: 0;
+    }
+
+    .gradingform_rubric .criterion .levels .level {
+        border-left: 1px solid $gray;
+        max-width: 150px;
+    }
+
+    .gradingform_rubric .criterion .levels .level .level-wrapper {
+        position: relative;
+    }
+
+    .gradingform_rubric .criterion .levels .level.last {
+        border-right: 1px solid $gray;
+    }
+
+    .gradingform_rubric .plainvalue.empty {
+        font-style: italic;
+        color: $gray-dark;
+    }
+
+    .gradingform_rubric.editor .criterion .levels .level .delete {
+        position: absolute;
+        right: 0;
+    }
+
+    .gradingform_rubric .criterion .levels .level .score {
+        font-style: italic;
+        color: $green;
+        font-weight: bold;
+        margin-top: 5px;
+        white-space: nowrap;
+    }
+
+    .gradingform_rubric .criterion .levels .level .score .scorevalue {
+        padding-right: 5px;
+    }
+
+    /* Make invisible the buttons 'Move up' for the first criterion and
+       'Move down' for the last, because those buttons will make no change */
+    .gradingform_rubric.editor .criterion.first .controls .moveup input,
+    .gradingform_rubric.editor .criterion.last .controls .movedown input {
+        display: none;
+    }
+
+    /* evaluation */
+    .gradingform_rubric .criterion .levels .level.currentchecked {
+        background: #fff0f0;
+    }
+
+    .gradingform_rubric .criterion .levels .level.checked {
+        background: $green-light;
+        border: 1px solid $gray-darker;
+    }
+
+    .gradingform_rubric .options .optionsheading {
+        font-weight: bold;
+        font-size: 1.1em;
+        padding-bottom: 5px;
+    }
+
+    .gradingform_rubric .options .option {
+        padding-bottom: 2px;
+    }
+
+    .gradingform_rubric .options .option label {
+        margin-left: 5px;
+    }
+
+    .gradingform_rubric .options .option .value {
+        margin-left: 5px;
+        font-weight: bold;
+    }
+
+    .gradingform_rubric .criterion .levels.error {
+        border: 1px solid $red;
+    }
+
+    .gradingform_rubric .criterion .description.error,
+    .gradingform_rubric .criterion .levels .level .definition.error,
+    .gradingform_rubric .criterion .levels .level .score.error {
+        background: $gray-lighter;
+    }
+
+    .gradingform_rubric-regrade {
+        padding: 10px;
+        background: $gray-lighter;
+        border: 1px solid $red-light;
+        margin-bottom: 10px;
+    }
+
+    .gradingform_rubric-restored {
+        padding: 10px;
+        background: $yellow-light;
+        border: 1px solid $yellow;
+        margin-bottom: 10px;
+    }
+
+    .gradingform_rubric-error {
+        color: $red;
+        font-weight: bold;
+    }
+
+    /* special classes for elements created by rubriceditor.js */
+    .gradingform_rubric.editor .hiddenelement {
+        display: none;
+    }
+
+    .gradingform_rubric.editor .pseudotablink {
+        background-color: transparent;
+        border: 0 solid;
+        height: 1px;
+        width: 1px;
+        color: transparent;
+        padding: 0;
+        margin: 0;
+        position: relative;
+        float: right;
+    }
+
+    .gradingform_rubric {
+        padding-bottom: 0;
+        max-width: none;
+    }
+
+    .gradingform_rubric .criterion .description {
+        font-weight: 500;
+        min-width: 150px;
+    }
+
+    .gradingform_rubric .criterion .levels {
+        background-color: $white;
+    }
+
+    .gradingform_rubric .criterion,
+    .gradingform_rubric .criterion.even {
+        background-color: transparent;
+    }
+
+    .gradingform_rubric.evaluate .criterion .levels .level:hover {
+        background-color: $green-light;
+    }
+
+    .gradingform_rubric .criterion .levels .level.checked {
+        background-color: $green-light;
+        border: none;
+        border-left: 1px solid $gray;
+    }
+
+    .gradingform_rubric .criterion .levels .level .score {
+        color: $green;
+        font-weight: 500;
+        font-style: normal;
+        margin-top: 20px;
+    }
+
+    .gradingform_rubric .criterion .remark textarea {
+        margin-bottom: 0;
+    }
+}