Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BugFix: Make outside-left and outside-right block regions really responsive, resolves #266 #643

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

BugFix: Make outside-left and outside-right block regions really responsive, resolves #266 #643

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
23228c8
BugFix: Make outside-left and outside-right block regions really resp…
prasanna-lmsace Apr 27, 2024
57ea94b
Review changes
abias Dec 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-r3

* 2024-11-19 - Bugfix: The starred courses popover showed a JavaScript error in the browser JS console, resolves #759.
Expand Down
1 change: 0 additions & 1 deletion lang/en/theme_boost_union.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -539,7 +539,6 @@
<ul><li>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.</li>
<li>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.</li>
<li>The Outside (left), Outside (right), Content (upper), Content (lower) and Header block regions are not available for all page layouts.</li></ul>';
$string['blockregionsheading_experimental'] = 'Please note: The <em>Outside (left) and Outside (right) block regions</em> are fully working in the current state of implementation, but have to be <em>considered as experimental</em> 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)';
Expand Down
147 changes: 93 additions & 54 deletions scss/boost_union/post.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -757,21 +757,27 @@ 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;
/* 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. */
display: flex;
align-self: center;
}

/* Change the block regions to show them properly as block columns. */
#theme-block-region-outside-left,
#theme-block-region-outside-right,
.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;
}
}

Expand All @@ -793,66 +799,99 @@ 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;
/* 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 {
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 even 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;
}
/* 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 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 */
#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 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. */
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 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. */
body.limitedwidth #page.drawers .main-inner-wrapper {
padding: 0 15px;
}
}


Expand Down Expand Up @@ -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,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you please explain why you limited the scope of this selector to only pages where the outside-top block region exists?

body.limitedwidth .theme-block-region-footer-coursecontentwidth {
max-width: $course-content-maxwidth;
}
Expand Down
9 changes: 0 additions & 9 deletions settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1553,15 +1553,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([
Expand Down
2 changes: 2 additions & 0 deletions tests/behat/theme_boost_union_feelsettings_blocks.feature
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -409,6 +409,8 @@ Feature: Configuring the theme_boost_union plugin for the "Blocks" tab on the "F
| <config> | <settingvalue> | theme_boost_union |
And the theme cache is purged and the theme is reloaded
When I log in as "admin"
# Change to a large window size as the block region width is not applied on small screens when the blocks are wrapped.
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-<region>" "css_element"
Expand Down
2 changes: 1 addition & 1 deletion version.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand Down
Loading