From a81e6914d7aba04a458d14b6bf9b0d538c084158 Mon Sep 17 00:00:00 2001
From: Bas Brands <bas@moodle.com>
Date: Wed, 26 Sep 2018 10:18:11 +0200
Subject: [PATCH] MDL-63113 theme boost: initialsbar wrapping

---
 theme/boost/scss/moodle/core.scss             | 11 -------
 theme/boost/style/moodle.css                  |  8 -----
 .../templates/core/initials_bar.mustache      | 32 +++++++++----------
 3 files changed, 16 insertions(+), 35 deletions(-)

diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index 02806c6070d..fc81253333d 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -1088,17 +1088,6 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
     text-align: center;
 }
 
-
-.initialbarlabel {
-    display: inline-block;
-    width: 6em;
-    float: left;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-
 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
 .moodle-dialogue-base .moodle-dialogue-lightbox {
     background-color: $gray;
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index fd959e4dbe7..2aa66236b7c 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -9662,14 +9662,6 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
   white-space: nowrap;
   text-align: center; }
 
-.initialbarlabel {
-  display: inline-block;
-  width: 6em;
-  float: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap; }
-
 /* Moodle Dialogue Settings (moodle-core-dialogue)  */
 .moodle-dialogue-base .moodle-dialogue-lightbox {
   background-color: #495057; }
diff --git a/theme/boost/templates/core/initials_bar.mustache b/theme/boost/templates/core/initials_bar.mustache
index eca2445f19d..7f02e93d3ee 100644
--- a/theme/boost/templates/core/initials_bar.mustache
+++ b/theme/boost/templates/core/initials_bar.mustache
@@ -73,24 +73,24 @@
          ]
     }
 }}
-<div class="initialbar {{class}} d-flex">
-    <span class="initialbarlabel">{{title}}</span>
-    <ul class="pagination pagination-sm">
-    {{#current}}
-        <li class="initialbarall page-item">
-            <a class="page-link" href="{{url}}">{{all}}</a>
-        </li>
-    {{/current}}
-    {{^current}}
-        <li class="initialbarall page-item active">
-            <a class="page-link">{{all}}</a>
-        </li>
-    {{/current}}
-    </ul>
-    <div class="initialbargroups d-flex">
+<div class="initialbar {{class}} d-flex flex-wrap justify-content-center justify-content-md-start">
+    <span class="initialbarlabel mr-2">{{title}}</span>
+
+    <div class="initialbargroups d-flex flex-wrap justify-content-center justify-content-md-start">
+        <ul class="pagination pagination-sm">
+        {{#current}}
+            <li class="initialbarall page-item">
+                <a class="page-link" href="{{url}}">{{all}}</a>
+            </li>
+        {{/current}}
+        {{^current}}
+            <li class="initialbarall page-item active">
+                <a class="page-link">{{all}}</a>
+            </li>
+        {{/current}}
+        </ul>
         {{#group}}
             <ul class="pagination pagination-sm">
-
                 {{#letter}}
                     {{#selected}}
                         <li class="page-item active {{name}}"><span class="page-link">{{name}}</span></li>