Grid section title / badges - work in progress.

gjbarnard · Aug 19, 2024 · 0ea454c · 0ea454c
1 parent 1502065
commit 0ea454c
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 4 deletions.
diff --git a/classes/output/courseformat/content.php b/classes/output/courseformat/content.php
@@ -154,6 +154,15 @@ public function export_for_template(\renderer_base $output) {
             // Justification.
             $data->gridjustification = $coursesettings['gridjustification'];
 
+            // Section title in grid box.
+            $data->sectiontitleingridbox = ($coursesettings['sectiontitleingridbox'] == 2);
+
+            // Section badge in grid box.
+            $data->sectionbadgeingridbox = ($coursesettings['sectionbadgeingridbox'] == 2);
+
+            // Title and / org badge?
+            $data->sectiontitleandorbadgeingridbox = ($data->sectiontitleingridbox || $data->sectionbadgeingridbox);
+
             // Popup.
             if (!$editing) {
                 $data->popup = false;

diff --git a/lang/en/format_grid.php b/lang/en/format_grid.php
@@ -134,6 +134,16 @@
 $string['defaultsectionzeroingrid'] = 'Section zero in grid';
 $string['defaultsectionzeroingrid_desc'] = 'Place section zero in the grid.';
 
+// Grid section title / badges.
+$string['sectiontitleingridbox'] = 'Section title in grid box';
+$string['sectiontitleingridbox_help'] = 'Show the section title in the grid box';
+$string['defaultsectiontitleingridbox'] = 'Section title in grid box';
+$string['defaultsectiontitleingridbox_desc'] = 'Show the section title in the grid box.';
+$string['sectionbadgeingridbox'] = 'Section badge in grid box';
+$string['sectionbadgeingridbox_help'] = 'Show the section badge in the grid box';
+$string['defaultsectionbadgeingridbox'] = 'Section badge in grid box';
+$string['defaultsectionbadgeingridbox_desc'] = 'Show the section badge in the grid box.';
+
 // Completion.
 $string['showcompletion'] = 'Show completion';
 $string['showcompletion_help'] = 'Show the completion of the section on the grid';

diff --git a/lib.php b/lib.php
@@ -424,6 +424,14 @@ public function course_format_options($foreditform = false) {
                     'default' => 0,
                     'type' => PARAM_INT,
                 ],
+                'sectiontitleingridbox' => [
+                    'default' => 0,
+                    'type' => PARAM_INT,
+                ],
+                'sectionbadgeingridbox' => [
+                    'default' => 0,
+                    'type' => PARAM_INT,
+                ],
                 'showcompletion' => [
                     'default' => 0,
                     'type' => PARAM_INT,
@@ -554,6 +562,38 @@ public function course_format_options($foreditform = false) {
                 'element_attributes' => [$sectionzeroingridvalues],
             ];
 
+            $sectiontitleingridboxvalues = $this->generate_default_entry(
+                'sectiontitleingridbox',
+                0,
+                [
+                    1 => new lang_string('no'),
+                    2 => new lang_string('yes'),
+                ],
+            );
+            $courseformatoptionsedit['sectiontitleingridbox'] = [
+                'label' => new lang_string('sectiontitleingridbox', 'format_grid'),
+                'help' => 'sectiontitleingridbox',
+                'help_component' => 'format_grid',
+                'element_type' => 'select',
+                'element_attributes' => [$sectiontitleingridboxvalues],
+            ];
+
+            $sectionbadgeingridboxvalues = $this->generate_default_entry(
+                'sectionbadgeingridbox',
+                0,
+                [
+                    1 => new lang_string('no'),
+                    2 => new lang_string('yes'),
+                ],
+            );
+            $courseformatoptionsedit['sectionbadgeingridbox'] = [
+                'label' => new lang_string('sectionbadgeingridbox', 'format_grid'),
+                'help' => 'sectionbadgeingridbox',
+                'help_component' => 'format_grid',
+                'element_type' => 'select',
+                'element_attributes' => [$sectionbadgeingridboxvalues],
+            ];
+
             $showcompletionvalues = $this->generate_default_entry(
                 'showcompletion',
                 0,

diff --git a/settings.php b/settings.php
@@ -158,6 +158,28 @@
     ];
     $page->add(new admin_setting_configselect($name, $title, $description, $default, $choices));
 
+    // Section title in grid box.
+    $name = 'format_grid/defaultsectiontitleingridbox';
+    $title = get_string('defaultsectiontitleingridbox', 'format_grid');
+    $description = get_string('defaultsectiontitleingridbox_desc', 'format_grid');
+    $default = 2;
+    $choices = [
+        1 => new lang_string('no'),
+        2 => new lang_string('yes'),
+    ];
+    $page->add(new admin_setting_configselect($name, $title, $description, $default, $choices));
+
+    // Section badge in grid box.
+    $name = 'format_grid/defaultsectionbadgeingridbox';
+    $title = get_string('defaultsectionbadgeingridbox', 'format_grid');
+    $description = get_string('defaultsectionbadgeingridbox_desc', 'format_grid');
+    $default = 2;
+    $choices = [
+        1 => new lang_string('no'),
+        2 => new lang_string('yes'),
+    ];
+    $page->add(new admin_setting_configselect($name, $title, $description, $default, $choices));
+
     // Completion.
     $name = 'format_grid/defaultshowcompletion';
     $title = get_string('defaultshowcompletion', 'format_grid');

diff --git a/styles.css b/styles.css
@@ -61,6 +61,7 @@
 }
 
 .format-grid .thegrid .grid-section {
+    border-width: 2px;
     width: 210px;
 }
 

diff --git a/templates/grid.mustache b/templates/grid.mustache
@@ -26,6 +26,9 @@
     * sectionbreak - There is a section break for this section.
     * sectionbreakheading - Section break heading.
     * number - Section number.
+    * sectiontitleingridbox - Show the section title?
+    * sectionbadgeingridbox - Show the section bagde if any?
+    * sectiontitleandorbadgeingridbox - Is the title and or badge in the grid box?
     * iscurrent - Current section?
     * sectionurl - Section URL.
     * sectionname - Section name.
@@ -61,6 +64,9 @@
                 "sectioncompletionmarkup": ""
             }
         ],
+        "sectiontitleingridbox": true,
+        "sectionbadgeingridbox": true,
+        "sectiontitleandorbadgeingridbox": true,
         "showcompletion": true
     }
 }}
@@ -81,29 +87,33 @@
         {{#popup}}
         <div class="grid-modal grid-section-inner d-flex flex-column h-100 justify-content-between" data-toggle="modal" data-target="#gridPopup" data-section="{{number}}" tabindex="0">
         {{/popup}}
+            {{#sectiontitleandorbadgeingridbox}}
             <div class="card-header text-truncate h-100">
+                {{#sectiontitleingridbox}}
                 <h3 class="h4">{{{sectionname}}}</h3>
-                {{#hasbadge}}
+                {{/sectiontitleingridbox}}
+                {{#sectionbadgeingridbox}}{{#hasbadge}}
                 <div data-region="sectionbadges" class="sectionbadges d-flex">
                     {{$ core_courseformat/local/content/section/badges }}
                         {{> core_courseformat/local/content/section/badges }}
                     {{/ core_courseformat/local/content/section/badges }}
                 </div>
-                {{/hasbadge}}
+                {{/hasbadge}}{{/sectionbadgeingridbox}}
             </div>
+            {{/sectiontitleandorbadgeingridbox}}
             {{#imageuri}}
             <div class="grid-image card-img-bottom text-center">
                 <img src="{{imageuri}}" alt="{{imagealttext}}" loading="lazy">
                 {{#sectioncompletionmarkup}}{{{sectioncompletionmarkup}}}{{/sectioncompletionmarkup}}
             </div>
             {{/imageuri}}
             {{#generatedimageuri}}
-            <div class="grid-generatedimage card-img-bottom text-center" style="background-image: url('{{generatedimageuri}}');">
+            <div class="grid-generatedimage card-img-bottom{{^sectiontitleandorbadgeingridbox}} card-img-top{{/sectiontitleandorbadgeingridbox}} text-center" style="background-image: url('{{generatedimageuri}}');">
                 {{#sectioncompletionmarkup}}{{{sectioncompletionmarkup}}}{{/sectioncompletionmarkup}}
             </div>
             {{/generatedimageuri}}
             {{#imageerror}}
-            <div class="grid-image-error card-img-bottom text-center">
+            <div class="grid-image-error card-img-bottom{{^sectiontitleandorbadgeingridbox}} card-img-top{{/sectiontitleandorbadgeingridbox}} text-center">
                 <p><small>{{imageerror}}</small></p>
                 {{#sectioncompletionmarkup}}{{{sectioncompletionmarkup}}}{{/sectioncompletionmarkup}}
             </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -61,6 +61,7 @@ @@
     }
     .format-grid .thegrid .grid-section {
+        border-width: 2px;
         width: 210px;
     }
@@ Expand Down @@