MDL-76212 gradebook_nav: Fixed tertiary nav for smaller screens

grade/report/singleview/index.php

@@ -121,7 +121,7 @@ if ($itemtype == 'user') {
         true, null, null, $report->screen->item, $actionbar);
 } else {
     print_grade_page_head($course->id, 'report', 'singleview', $reportname, false, $button,
-        true, null, null, null, $actionbar, false);
+        true, null, null, null, $actionbar);
 }
 
 if ($data = data_submitted()) {

grade/report/singleview/templates/action_bar.mustache

@@ -73,36 +73,35 @@
 <div class="container-fluid tertiary-navigation full-width-bottom-border">
     <div class="row">
         {{#generalnavselector}}
-            <div class="navitem">
+            <div class="navitem order-1">
                 {{>core/tertiary_navigation_selector}}
             </div>
-            <div class="navitem-divider"></div>
+            <div class="navitem-divider d-none d-sm-flex order-1"></div>
         {{/generalnavselector}}
         {{#groupselector}}
-            <div class="navitem">
+            <div class="navitem order-2">
                 {{{.}}}
             </div>
-            <div class="navitem-divider"></div>
+            <div class="navitem-divider d-none d-sm-flex order-2"></div>
         {{/groupselector}}
         {{#itemselector}}
-            <div class="navitem">
+            <div class="navitem order-3">
                 {{{.}}}
             </div>
-            <div class="navitem-divider"></div>
+            <div class="navitem-divider d-none d-sm-flex order-3"></div>
         {{/itemselector}}
         {{#pagetoggler}}
-            <div class="d-flex ml-auto">
+            <div class="d-flex row ml-0 ml-sm-auto order-4 px-0">
                 {{#bulkactions}}
-                        <div class="navitem-divider"></div>
-                        <div class="navitem">{{{bulkactions}}}</div>
-                        {{#js}}
-                            require(['gradereport_singleview/bulkactions'], function(bulkactions) {
-                            bulkactions.init();
-                            });
-                        {{/js}}
+                    <div class="d-flex navitem ml-0 ml-sm-auto mr-3">{{{bulkactions}}}</div>
+                    {{#js}}
+                        require(['gradereport_singleview/bulkactions'], function(bulkactions) {
+                        bulkactions.init();
+                        });
+                    {{/js}}
+                    <div class="navitem-divider d-none d-sm-flex"></div>
                 {{/bulkactions}}
-                <div class="navitem-divider"></div>
-                <div class="navitem">
+                <div class="d-flex navitem ml-0 mr-auto mr-sm-0 ml-sm-auto">
                     {{>gradereport_singleview/page_toggler}}
                 </div>
             </div>

grade/report/singleview/templates/grade_item_selector.mustache

@@ -48,7 +48,7 @@
     >
         <div class="align-items-center d-flex">
             {{#selectedoption}}
-                <div class="d-block pr-3">
+                <div class="d-block pr-3 text-truncate">
                     <span class="d-block small">
                         {{#str}} selectagrade, gradereport_singleview {{/str}}
                     </span>

grade/report/singleview/templates/page_toggler.mustache

@@ -28,7 +28,7 @@
         "gradeselectactive": "true"
     }
 }}
-<div class="page-toggler d-flex">
+<div class="page-toggler d-block d-sm-flex text-nowrap">
     {{#displaylabel}}
         <p class="my-auto mr-3 text-uppercase">{{#str}}viewby, gradereport_singleview{{/str}}</p>
     {{/displaylabel}}

grade/templates/user_selector.mustache

@@ -66,7 +66,7 @@
                         <span class="userinitials"></span>
                     {{/image}}
                 </div>
-                <div class="selected-option-info d-block pr-3">
+                <div class="selected-option-info d-block pr-3 text-truncate">
                     <span class="selected-option-text p-0 font-weight-bold">
                         {{text}}
                     </span>

theme/boost/scss/moodle/tertiarynavigation.scss

@@ -38,7 +38,7 @@
     }
 
     .row {
-        column-gap: 20px;
+        column-gap: 10px;
     }
 
     .tertiary-navigation-selector {
@@ -53,6 +53,13 @@
     .navitem-divider:not(:last-child) {
         margin-right: 20px;
     }
+
+    // Constrain the width of each tertiary buttons triggering element.
+    .btn {
+        & > div {
+            max-width: 200px;
+        }
+    }
 }
 
 @include media-breakpoint-down(sm) {
@@ -63,6 +70,12 @@
     }
 }
 
+@include media-breakpoint-down(xs) {
+    .tertiary-navigation .page-toggler > p {
+        font-size: 80%;
+    }
+}
+
 @media print {
     .tertiary-navigation {
         display: none;

theme/boost/style/moodle.css

@@ -37675,7 +37675,7 @@ div.editor_atto_toolbar button .icon {
   margin-bottom: 25px;
 }
 .tertiary-navigation .row {
-  column-gap: 20px;
+  column-gap: 10px;
 }
 .tertiary-navigation .tertiary-navigation-selector .dropdown-toggle {
   padding: 0;
@@ -37686,12 +37686,20 @@ div.editor_atto_toolbar button .icon {
 .tertiary-navigation .navitem-divider:not(:last-child) {
   margin-right: 20px;
 }
+.tertiary-navigation .btn > div {
+  max-width: 200px;
+}
 
 @media (max-width: 767.98px) {
   .tertiary-navigation .mform {
     padding-left: initial;
   }
 }
+@media (max-width: 575.98px) {
+  .tertiary-navigation .page-toggler > p {
+    font-size: 80%;
+  }
+}
 @media print {
   .tertiary-navigation {
     display: none;

theme/classic/style/moodle.css

@@ -37609,7 +37609,7 @@ div.editor_atto_toolbar button .icon {
   margin-bottom: 25px;
 }
 .tertiary-navigation .row {
-  column-gap: 20px;
+  column-gap: 10px;
 }
 .tertiary-navigation .tertiary-navigation-selector .dropdown-toggle {
   padding: 0;
@@ -37620,12 +37620,20 @@ div.editor_atto_toolbar button .icon {
 .tertiary-navigation .navitem-divider:not(:last-child) {
   margin-right: 20px;
 }
+.tertiary-navigation .btn > div {
+  max-width: 200px;
+}
 
 @media (max-width: 767.98px) {
   .tertiary-navigation .mform {
     padding-left: initial;
   }
 }
+@media (max-width: 575.98px) {
+  .tertiary-navigation .page-toggler > p {
+    font-size: 80%;
+  }
+}
 @media print {
   .tertiary-navigation {
     display: none;