From 5b8ad6ae30e8325d6aa434ec5c51ed01f54c2459 Mon Sep 17 00:00:00 2001
From: Kevin Percy <kevin.percy@moodle.com>
Date: Wed, 8 Feb 2023 20:33:50 +0800
Subject: [PATCH] MDL-76212 gradebook_nav: Fixed tertiary nav for smaller
 screens

---
 grade/report/singleview/index.php             |  2 +-
 .../singleview/templates/action_bar.mustache  | 31 +++++++++----------
 .../templates/grade_item_selector.mustache    |  2 +-
 .../templates/page_toggler.mustache           |  2 +-
 grade/templates/user_selector.mustache        |  2 +-
 .../boost/scss/moodle/tertiarynavigation.scss | 15 ++++++++-
 theme/boost/style/moodle.css                  |  8 ++++-
 theme/classic/style/moodle.css                |  8 ++++-
 8 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/grade/report/singleview/index.php b/grade/report/singleview/index.php
index 29a201f08c0..f9867c08c62 100644
--- a/grade/report/singleview/index.php
+++ b/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()) {
diff --git a/grade/report/singleview/templates/action_bar.mustache b/grade/report/singleview/templates/action_bar.mustache
index f2e80c0c0e5..b6f45687805 100644
--- a/grade/report/singleview/templates/action_bar.mustache
+++ b/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>
diff --git a/grade/report/singleview/templates/grade_item_selector.mustache b/grade/report/singleview/templates/grade_item_selector.mustache
index 0f68a908c94..da9fc322ad9 100644
--- a/grade/report/singleview/templates/grade_item_selector.mustache
+++ b/grade/report/singleview/templates/grade_item_selector.mustache
@@ -33,7 +33,7 @@
     <button aria-expanded="false" data-toggle="dropdown" class="btn dropdown-toggle d-flex text-left align-items-center p-0" data-courseid="{{courseid}}" aria-label="{{#str}} selectagrade, gradereport_singleview {{/str}}">
         <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>
diff --git a/grade/report/singleview/templates/page_toggler.mustache b/grade/report/singleview/templates/page_toggler.mustache
index 25f01e5c195..d8676f2e191 100644
--- a/grade/report/singleview/templates/page_toggler.mustache
+++ b/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}}
diff --git a/grade/templates/user_selector.mustache b/grade/templates/user_selector.mustache
index b77d2f5e24a..20309d92cc4 100644
--- a/grade/templates/user_selector.mustache
+++ b/grade/templates/user_selector.mustache
@@ -50,7 +50,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>
diff --git a/theme/boost/scss/moodle/tertiarynavigation.scss b/theme/boost/scss/moodle/tertiarynavigation.scss
index 696e22595d8..1bb167c41ed 100644
--- a/theme/boost/scss/moodle/tertiarynavigation.scss
+++ b/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;
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 644d4c9863f..d9fd98bef09 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -21983,7 +21983,7 @@ div.editor_atto_toolbar button .icon {
   .tertiary-navigation > div.urlselect {
     margin-bottom: 25px; }
   .tertiary-navigation .row {
-    column-gap: 20px; }
+    column-gap: 10px; }
   .tertiary-navigation .tertiary-navigation-selector .dropdown-toggle {
     padding: 0;
     font-size: 1.4rem;
@@ -21991,11 +21991,17 @@ div.editor_atto_toolbar button .icon {
   .tertiary-navigation .navitem:not(:last-child),
   .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; } }
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 96df00d6496..91d5df258c5 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -21929,7 +21929,7 @@ div.editor_atto_toolbar button .icon {
   .tertiary-navigation > div.urlselect {
     margin-bottom: 25px; }
   .tertiary-navigation .row {
-    column-gap: 20px; }
+    column-gap: 10px; }
   .tertiary-navigation .tertiary-navigation-selector .dropdown-toggle {
     padding: 0;
     font-size: 1.4rem;
@@ -21937,11 +21937,17 @@ div.editor_atto_toolbar button .icon {
   .tertiary-navigation .navitem:not(:last-child),
   .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; } }