Grid section title / badges - work in progress.

gjbarnard · Sep 21, 2024 · f079f61 · f079f61
1 parent 7657b28
commit f079f61
Show file tree

Hide file tree

Showing 7 changed files with 130 additions and 7 deletions.
diff --git a/classes/output/courseformat/content.php b/classes/output/courseformat/content.php
@@ -157,6 +157,12 @@ public function export_for_template(\renderer_base $output) {
             // Image resize is crop.
             $data->imageresizemethodcrop = ($coursesettings['imageresizemethod'] == 2);
 
+            // Section title in grid box.
+            $data->sectiontitleingridbox = ($coursesettings['sectiontitleingridbox'] == 2);
+
+            // Section badge in grid box.
+            $data->sectionbadgeingridbox = ($coursesettings['sectionbadgeingridbox'] == 2);
+
             // 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
@@ -65,12 +65,21 @@
     width: 210px;
 }
 
+.format-grid .thegrid .grid-section.card {
+    border-width: 2px;
+}
+
 .format-grid .thegrid .grid-section.currentgridsection {
     border: 2px solid var(--primary);
 }
 
+.format-grid .thegrid .grid-section-inner .card-body {
+    min-height: 0;
+}
+
 .format-grid .thegrid .grid-image-container {
     height: 140px;
+    min-height: 140px;
 }
 
 .format-grid .thegrid .grid-image {
@@ -90,6 +99,21 @@
 }
 /*rtl:end:ignore*/
 
+.format-grid .thegrid .grid-image .grid-badge-middle {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.format-grid .thegrid .grid-image .grid-badge-bottom {
+    bottom: 1.5rem;
+    left: 0;
+    position: absolute;
+    right: 0;
+}
+
 .format-grid .thegrid .grid-generatedimage {
     background-size: contain;
     height: 100%;
@@ -117,14 +141,14 @@
     border-radius: 45px;
     border-style: solid;
     border-width: 3px;
-    bottom: 8%;
+    bottom: 1rem;
     display: flex;
     flex-direction: column;
     height: 42px;
     justify-content: center;
     padding: 4px;
     position: absolute;
-    right: 8%;
+    right: 0.5rem;
     width: 42px;
 }
 

diff --git a/templates/coursestyles.mustache b/templates/coursestyles.mustache
@@ -36,6 +36,7 @@
     /* -- Grid -- */
     .format-grid .thegrid .grid-image-container {
         height: {{height}}px;
+        min-height: {{height}}px;
     }
 
     .format-grid .thegrid .grid-section {

diff --git a/templates/grid.mustache b/templates/grid.mustache
@@ -27,6 +27,8 @@
     * sectionbreakheading - Section break heading.
     * number - Section number.
     * imageresizemethodcrop - Image resize method is crop.
+    * sectiontitleingridbox - Show the section title?
+    * sectionbadgeingridbox - Show the section bagde if any?
     * iscurrent - Current section?
     * sectionurl - Section URL.
     * sectionname - Section name.
@@ -63,6 +65,8 @@
             }
         ],
         "imageresizemethodcrop": true,
+        "sectiontitleingridbox": true,
+        "sectionbadgeingridbox": true,
         "showcompletion": true
     }
 }}
@@ -84,26 +88,42 @@
         <div class="grid-modal grid-section-inner d-flex flex-column h-100" data-toggle="modal" data-target="#gridPopup" data-section="{{number}}" tabindex="0">
         {{/popup}}
             <div class="card-body p-0">
+                {{#sectiontitleingridbox}}
                 <div class="card-header h-100">
                     <h3 class="h4 text-truncate">{{{sectionname}}}</h3>
-                    {{#hasbadge}}
+                    {{#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>
+                {{/sectiontitleingridbox}}
             </div>
             <div class="grid-image-container">
                 {{#imageuri}}
                 <div class="grid-image{{^imageresizemethodcrop}} grid-scaled{{/imageresizemethodcrop}} text-center">
-                    <img{{#imageresizemethodcrop}} class="card-img-bottom" {{/imageresizemethodcrop}} src="{{imageuri}}" alt="{{imagealttext}}" loading="lazy">
+                    <img{{#imageresizemethodcrop}} class="card-img-bottom{{^sectiontitleingridbox}} card-img-top{{/sectiontitleingridbox}}"{{/imageresizemethodcrop}} src="{{imageuri}}" alt="{{imagealttext}}" loading="lazy">
+                    {{^sectiontitleingridbox}}{{#sectionbadgeingridbox}}{{#hasbadge}}
+                    <div data-region="sectionbadges" class="sectionbadges d-flex {{^sectioncompletionmarkup}}justify-content-center align-items-center grid-badge-middle{{/sectioncompletionmarkup}}{{#sectioncompletionmarkup}}ml-2 align-items-end grid-badge-bottom{{/sectioncompletionmarkup}}">
+                        {{$ core_courseformat/local/content/section/badges }}
+                            {{> core_courseformat/local/content/section/badges }}
+                        {{/ core_courseformat/local/content/section/badges }}
+                    </div>
+                    {{/hasbadge}}{{/sectionbadgeingridbox}}{{/sectiontitleingridbox}}
                     {{#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{{^sectiontitleingridbox}} card-img-top{{/sectiontitleingridbox}} text-center" style="background-image: url('{{generatedimageuri}}');">
+                    {{^sectiontitleingridbox}}{{#sectionbadgeingridbox}}{{#hasbadge}}
+                    <div data-region="sectionbadges" class="sectionbadges d-flex justify-content-center align-items-center h-100">
+                        {{$ core_courseformat/local/content/section/badges }}
+                            {{> core_courseformat/local/content/section/badges }}
+                        {{/ core_courseformat/local/content/section/badges }}
+                    </div>
+                    {{/hasbadge}}{{/sectionbadgeingridbox}}{{/sectiontitleingridbox}}
                     {{#sectioncompletionmarkup}}{{{sectioncompletionmarkup}}}{{/sectioncompletionmarkup}}
                 </div>
                 {{/generatedimageuri}}
@@ -112,7 +132,7 @@
                     <p><small>{{imageerror}}</small></p>
                     {{#sectioncompletionmarkup}}{{{sectioncompletionmarkup}}}{{/sectioncompletionmarkup}}
                 </div>
-            {{/imageerror}}
+                {{/imageerror}}
             </div>
         {{^popup}}
         {{#notavailable}}</div>{{/notavailable}}