From bf45d7eba30b18547fe0db236f2d019f4c94233f Mon Sep 17 00:00:00 2001 From: Bas Brands Date: Tue, 31 Jul 2018 15:24:36 +0200 Subject: [PATCH] MDL-63028 Theme boost: flexbox for Boost footer --- theme/boost/scss/moodle/blocks.scss | 4 --- theme/boost/scss/moodle/core.scss | 5 ++-- theme/boost/scss/moodle/sticky-footer.scss | 29 ++++++++++---------- theme/boost/style/moodle.css | 32 ++++++++++------------ theme/boost/templates/columns1.mustache | 14 ++++------ theme/boost/templates/columns2.mustache | 27 ++++++++---------- theme/boost/templates/secure.mustache | 19 +++++++------ 7 files changed, 58 insertions(+), 72 deletions(-) diff --git a/theme/boost/scss/moodle/blocks.scss b/theme/boost/scss/moodle/blocks.scss index 29a5a2b649e..10bf359369b 100644 --- a/theme/boost/scss/moodle/blocks.scss +++ b/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; diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss index 53e5411f775..684ec9a37e0 100644 --- a/theme/boost/scss/moodle/core.scss +++ b/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, diff --git a/theme/boost/scss/moodle/sticky-footer.scss b/theme/boost/scss/moodle/sticky-footer.scss index 725ffb63671..9edcf4ea211 100644 --- a/theme/boost/scss/moodle/sticky-footer.scss +++ b/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; + } } diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index 75d8bfaff8e..d6b08828a40 100644 --- a/theme/boost/style/moodle.css +++ b/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; diff --git a/theme/boost/templates/columns1.mustache b/theme/boost/templates/columns1.mustache index d31db85d62b..d2c11db97f5 100644 --- a/theme/boost/templates/columns1.mustache +++ b/theme/boost/templates/columns1.mustache @@ -45,17 +45,13 @@ {{{ output.standard_top_of_body_html }}}
-
+
-
-
- {{{ output.course_content_header }}} - {{{ output.main_content }}} - {{{ output.activity_navigation }}} - {{{ output.course_content_footer }}} -
-
+ {{{ output.course_content_header }}} + {{{ output.main_content }}} + {{{ output.activity_navigation }}} + {{{ output.course_content_footer }}}
diff --git a/theme/boost/templates/columns2.mustache b/theme/boost/templates/columns2.mustache index 51b8d4d25f6..70470552193 100644 --- a/theme/boost/templates/columns2.mustache +++ b/theme/boost/templates/columns2.mustache @@ -56,12 +56,12 @@ {{{ output.standard_top_of_body_html }}} - {{>theme_boost/navbar}} + {{> theme_boost/navbar }}
{{{ output.full_header }}} -
+
{{#hasregionmainsettingsmenu}}
@@ -69,17 +69,15 @@
{{/hasregionmainsettingsmenu}}
-
-
- {{#hasregionmainsettingsmenu}} -
- {{/hasregionmainsettingsmenu}} - {{{ output.course_content_header }}} - {{{ output.main_content }}} - {{{ output.activity_navigation }}} - {{{ output.course_content_footer }}} -
-
+ + {{#hasregionmainsettingsmenu}} +
+ {{/hasregionmainsettingsmenu}} + {{{ output.course_content_header }}} + {{{ output.main_content }}} + {{{ output.activity_navigation }}} + {{{ output.course_content_footer }}} +
{{#hasblocks}}
@@ -90,10 +88,9 @@
{{> theme_boost/nav-drawer }} + {{> theme_boost/footer }}
-{{> theme_boost/footer }} - {{#js}} diff --git a/theme/boost/templates/secure.mustache b/theme/boost/templates/secure.mustache index 5a1a5dbf1f7..385e3aba4e4 100644 --- a/theme/boost/templates/secure.mustache +++ b/theme/boost/templates/secure.mustache @@ -60,11 +60,11 @@
-
+ {{{ output.course_content_header }}} {{{ output.main_content }}} {{{ output.course_content_footer }}} -
+
{{#hasblocks}}
@@ -74,14 +74,15 @@
-
-
-