Skip to content

Commit

Permalink
BugFix: Make outside-left and outside-right block regions really resp…
Browse files Browse the repository at this point in the history 
…onsive, resolves moodle-an-hochschulen#266
  • Loading branch information
@prasanna-lmsace
prasanna-lmsace committed Apr 27, 2024
1 parent b1ccde5 commit f22b13a
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 55 deletions.
147 changes: 93 additions & 54 deletions scss/boost_union/post.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -750,21 +750,25 @@ 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,
#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 @@ -786,66 +790,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;
}
}


Expand Down Expand Up @@ -895,7 +934,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;
}
Expand Down
1 change: 1 addition & 0 deletions tests/behat/theme_boost_union_feelsettings_blocks.feature
View file
Original file line number Diff line number Diff line change
Expand Up @@ -409,6 +409,7 @@ 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"
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
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 = 2023102035;
$plugin->version = 2023102036;
$plugin->release = 'v4.3-r12';
$plugin->requires = 2023100900;
$plugin->supported = [403, 403];
Expand Down

0 comments on commit f22b13a

Please sign in to comment.