From e7881c254262c5ecec6ab72f115deb43de6333aa Mon Sep 17 00:00:00 2001 From: Prasanna LMSACE Date: Sat, 27 Apr 2024 20:11:39 +0530 Subject: [PATCH 1/2] 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 + 2 files changed, 94 insertions(+), 54 deletions(-) diff --git a/scss/boost_union/post.scss b/scss/boost_union/post.scss index 6e5bbd0fe40..c36c7591138 100644 --- a/scss/boost_union/post.scss +++ b/scss/boost_union/post.scss @@ -810,8 +810,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, @@ -819,12 +829,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; } } @@ -846,66 +850,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; + } } @@ -955,7 +994,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 7cf3b6ea9bb..8a6a5c10f24 100644 --- a/tests/behat/theme_boost_union_feelsettings_blocks.feature +++ b/tests/behat/theme_boost_union_feelsettings_blocks.feature @@ -355,6 +355,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 am on the "Course 1" "Course" page logged in as "admin" + And I change window size to "large" And I turn editing mode on And I should see "Add a block" in the "#theme-block-region-" "css_element" Then DOM element "#theme-block-region-" should have computed style "width" "" From 431a923b2333ddf0875aeed5ffc50b10bf10ec54 Mon Sep 17 00:00:00 2001 From: Alexander Bias Date: Fri, 6 Dec 2024 08:32:34 +0100 Subject: [PATCH 2/2] Review changes --- CHANGES.md | 4 ++++ lang/en/theme_boost_union.php | 1 - scss/boost_union/post.scss | 16 ++++++++-------- settings.php | 9 --------- 4 files changed, 12 insertions(+), 18 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 741e5b36e01..1eb565bdd76 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -4,6 +4,10 @@ moodle-theme_boost_union Changes ------- +### Unreleased + +* 2024-11-25 - Bugfix: Make outside-left and outside-right block regions really responsive, resolves #266. + ### v4.5-r5 * 2024-12-31 - Child theme support: Fully replicate Boost Union's extra SCSS if a Boost Union Child theme is the current theme, resolves #718, resolves theme_boost_union_child/#5. diff --git a/lang/en/theme_boost_union.php b/lang/en/theme_boost_union.php index 0a1baf65439..cacba294e35 100644 --- a/lang/en/theme_boost_union.php +++ b/lang/en/theme_boost_union.php @@ -549,7 +549,6 @@
  • By default, all additional block regions are disabled. Please enable the particular block regions on the particular page layouts according to your needs. Try to be as focused as possible – too many block regions could overwhelm end users.
  • As soon as an additional block region is enabled, it is visible for all authenticated users and editable by teachers and managers (depending on the fact if the particular user is allowed to edit the particular Moodle page, of course). But there are also theme/boost_union:viewregion* and theme/boost_union:editregion* capabilities which allow you to fine-tune the usage of each block region according to your needs.
  • The Outside (left), Outside (right), Content (upper), Content (lower) and Header block regions are not available for all page layouts.
'; -$string['blockregionsheading_experimental'] = 'Please note: The Outside (left) and Outside (right) block regions are fully working in the current state of implementation, but have to be considered as experimental as they do not wrap properly on medium width screens yet. Against this background, please use them with care. This issue will be fixed in an upcoming release.'; $string['region-none'] = 'None'; $string['region-outside-left'] = 'Outside (left)'; $string['region-outside-top'] = 'Outside (top)'; diff --git a/scss/boost_union/post.scss b/scss/boost_union/post.scss index c36c7591138..f3bbd3d0dca 100644 --- a/scss/boost_union/post.scss +++ b/scss/boost_union/post.scss @@ -810,12 +810,14 @@ body.theme-boost-union-commincourse { .main-inner-outside-left-right, .main-inner-outside-left, .main-inner-outside-right { + /* If the admin configured outside blocks to be shown next to the window edges. */ &.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; } + /* If the admin configured outside blocks to be shown next to the main content. */ &.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. */ @@ -850,7 +852,8 @@ body.theme-boost-union-commincourse { width: calc(98% - #{$blockregionoutsiderightwidth} - #{$blockregionoutsideleftwidth}); } - /* Using 100% of width in the main inner push the side rigions outside the page */ + /* Set the width of the outside-* regions to auto. + Using a 100% width in the main inner area would push the side regions 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 { @@ -859,7 +862,7 @@ body.theme-boost-union-commincourse { } } -/* On larger screens. */ +/* On even larger screens. */ @include media-breakpoint-up(lg) { /* Set the width and margin of the outside-left region. */ #theme-block-region-outside-left { @@ -874,17 +877,14 @@ body.theme-boost-union-commincourse { margin-top: 1.5rem; width: $blockregionoutsiderightwidth; } -} -/* 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; } } -/* On larger screen. */ +/* On even larger screens only. */ @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 */ @@ -901,7 +901,7 @@ body.theme-boost-union-commincourse { } } -/* On larger screen. */ +/* On larger screens only. */ @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. */ @@ -938,7 +938,7 @@ body.theme-boost-union-commincourse { } } -/* And on smaller screens. */ +/* And on really small 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. */ diff --git a/settings.php b/settings.php index f7d341ffc01..e772bb9dc84 100644 --- a/settings.php +++ b/settings.php @@ -1560,15 +1560,6 @@ $setting = new admin_setting_heading($name, $title, $description); $tab->add($setting); - // Add experimental warning. - $name = 'theme_boost_union/blockregionsheadingexperimental'; - $notification = new \core\output\notification(get_string('blockregionsheading_experimental', 'theme_boost_union'), - \core\output\notification::NOTIFY_WARNING); - $notification->set_show_closebutton(false); - $description = $OUTPUT->render($notification); - $setting = new admin_setting_heading($name, '', $description); - $tab->add($setting); - // Settings: Additional block regions for 'x' layout. // List of region strings. $regionstr = (array) get_strings([