Setting to change the breakpoint for smaller screens.

CHANGES.md

@@ -4,6 +4,10 @@ moodle-theme_boost_campus
 Changes
 -------
 
+### Unreleased
+
+* 2018-12-17 - Setting to change the breakpoint for smaller screens.
+
 ### Release v3.5-r4
 
 * 2018-12-12 - Bugfix: Improved font size for all modal help text dialogues.

README.md

@@ -313,6 +313,15 @@ By enabling this setting you can invert the default light navbar to a dark one w
 The default solution to display help texts in popover leads to different issues. For example popovers are not scrollable and they can reach over the viewport.
 For this reason, with this setting you can decide that the help texts should be displayed in a dedicated text box (modal dialogue) that appears in the middle of the page with enough space to hold even long helping texts.
 
+#### Breakpoint
+
+##### Change breakpoint
+
+In theme Boost, the right block column will break down even on devices with a width up to 1200 pixels (widescreen resolution of the iPad is 1024 pixels, for example).
+This is because the breakpoint is set to [media-breakpoint-down(lg)](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints").
+
+If you think there is enough space to show the content plus the blocks column side by side on a screen width of 992 pixels and up, then enable this setting. It will change the breakpoint to media-breakpoint-down(md). This will break the blocks column only on screens with widths of less than 992 pixels.
+
 
 Further improvements to Boost core theme
 ----------------------------------------

lang/en/theme_boost_campus.php

@@ -183,6 +183,12 @@ $string['helptextheadingsetting'] = 'Help texts';
 $string['helptextmodalsetting'] = 'Show help texts in a modal dialogue';
 $string['helptextmodalsetting_desc'] = 'The default solution to display help texts in popover leads to different issues. For example popovers are not scrollable and they can reach over the viewport.<br/>
 For this reason, with this setting you can decide that the help texts should be displayed in a dedicated text box (modal dialogue) that appears in the middle of the page with enough space to hold even long helping texts.';
+// ...Breakpoint.
+$string['breakpointheadingsetting'] = 'Breakpoint';
+$string['breakpointsetting'] = 'Change breakpoint';
+$string['breakpointsetting_desc'] = 'In theme Boost, the right block column will break down even on devices with a width up to 1200 pixels (widescreen resolution of the iPad is 1024 pixels, for example).
+This is because the breakpoint is set to <a href="https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints">media-breakpoint-down(lg)</a>. <br/>
+If you think there is enough space to show the content plus the blocks column side by side on a screen width of 992 pixels and up, then enable this setting. It will change the breakpoint to media-breakpoint-down(md). This will break the blocks column only on screens with widths of less than 992 pixels.';
 
 // ADDITIONAL STRINGS (IN ALPHABETICAL ORDER).
 $string['cachedef_imagearea'] = 'Cache for imagearea items';

lib.php

@@ -100,7 +100,8 @@ function theme_boost_campus_get_pre_scss($theme) {
         'hidefooteronloginpage' => ['hidefooteronloginpage'],
         'footerhideusertourslink' => ['footerhideusertourslink'],
         'navdrawerfullwidth' => ['navdrawerfullwidth'],
-        'helptextmodal' => ['helptextmodal']
+        'helptextmodal' => ['helptextmodal'],
+        'breakpoint' => ['breakpoint']
         // MODIFICATION END.
     ];
 

scss/post.scss

 /* stylelint-disable declaration-no-important */
 /* stylelint-disable max-line-length */
 
+/*------------------------------------
+  Page
+  -------------------------------------*/
+
+/* Change the breakpoint if setting 'breakpoint' is active. */
+@if variable-exists(breakpoint) {
+    @if $breakpoint == 'yes' {
+        #region-main-settings-menu.has-blocks,
+        #region-main.has-blocks {
+            width: calc(100% - #{$blocks-plus-gutter});
+            @include media-breakpoint-down(md) {
+                width: 100%;
+            }
+        }
+    }
+}
+[data-region="blocks-column"] {
+    width: 250px;
+    @include media-breakpoint-down(md) {
+        width: 100%;
+    }
+}
+
+
 /*------------------------------------
   Login page
   -------------------------------------*/

settings.php

@@ -592,6 +592,21 @@ if ($ADMIN->fulltree) {
     $setting->set_updatedcallback('theme_reset_all_caches');
     $page->add($setting);
 
+    // Settings title to group breakpoint related settings together with a common heading. We don't want a description here.
+    $name = 'theme_boost_campus/breakpointheading';
+    $title = get_string('breakpointheadingsetting', 'theme_boost_campus', null, true);
+    $setting = new admin_setting_heading($name, $title, null);
+    $page->add($setting);
+
+    $name = 'theme_boost_campus/breakpoint';
+    $title = get_string('breakpointsetting', 'theme_boost_campus', null, true);
+    $description = get_string('breakpointsetting_desc', 'theme_boost_campus', null, true);
+    $setting = new admin_setting_configcheckbox($name, $title, $description, 'no', 'yes', 'no' ); // Overriding default values
+    // yes = 1 and no = 0 because of the use of empty() in theme_boost_campus_get_pre_scss() (lib.php). Default 0 value would
+    // not write the variable to scss that could cause the scss to crash if used in that file. See MDL-58376.
+    $setting->set_updatedcallback('theme_reset_all_caches');
+    $page->add($setting);
+
     // Add tab to settings page.
     $settings->add($page);
 }

version.php

@@ -25,7 +25,7 @@
 defined('MOODLE_INTERNAL') || die();
 
 $plugin->component = 'theme_boost_campus';
-$plugin->version = 2018121300;
+$plugin->version = 2018121700;
 $plugin->release = 'v3.5-r4';
 $plugin->requires = 2018051300;
 $plugin->maturity = MATURITY_STABLE;