MDL-69111 mod_forum: forum grading on small viewports

- changes to make the forum grading UI accessible in small viewports to meet criterion 1.4.10 Reflow.
nilo72 · Jul 21, 2020 · 0489e9c · 0489e9c
1 parent 741d6dd
commit 0489e9c
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 25 deletions.
diff --git a/mod/forum/templates/local/grades/local/grader/grading.mustache b/mod/forum/templates/local/grades/local/grader/grading.mustache
@@ -92,8 +92,8 @@
                     {{> mod_forum/local/grades/local/grader/user_picker_placeholder }}
                 </div>
             </div>
-            <div class="body-container position-relative d-flex flex-column overflow-auto" data-region="body-container">
-                <div class="grader-grading-panel-display pt-3 overflow-auto" data-region="grading-panel-container">
+            <div class="body-container position-relative d-flex flex-column" data-region="body-container">
+                <div class="grader-grading-panel-display pt-3" data-region="grading-panel-container">
                     <h4 class="mb-0 h5 px-3 font-weight-normal">
                         {{#pix}} i/grading, core {{/pix}}{{#str}} gradingmodulename, core_grades, {{moduleName}} {{/str}}
                     </h4>

diff --git a/mod/forum/templates/local/grades/local/grader/navigation.mustache b/mod/forum/templates/local/grades/local/grader/navigation.mustache
@@ -34,7 +34,7 @@
         "moduleName": "Chef the Forum"
     }
 }}
-<nav id="nav-container-{{uniqid}}" class="grader-grading_navigation navbar" aria-label="{{#str}} forumgradingnavigation, mod_forum {{/str}}">
+<nav id="nav-container-{{uniqid}}" class="grader-grading_navigation navbar px-0 px-sm-3" aria-label="{{#str}} forumgradingnavigation, mod_forum {{/str}}">
     <div class="d-none d-sm-flex align-items-center">
         <a href="{{{courseUrl}}}" class="btn btn-link px-2 colour-inherit">
             <h5 class="d-inline px-0 mb-0">{{courseName}}</h5>
@@ -47,7 +47,7 @@
         <h5 class="d-inline px-2 mb-0 font-weight-bold">{{#str}}grading, forum{{/str}}</h5>
     </div>
 
-    <div class="ml-auto">
+    <div class="ml-1 ml-sm-auto">
         <button
             class="btn btn-icon icon-no-margin drawer-button mr-1 active"
             data-action="expand-grading-drawer"
@@ -60,7 +60,7 @@
             <span class="dir-rtl-hide" aria-hidden="true">{{#pix}} show-grader-panel, mod_forum, {{#str}} showgraderpanel, mod_forum {{/str}} {{/pix}}</span>
         </button>
         <button
-            class="btn btn-icon icon-no-margin drawer-button mr-1"
+            class="btn btn-icon icon-no-margin drawer-button mr-1 d-none d-sm-inline-block"
             aria-label="{{#str}} hidegraderpanel, mod_forum {{/str}}"
             data-action="collapse-grading-drawer"
             aria-controls="grading-drawer-{{uniqid}}"
@@ -71,21 +71,21 @@
             <span aria-hidden="true">{{#pix}} hide-grader-panel, mod_forum, {{#str}} hidegraderpanel, mod_forum {{/str}} {{/pix}}</span>
         </button>
         <button
-            class="btn btn-primary font-weight-bold ml-2 px-4"
+            class="btn btn-primary font-weight-bold ml-sm-2 px-4"
             data-action="savegrade"
         >
             {{#str}} save {{/str}}
         </button>
         <button
-            class="btn btn-secondary font-weight-bold ml-2 px-4"
+            class="btn btn-secondary font-weight-bold ml-1 ml-sm-2 px-4"
             aria-label="{{#str}} closegrader, mod_forum {{/str}}"
             data-action="closegrader"
             type="button"
         >
             {{#str}} close, mod_forum {{/str}}
         </button>
-        <div class="btn-group">
-        <button
+        <div class="btn-group d-none d-sm-inline-block">
+            <button
                 class="btn btn-icon text-muted icon-no-margin icon-size-3 ml-2"
                 type="button"
                 id="grader-actions-menu-{{uniqid}}"

diff --git a/mod/forum/templates/local/grades/local/grader/user_picker.mustache b/mod/forum/templates/local/grades/local/grader/user_picker.mustache
@@ -37,7 +37,7 @@
 
 <div class="d-flex align-items-center user-picker-container mb-2 py-2">
     <div aria-live="polite" data-region="user_picker/current_user"  class="sr-only"></div>
-    <div class="d-flex align-items-center" data-region="user_picker/user"></div>
+    <div class="d-flex align-items-center overflow-hidden" data-region="user_picker/user"></div>
     <div class="ml-auto flex-shrink-0">
         <nav aria-label="{{#str}} usernavigation, mod_forum {{/str}}">
             <ul class="pagination mb-0">

diff --git a/mod/forum/templates/local/grades/local/grader/user_picker/user.mustache b/mod/forum/templates/local/grades/local/grader/user_picker/user.mustache
@@ -45,7 +45,7 @@
     aria-hidden="true"
 >
 {{/profileimage}}
-<div>
+<div class="overflow-hidden">
     <h5
         class="mb-0 font-weight-bold user-full-name text-truncate"
         data-region="name"

diff --git a/theme/boost/scss/moodle/modules.scss b/theme/boost/scss/moodle/modules.scss
@@ -487,12 +487,15 @@ $grading-content-show-content-button-padding-left: calc(#{map-get($spacers, 2) *
 }
 
 .path-mod-forum .unified-grader {
-    .navbar {
-        max-height: none;
-        z-index: 1;
+    @include media-breakpoint-up(xs) {
+        .navbar {
+            max-height: none;
+            z-index: 1;
+        }
     }
 
     .body-container {
+        overflow: auto;
         &.hidden {
             display: none !important; /* stylelint-disable-line declaration-no-important */
         }
@@ -504,8 +507,8 @@ $grading-content-show-content-button-padding-left: calc(#{map-get($spacers, 2) *
     }
 
     .grader-grading-panel {
-        position: absolute;
         top: 0;
+        position: absolute;
         height: 100%;
         z-index: 0;
         width: $grading-drawer-width;
@@ -911,6 +914,13 @@ $grading-content-show-content-button-padding-left: calc(#{map-get($spacers, 2) *
     .path-mod-forum .unified-grader {
         .grader-grading-panel {
             width: 100%;
+            position: fixed;
+            height: calc(100vh - 50px);
+            overflow: scroll;
+            top: 50px;
+        }
+        .body-container {
+            overflow: visible;
         }
     }
 }

diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
@@ -16948,17 +16948,19 @@ select {
   max-height: none;
   z-index: 1; }
 
-.path-mod-forum .unified-grader .body-container.hidden {
-  display: none !important;
-  /* stylelint-disable-line declaration-no-important */ }
+.path-mod-forum .unified-grader .body-container {
+  overflow: auto; }
+  .path-mod-forum .unified-grader .body-container.hidden {
+    display: none !important;
+    /* stylelint-disable-line declaration-no-important */ }
 
 .path-mod-forum .unified-grader .userpicture {
   height: 60px;
   width: 60px; }
 
 .path-mod-forum .unified-grader .grader-grading-panel {
-  position: absolute;
   top: 0;
+  position: absolute;
   height: 100%;
   z-index: 0;
   width: 430px; }
@@ -17209,7 +17211,13 @@ select {
 
 @media (max-width: 575.98px) {
   .path-mod-forum .unified-grader .grader-grading-panel {
-    width: 100%; } }
+    width: 100%;
+    position: fixed;
+    height: calc(100vh - 50px);
+    overflow: scroll;
+    top: 50px; }
+  .path-mod-forum .unified-grader .body-container {
+    overflow: visible; } }
 
 .maincalendar .calendarmonth td,
 .maincalendar .calendarmonth th {

diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
@@ -17177,17 +17177,19 @@ select {
   max-height: none;
   z-index: 1; }
 
-.path-mod-forum .unified-grader .body-container.hidden {
-  display: none !important;
-  /* stylelint-disable-line declaration-no-important */ }
+.path-mod-forum .unified-grader .body-container {
+  overflow: auto; }
+  .path-mod-forum .unified-grader .body-container.hidden {
+    display: none !important;
+    /* stylelint-disable-line declaration-no-important */ }
 
 .path-mod-forum .unified-grader .userpicture {
   height: 60px;
   width: 60px; }
 
 .path-mod-forum .unified-grader .grader-grading-panel {
-  position: absolute;
   top: 0;
+  position: absolute;
   height: 100%;
   z-index: 0;
   width: 430px; }
@@ -17438,7 +17440,13 @@ select {
 
 @media (max-width: 575.98px) {
   .path-mod-forum .unified-grader .grader-grading-panel {
-    width: 100%; } }
+    width: 100%;
+    position: fixed;
+    height: calc(100vh - 50px);
+    overflow: scroll;
+    top: 50px; }
+  .path-mod-forum .unified-grader .body-container {
+    overflow: visible; } }
 
 .maincalendar .calendarmonth td,
 .maincalendar .calendarmonth th {