Add 'Flex containers' justify-content property options' - #191.

gjbarnard · Sep 22, 2023 · d46beb5 · d46beb5
1 parent 6f4b9ce
commit d46beb5
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
     }
 }}
-<div class="thegrid d-flex flex-wrap justify-content-between mt-2">
+<div class="thegrid d-flex flex-wrap grid-justify-{{gridjustification}} mt-2">
     {{#gridsections}}
     {{#sectionbreak}}
     </div>
     {{#sectionbreakheading}}
     <div id="gridsectionbreak-{{number}}" class="gridsectionbreakheading mb-1 mt-1">{{{sectionbreakheading}}}</div>
     {{/sectionbreakheading}}
-    <div class="thegrid d-flex flex-wrap justify-content-between">
+    <div class="thegrid d-flex flex-wrap grid-justify-{{gridjustification}}">
     {{/sectionbreak}}
     <div id="section-{{number}}" class="grid-section card{{#currentsection}} currentgridsection{{/currentsection}}">
         {{^popup}}