From 23228c841ba0c5b4be4db6423f94480a4eef0adb Mon Sep 17 00:00:00 2001 From: Prasanna LMSACE Date: Sat, 27 Apr 2024 20:11:39 +0530 Subject: [PATCH] BugFix: Make outside-left and outside-right block regions really responsive, resolves #266 --- scss/boost_union/post.scss | 147 +++++++++++------- ...me_boost_union_feelsettings_blocks.feature | 1 + version.php | 2 +- 3 files changed, 95 insertions(+), 55 deletions(-) diff --git a/scss/boost_union/post.scss b/scss/boost_union/post.scss index f761ae7fdf5..b3a3a61a950 100644 --- a/scss/boost_union/post.scss +++ b/scss/boost_union/post.scss @@ -757,8 +757,18 @@ body.theme-boost-union-commincourse { .main-inner-outside-left-right, .main-inner-outside-left, .main-inner-outside-right { - /* Center the main region content to keep the page content in the middle of the page. */ - text-align: center; + &.main-inner-outside-nearwindowedges { + /* Center the main region content to position the page content in the middle of the page, + and place the left and right block regions near the window edges. */ + width: 100%; + display: flex; + } + &.main-inner-outside-nextmaincontent { + /* Center the main region content to keep the left and right block regions near the main region, + positioning the page content in the middle of the page. */ + display: flex; + align-self: center; + } /* Change the block regions to show them properly as block columns. */ #theme-block-region-outside-left, @@ -766,12 +776,6 @@ body.theme-boost-union-commincourse { .main-inner { /* Undo the text-align for the regions in each column to still show the content correctly. */ text-align: initial; - - /* Display them as inline-block. */ - display: inline-block; - - /* And make sure that the columns are at the top of the page at all. */ - vertical-align: top; } } @@ -793,66 +797,101 @@ body.theme-boost-union-commincourse { width: calc(98% - #{$blockregionoutsiderightwidth} - #{$blockregionoutsideleftwidth}); } - /* Set the width and margin of the outside-left region. */ - #theme-block-region-outside-left { - margin-right: 1rem; - margin-top: 1.5rem; - width: $blockregionoutsideleftwidth; + /* Using 100% of width in the main inner push the side rigions outside the page */ + #page .main-inner-outside-left-right .main-inner, + #page .main-inner-outside-left .main-inner, + #page .main-inner-outside-right .main-inner { + width: auto; } + } +} - /* Set the width of the outside-right region. */ - #theme-block-region-outside-right { - margin-left: 1rem; - margin-top: 1.5rem; - width: $blockregionoutsiderightwidth; - } +/* On larger screens. */ +@include media-breakpoint-up(lg) { + /* Set the width and margin of the outside-left region. */ + #theme-block-region-outside-left { + margin-right: 1rem; + margin-top: 1.5rem; + width: $blockregionoutsideleftwidth; + } - /* If the admin configured outside blocks to be shown next to the main content. */ - .main-inner-outside-nextmaincontent { - #theme-block-region-outside-left, - #theme-block-region-outside-right { - /* Disable float (just to be sure). */ - float: none; - } - } + /* Set the width of the outside-right region. */ + #theme-block-region-outside-right { + margin-left: 1rem; + margin-top: 1.5rem; + width: $blockregionoutsiderightwidth; + } +} - /* If the admin configured outside blocks to be shown next to the main content. */ - .main-inner-outside-nearwindowedges { - /* Float the outside-left block region to the left. */ - #theme-block-region-outside-left { - float: left; - } +/* On larger screen. */ +@include media-breakpoint-up(lg) { + /* Set the width of the main region content to 50%, allowing the left and right block regions to have a wider width */ + body.limitedwidth #page.drawers .main-inner-wrapper .main-inner { + flex: auto; + } +} - /* Float the outside-right block region to the right. */ - #theme-block-region-outside-right { - float: right; - } +/* On larger screen. */ +@include media-breakpoint-only(lg) { + /* Reduced the left region block to maximum width, so the center main content & right block region + align nearer to the left block region */ + #theme-block-region-outside-left, + #theme-block-region-outside-right { + max-width: 300px; + } - /* Clear the outside-bottom + footer regions so that they are shown correctly after the floated regions. */ - #theme-block-region-outside-bottom, - #theme-block-region-footer { - clear: both; - } - } + /* Use possible width for the main content */ + body.limitedwidth #page .main-inner-outside-left-right .main-inner, + body.limitedwidth #page .main-inner-outside-left .main-inner, + body.limitedwidth #page .main-inner-outside-right .main-inner { + width: 100%; } } -/* And on smaller screens. */ -@include media-breakpoint-down(sm) { - /* Change the outside-left and outside-right blocks to full width (with some horizontal space). */ +/* On larger screen. */ +@include media-breakpoint-only(md) { + /* Center the main region content while maintaining full width for the left and right block regions, + thereby positioning the page content in the middle of the page. */ + body.limitedwidth { + .main-inner-outside-left-right.main-inner-outside-nextmaincontent, + .main-inner-outside-left.main-inner-outside-nextmaincontent, + .main-inner-outside-right.main-inner-outside-nextmaincontent { + display: block; + align-self: auto; + } + } + /* Change the outside-left and outside-right blocks to full width (with some horizontal space) */ #theme-block-region-outside-left, #theme-block-region-outside-right { - padding-left: 15px; - padding-right: 15px; width: 100%; } - /* And remove their floating. */ - .main-inner-outside-nearwindowedges { - #theme-block-region-outside-left, - #theme-block-region-outside-right { - float: none; +} + +/* And on smaller screens. */ +@include media-breakpoint-down(md) { + /* Set the width of the main region content, the left and right block regions to have a full width */ + body.limitedwidth { + .main-inner-outside-left-right.main-inner-outside-nearwindowedges, + .main-inner-outside-left.main-inner-outside-nearwindowedges, + .main-inner-outside-right.main-inner-outside-nearwindowedges { + flex-direction: column; + align-items: center; } } + /* Removed the padding on left and right side of the main region content */ + body.limitedwidth #page.drawers .main-inner-wrapper .main-inner { + padding-left: 0; + padding-right: 0; + } +} + +/* And on smaller screens. */ +@include media-breakpoint-down(sm) { + /* Padding has been added to the center region block, which contains the left and right regions, + as well as the main content region, to create space between the main content and the window screen. */ + body.limitedwidth #page.drawers .main-inner-wrapper { + padding: 0 15px; + } } @@ -902,7 +941,7 @@ body.theme-boost-union-commincourse { } /* Additional styling for content width regions to limit the block region size on Moodle pages with limited width. */ -body.limitedwidth .theme-block-region-outside-coursecontentwidth, +body.limitedwidth #theme-block-region-outside-top.theme-block-region-outside-coursecontentwidth, body.limitedwidth .theme-block-region-footer-coursecontentwidth { max-width: $course-content-maxwidth; } diff --git a/tests/behat/theme_boost_union_feelsettings_blocks.feature b/tests/behat/theme_boost_union_feelsettings_blocks.feature index df420de0534..226dbd6d85f 100644 --- a/tests/behat/theme_boost_union_feelsettings_blocks.feature +++ b/tests/behat/theme_boost_union_feelsettings_blocks.feature @@ -409,6 +409,7 @@ Feature: Configuring the theme_boost_union plugin for the "Blocks" tab on the "F | | | theme_boost_union | And the theme cache is purged and the theme is reloaded When I log in as "admin" + And I change window size to "large" And I am on "Course 1" course homepage And I turn editing mode on And I should see "Add a block" in the "#theme-block-region-" "css_element" diff --git a/version.php b/version.php index d9a8ee93a28..8640f5ad005 100644 --- a/version.php +++ b/version.php @@ -25,7 +25,7 @@ defined('MOODLE_INTERNAL') || die(); $plugin->component = 'theme_boost_union'; -$plugin->version = 2024100703; +$plugin->version = 2024100704; $plugin->release = 'v4.5-r3'; $plugin->requires = 2024100700; $plugin->supported = [405, 405];