MDL-81307 core_courseformat: Add bulk styles for small devices

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>

course/format/tests/behat/bulk_select.feature

@@ -227,3 +227,16 @@ Feature: Bulk activity and section selection.
     When I click on "Select topic Topic 1" "checkbox"
     And I click on "Select topic Topic 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

theme/boost/scss/moodle/course.scss

@@ -1805,6 +1805,25 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
     }
 }
 
+// Custom styles for bulk actions sticky footer in small devices.
+.stickyfooter.bulkactions {
+    @include media-breakpoint-down(sm) {
+        .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 {

theme/boost/scss/moodle/debug.scss

@@ -10,7 +10,7 @@ body.behat-site {
     // Sticky footer can overlap with elements so we keep it relative for behat.
     &.hasstickyfooter .stickyfooter,
     .stickyfooter {
-        position: inherit;
+        position: relative;
         z-index: inherit;
     }
 

theme/boost/style/moodle.css

@@ -29945,6 +29945,22 @@ span.editinstructions .alert-link {
     margin-left: 2rem;
   }
 }
+@media (max-width: 767.98px) {
+  .stickyfooter.bulkactions .form-check,
+  .stickyfooter.bulkactions .bulkaction-name,
+  .stickyfooter.bulkactions .bulkcount {
+    display: none;
+  }
+  .stickyfooter.bulkactions .actions button {
+    padding: 0 0.5rem;
+  }
+  .stickyfooter.bulkactions .bulkcancel {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}
+
 /* Activity completion */
 .defaultactivitycompletion-item a {
   color: #000;
@@ -36254,7 +36270,7 @@ body.behat-site .fixed-top {
 }
 body.behat-site.hasstickyfooter .stickyfooter,
 body.behat-site .stickyfooter {
-  position: inherit;
+  position: relative;
   z-index: inherit;
 }
 body.behat-site .dropdown-item {

theme/classic/style/moodle.css

@@ -29945,6 +29945,22 @@ span.editinstructions .alert-link {
     margin-left: 2rem;
   }
 }
+@media (max-width: 767.98px) {
+  .stickyfooter.bulkactions .form-check,
+  .stickyfooter.bulkactions .bulkaction-name,
+  .stickyfooter.bulkactions .bulkcount {
+    display: none;
+  }
+  .stickyfooter.bulkactions .actions button {
+    padding: 0 0.5rem;
+  }
+  .stickyfooter.bulkactions .bulkcancel {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}
+
 /* Activity completion */
 .defaultactivitycompletion-item a {
   color: #000;
@@ -36188,7 +36204,7 @@ body.behat-site .fixed-top {
 }
 body.behat-site.hasstickyfooter .stickyfooter,
 body.behat-site .stickyfooter {
-  position: inherit;
+  position: relative;
   z-index: inherit;
 }
 body.behat-site .dropdown-item {