From a4c611febb133ade296abb6bfb28d344f50be85e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= <mikel@moodle.com>
Date: Tue, 26 Mar 2024 16:10:08 +0100
Subject: [PATCH] MDL-81307 core_courseformat: Add bulk styles for small
 devices

---
 .../local/content/bulkedittools.mustache      | 12 +++++------
 course/format/tests/behat/bulk_select.feature | 13 ++++++++++++
 theme/boost/scss/moodle/course.scss           | 20 +++++++++++++++++++
 theme/boost/style/moodle.css                  | 19 ++++++++++++++++++
 theme/classic/style/moodle.css                | 19 ++++++++++++++++++
 5 files changed, 77 insertions(+), 6 deletions(-)

diff --git a/course/format/templates/local/content/bulkedittools.mustache b/course/format/templates/local/content/bulkedittools.mustache
index a29f6dc4797..b2a3a8d29c2 100644
--- a/course/format/templates/local/content/bulkedittools.mustache
+++ b/course/format/templates/local/content/bulkedittools.mustache
@@ -35,7 +35,7 @@
     }
 }}
 {{< core/sticky_footer }}
-    {{$ stickyclasses }} justify-content-between {{/ stickyclasses }}
+    {{$ stickyclasses }} justify-content-center bulkactions {{/ stickyclasses }}
     {{$ disable }} data-disable="true" {{/ disable }}
     {{$ extradata }} data-for="bulkedittools" {{/ extradata }}
     {{$ stickycontent }}
@@ -45,7 +45,7 @@
             {{#str}} selectall {{/str}}
         </label>
     </div>
-    <div data-for="bulktools">
+    <div class="mx-auto" data-for="bulktools">
         {{^hasactions}}
         {{#str}} nobulkaction, core_courseformat {{/str}}
         {{/hasactions}}
@@ -60,8 +60,8 @@
                     data-for="bulkaction"
                     {{#title}} title="{{title}}" {{/title}}
                 >
-                    <span class="w-100 pl-2">{{#pix}}{{icon}}{{/pix}}</span>
-                    <span>{{name}}</span>
+                    <span class="bulkaction-icon w-100 pl-2">{{#pix}}{{icon}}{{/pix}}</span>
+                    <span class="bulkaction-name">{{name}}</span>
                 </button>
             </li>
             {{/actions}}
@@ -69,7 +69,7 @@
         {{/hasactions}}
     </div>
     <div class="d-flex flex-column">
-        <div class="ml-auto">
+        <div class="bulkcancel ml-auto">
             <button
                 class="btn pr-0 pb-0"
                 data-action="bulkcancel"
@@ -79,7 +79,7 @@
                 {{#pix}} e/cancel, core {{/pix}}
             </button>
         </div>
-        <div data-for="bulkcount">
+        <div class="bulkcount" data-for="bulkcount">
             {{#str}} bulkselection, core_courseformat, 0 {{/str}}
         </div>
     </div>
diff --git a/course/format/tests/behat/bulk_select.feature b/course/format/tests/behat/bulk_select.feature
index 80b57b424f0..bb50810bc24 100644
--- a/course/format/tests/behat/bulk_select.feature
+++ b/course/format/tests/behat/bulk_select.feature
@@ -228,3 +228,16 @@ Feature: Bulk activity and section selection.
     When I click on "Select section Section 1" "checkbox"
     And I click on "Select section Section 2" "checkbox"
     Then I should see "2 selected" in the "sticky-footer" "region"
+
+  Scenario: Bulk selection in small devices
+    Given I change the viewport size to "mobile"
+    And I close block drawer if open
+    When I click on "Bulk actions" "button"
+    Then I should not see "0 selected" in the "sticky-footer" "region"
+    And I should not see "Select all" in the "sticky-footer" "region"
+    And I should not see "Availability" in the "sticky-footer" "region"
+    And I should not see "Duplicate" in the "sticky-footer" "region"
+    And I should not see "Move" in the "sticky-footer" "region"
+    And I should not see "Delete" in the "sticky-footer" "region"
+    And I click on "Close bulk actions" "button" in the "sticky-footer" "region"
+    And "sticky-footer" "region" should not be visible
diff --git a/theme/boost/scss/moodle/course.scss b/theme/boost/scss/moodle/course.scss
index 3ce47eab753..8451484ecc3 100644
--- a/theme/boost/scss/moodle/course.scss
+++ b/theme/boost/scss/moodle/course.scss
@@ -1651,6 +1651,26 @@ $divider-hover-color: $primary !default;
     }
 }
 
+// Custom styles for bulk actions sticky footer in small devices.
+.sticky-footer-content.bulkactions {
+    @include media-breakpoint-down(sm) {
+        position: relative;
+        .form-check,
+        .bulkaction-name,
+        .bulkcount {
+            display: none;
+        }
+        .actions button {
+            padding: 0 map-get($spacers, 2);
+        }
+        .bulkcancel {
+            position: absolute;
+            top: 0;
+            right: 0;
+        }
+    }
+}
+
 /* Activity completion */
 
 .defaultactivitycompletion-item {
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 6d9bc7ec47b..c4a0d0f28df 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -29810,6 +29810,25 @@ span.editinstructions .alert-link {
   }
 }
 
+@media (max-width: 767.98px) {
+  .sticky-footer-content.bulkactions {
+    position: relative;
+  }
+  .sticky-footer-content.bulkactions .form-check,
+  .sticky-footer-content.bulkactions .bulkaction-name,
+  .sticky-footer-content.bulkactions .bulkcount {
+    display: none;
+  }
+  .sticky-footer-content.bulkactions .actions button {
+    padding: 0 0.5rem;
+  }
+  .sticky-footer-content.bulkactions .bulkcancel {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}
+
 /* Activity completion */
 .defaultactivitycompletion-item a {
   color: #000;
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 7a5c2c9068b..dfd6ff997e0 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -29810,6 +29810,25 @@ span.editinstructions .alert-link {
   }
 }
 
+@media (max-width: 767.98px) {
+  .sticky-footer-content.bulkactions {
+    position: relative;
+  }
+  .sticky-footer-content.bulkactions .form-check,
+  .sticky-footer-content.bulkactions .bulkaction-name,
+  .sticky-footer-content.bulkactions .bulkcount {
+    display: none;
+  }
+  .sticky-footer-content.bulkactions .actions button {
+    padding: 0 0.5rem;
+  }
+  .sticky-footer-content.bulkactions .bulkcancel {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}
+
 /* Activity completion */
 .defaultactivitycompletion-item a {
   color: #000;