MDL-63028 Theme boost: flexbox for Boost footer

theme/boost/scss/moodle/blocks.scss

@@ -57,10 +57,6 @@ $blocks-plus-gutter: $blocks-column-width + ( $grid-gutter-width / 2 );
 }
 
 // Required for IE11 to prevent blocks being pushed under the content.
-#region-main {
-    float: left;
-    width: 100%;
-}
 #region-main-settings-menu.has-blocks,
 #region-main.has-blocks {
     display: inline-block;

theme/boost/scss/moodle/core.scss

@@ -5,10 +5,11 @@
 // want white default colour.
 $bg-inverse-link-color: #fff !default;
 
-#region-main > .card {
+#region-main {
     overflow-x: auto;
     overflow-y: visible;
-    min-height: 45rem;
+    border: $card-border-width solid $card-border-color;
+    padding: $card-spacer-x;
 }
 
 .context-header-settings-menu,

theme/boost/scss/moodle/sticky-footer.scss

@@ -1,7 +1,6 @@
 /**
  * This file contains the styles required to make the footer sticky.
  */
-$footer-min-height: 130px !default;
 
 html,
 body {
@@ -9,18 +8,18 @@ body {
 }
 
 #page-wrapper {
-    min-height: 100%;
-    padding-bottom: $spacer;
-    margin-bottom: -$footer-min-height;
-}
-
-#page-wrapper::after {
-    content: "";
-    display: block;
-    min-height: $footer-min-height;
-}
-
-#page-footer {
-    min-height: $footer-min-height;
-    text-align: left;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    #page {
+        flex: 1 0 auto;
+        display: flex;
+        flex-direction: column;
+        #page-content {
+            flex: 1 0 auto;
+        }
+    }
+    #page-footer {
+        flex-shrink: 0;
+    }
 }

theme/boost/style/moodle.css

@@ -8790,10 +8790,11 @@ input[disabled] {
 }
 */
 /* core.less */
-#region-main > .card, #page-enrol-users #region-main > #filterform, .que #region-main > .history, .userprofile .profile_tree #region-main > section, #region-main > .groupinfobox, #region-main > .well {
+#region-main {
   overflow-x: auto;
   overflow-y: visible;
-  min-height: 45rem; }
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  padding: 1.25rem; }
 
 .context-header-settings-menu,
 .region-main-settings-menu {
@@ -11020,10 +11021,6 @@ div.editor_atto_toolbar button .icon {
   border-bottom-left-radius: 0.5rem;
   float: right; }
 
-#region-main {
-  float: left;
-  width: 100%; }
-
 #region-main-settings-menu.has-blocks,
 #region-main.has-blocks {
   display: inline-block;
@@ -16465,18 +16462,17 @@ body {
   height: 100%; }
 
 #page-wrapper {
-  min-height: 100%;
-  padding-bottom: 1rem;
-  margin-bottom: -130px; }
-
-#page-wrapper::after {
-  content: "";
-  display: block;
-  min-height: 130px; }
-
-#page-footer {
-  min-height: 130px;
-  text-align: left; }
+  height: 100%;
+  display: flex;
+  flex-direction: column; }
+  #page-wrapper #page {
+    flex: 1 0 auto;
+    display: flex;
+    flex-direction: column; }
+    #page-wrapper #page #page-content {
+      flex: 1 0 auto; }
+  #page-wrapper #page-footer {
+    flex-shrink: 0; }
 
 .popover-region {
   float: right;

theme/boost/templates/columns1.mustache

@@ -45,17 +45,13 @@
     {{{ output.standard_top_of_body_html }}}
 
     <div id="page" class="container-fluid">
-        <div id="page-content" class="row">
+        <div id="page-content" class="row pb-3">
             <div id="region-main-box" class="col-12">
                 <section id="region-main">
-                    <div class="card">
-                        <div class="card-body">
-                            {{{ output.course_content_header }}}
-                            {{{ output.main_content }}}
-                            {{{ output.activity_navigation }}}
-                            {{{ output.course_content_footer }}}
-                        </div>
-                    </div>
+                    {{{ output.course_content_header }}}
+                    {{{ output.main_content }}}
+                    {{{ output.activity_navigation }}}
+                    {{{ output.course_content_footer }}}
                 </section>
             </div>
         </div>

theme/boost/templates/columns2.mustache

@@ -56,12 +56,12 @@
 
     {{{ output.standard_top_of_body_html }}}
 
-    {{>theme_boost/navbar}}
+    {{> theme_boost/navbar }}
 
     <div id="page" class="container-fluid">
         {{{ output.full_header }}}
 
-        <div id="page-content" class="row">
+        <div id="page-content" class="row pb-3">
             <div id="region-main-box" class="col-12">
                 {{#hasregionmainsettingsmenu}}
                 <div id="region-main-settings-menu" class="d-print-none {{#hasblocks}}has-blocks{{/hasblocks}}">
@@ -69,17 +69,15 @@
                 </div>
                 {{/hasregionmainsettingsmenu}}
                 <section id="region-main" {{#hasblocks}}class="has-blocks mb-3"{{/hasblocks}}>
-                    <div class="card">
-                        <div class="card-body">
-                            {{#hasregionmainsettingsmenu}}
-                                <div class="region_main_settings_menu_proxy"></div>
-                            {{/hasregionmainsettingsmenu}}
-                            {{{ output.course_content_header }}}
-                            {{{ output.main_content }}}
-                            {{{ output.activity_navigation }}}
-                            {{{ output.course_content_footer }}}
-                        </div>
-                    </div>
+
+                    {{#hasregionmainsettingsmenu}}
+                        <div class="region_main_settings_menu_proxy"></div>
+                    {{/hasregionmainsettingsmenu}}
+                    {{{ output.course_content_header }}}
+                    {{{ output.main_content }}}
+                    {{{ output.activity_navigation }}}
+                    {{{ output.course_content_footer }}}
+
                 </section>
                 {{#hasblocks}}
                 <section data-region="blocks-column" class="d-print-none">
@@ -90,10 +88,9 @@
         </div>
     </div>
     {{> theme_boost/nav-drawer }}
+    {{> theme_boost/footer }}
 </div>
 
-{{> theme_boost/footer }}
-
 </body>
 </html>
 {{#js}}

theme/boost/templates/secure.mustache

@@ -60,11 +60,11 @@
         <div id="page-content" class="row">
             <div id="region-main-box" class="col-12">
                 <section id="region-main" {{#hasblocks}}class="has-blocks"{{/hasblocks}}>
-                    <div class="card card-block">
+
                     {{{ output.course_content_header }}}
                     {{{ output.main_content }}}
                     {{{ output.course_content_footer }}}
-                    </div>
+
                 </section>
                 {{#hasblocks}}
                 <section data-region="blocks-column">
@@ -74,14 +74,15 @@
             </div>
         </div>
     </div>
-</div>
-<footer id="page-footer" class="py-3 bg-dark text-light">
-    <div class="container">
-        <div id="course-footer">{{{ output.course_footer }}}</div>
+    <footer id="page-footer" class="py-3 bg-dark text-light">
+        <div class="container">
+            <div id="course-footer">{{{ output.course_footer }}}</div>
+
+            {{{ output.standard_end_of_body_html }}}
+        </div>
+    </footer>
+</div>
 
-        {{{ output.standard_end_of_body_html }}}
-    </div>
-</footer>
 
 </body>
 </html>