diff --git a/Changes.md b/Changes.md index b01d807c..0a1f6c01 100644 --- a/Changes.md +++ b/Changes.md @@ -5,6 +5,7 @@ Version 402.2.1 - TBR ---------------------------- 1. Fix 'Webp image causes an error and makes course unaccessible' - #190. 2. Fix "Hidden sections are shown as not available" doesn't seem to work. - #192. +3. Add 'Flex containers' justify-content property options' - #191. Version 402.2.0 - 16/08/2023 ---------------------------- diff --git a/classes/output/courseformat/content.php b/classes/output/courseformat/content.php index a1fea179..75d7f4a6 100644 --- a/classes/output/courseformat/content.php +++ b/classes/output/courseformat/content.php @@ -123,6 +123,9 @@ public function export_for_template(\renderer_base $output) { } } + // Justification. + $data->gridjustification = $coursesettings['gridjustification']; + // Popup. if (!$editing) { $data->popup = false; diff --git a/lang/en/format_grid.php b/lang/en/format_grid.php index 4d90adef..634461c4 100644 --- a/lang/en/format_grid.php +++ b/lang/en/format_grid.php @@ -72,6 +72,18 @@ $string['sectionbreakheading'] = 'Section break heading'; $string['sectionbreakheading_help'] = 'Show this heading at the point this section breaks in the grid. HTML can be used.'; +// Grid justification. +$string['gridjustification'] = 'Set the justification of the grid'; +$string['gridjustification_help'] = 'Set the justification to one of: Start, Centre, End, Space around, Space between or Space evenly.'; +$string['defaultgridjustification'] = 'Default justification of the grid'; +$string['defaultgridjustification_desc'] = 'The default justification of the grid, one of: Start, Centre, End, Space around, Space between or Space evenly.'; +$string['start'] = 'Start'; +$string['centre'] = 'Centre'; +$string['end'] = 'End'; +$string['spacearound'] = 'Space around'; +$string['spacebetween'] = 'Space between'; +$string['spaceevenly'] = 'Space evenly'; + // Image container width. $string['imagecontainerwidth'] = 'Set the image container width'; $string['imagecontainerwidth_help'] = 'Set the image container width to one of: 128, 192, 210, 256, 320, 384, 448, 512, 576, 640, 704 or 768'; diff --git a/lib.php b/lib.php index caeb7e2e..5276aef3 100755 --- a/lib.php +++ b/lib.php @@ -327,6 +327,10 @@ public function course_format_options($foreditform = false) { 'default' => 0, 'type' => PARAM_INT, ], + 'gridjustification' => [ + 'default' => '-', + 'type' => PARAM_ALPHAEXT, + ], 'imagecontainerwidth' => [ 'default' => 0, 'type' => PARAM_INT, @@ -393,7 +397,25 @@ public function course_format_options($foreditform = false) { 'element_type' => 'select', 'element_attributes' => [$popupvalues], ]; - + $gridjustificationvalues = $this->generate_default_entry( + 'gridjustification', + '-', + [ + 'start' => new lang_string('start', 'format_grid'), + 'center' => new lang_string('centre', 'format_grid'), + 'end' => new lang_string('end', 'format_grid'), + 'space-around' => new lang_string('spacearound', 'format_grid'), + 'space-between' => new lang_string('spacebetween', 'format_grid'), + 'space-evenly' => new lang_string('spaceevenly', 'format_grid'), + ], + ); + $courseformatoptionsedit['gridjustification'] = [ + 'label' => new lang_string('gridjustification', 'format_grid'), + 'help' => 'gridjustification', + 'help_component' => 'format_grid', + 'element_type' => 'select', + 'element_attributes' => [$gridjustificationvalues], + ]; $imagecontainerwidthvalues = $this->generate_default_entry( 'imagecontainerwidth', 0, diff --git a/settings.php b/settings.php index e5de5ca0..7007e31c 100644 --- a/settings.php +++ b/settings.php @@ -73,6 +73,21 @@ ]; $page->add(new admin_setting_configselect($name, $title, $description, $default, $choices)); + // Justification. + $name = 'format_grid/defaultgridjustification'; + $title = get_string('defaultgridjustification', 'format_grid'); + $description = get_string('defaultgridjustification_desc', 'format_grid'); + $default = 'space-between'; + $choices = [ + 'start' => new lang_string('start', 'format_grid'), + 'center' => new lang_string('centre', 'format_grid'), + 'end' => new lang_string('end', 'format_grid'), + 'space-around' => new lang_string('spacearound', 'format_grid'), + 'space-between' => new lang_string('spacebetween', 'format_grid'), + 'space-evenly' => new lang_string('spaceevenly', 'format_grid'), + ]; + $page->add(new admin_setting_configselect($name, $title, $description, $default, $choices)); + // Icon width. $name = 'format_grid/defaultimagecontainerwidth'; $title = get_string('defaultimagecontainerwidth', 'format_grid'); diff --git a/styles.css b/styles.css index 6c71a5a0..922b9cf0 100644 --- a/styles.css +++ b/styles.css @@ -36,6 +36,30 @@ gap: 0.75rem; } +.format-grid .grid-justify-start { + justify-content: start; +} + +.format-grid .grid-justify-center { + justify-content: center; +} + +.format-grid .grid-justify-end { + justify-content: end; +} + +.format-grid .grid-justify-space-around { + justify-content: space-around; +} + +.format-grid .grid-justify-space-between { + justify-content: space-between; +} + +.format-grid .grid-justify-space-evenly { + justify-content: space-evenly; +} + .format-grid .thegrid .grid-section { width: 210px; } diff --git a/templates/grid.mustache b/templates/grid.mustache index cefc1fb3..71bf3734 100644 --- a/templates/grid.mustache +++ b/templates/grid.mustache @@ -20,6 +20,7 @@ Displays the grid. Context variables required for this template: + * gridjustify - The justification for the grid. * gridsections - The array of sections. * showcompletion - If completion is on and shown. * sectionbreak - There is a section break for this section. @@ -35,6 +36,7 @@ Example context (json): { + "gridjustification" : "space-between", "gridsections": [ { "sectionbreak": false, @@ -62,14 +64,14 @@ "showcompletion": true } }} -
+
{{#gridsections}} {{#sectionbreak}}
{{#sectionbreakheading}}
{{{sectionbreakheading}}}
{{/sectionbreakheading}} -
+
{{/sectionbreak}}
{{^popup}}