Grid section title / badges - work in progress.

gjbarnard · Aug 30, 2024 · 33fb278 · 33fb278
1 parent e8a0309
commit 33fb278
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 12 deletions.
diff --git a/classes/output/courseformat/content.php b/classes/output/courseformat/content.php
@@ -159,9 +159,6 @@ public function export_for_template(\renderer_base $output) {
             // 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/styles.css b/styles.css
@@ -79,6 +79,12 @@
     position: relative;
 }
 
+.format-grid .thegrid .grid-image .grid-badge-middle {
+    left: 0;
+    position: absolute;
+    right: 0;
+}
+
 .format-grid .thegrid .grid-generatedimage {
     background-size: contain;
     height: 140px;

diff --git a/templates/grid.mustache b/templates/grid.mustache
@@ -28,7 +28,6 @@
     * 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.
@@ -66,7 +65,6 @@
         ],
         "sectiontitleingridbox": true,
         "sectionbadgeingridbox": true,
-        "sectiontitleandorbadgeingridbox": true,
         "showcompletion": true
     }
 }}
@@ -87,11 +85,9 @@
         {{#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}}
+            {{#sectiontitleingridbox}}
             <div class="card-header text-truncate h-100">
-                {{#sectiontitleingridbox}}
                 <h3 class="h4">{{{sectionname}}}</h3>
-                {{/sectiontitleingridbox}}
                 {{#sectionbadgeingridbox}}{{#hasbadge}}
                 <div data-region="sectionbadges" class="sectionbadges d-flex">
                     {{$ core_courseformat/local/content/section/badges }}
@@ -100,20 +96,34 @@
                 </div>
                 {{/hasbadge}}{{/sectionbadgeingridbox}}
             </div>
-            {{/sectiontitleandorbadgeingridbox}}
+            {{/sectiontitleingridbox}}
             {{#imageuri}}
-            <div class="grid-image card-img-bottom text-center">
+            <div class="grid-image card-img-bottom{{^sectiontitleingridbox}} card-img-top{{/sectiontitleingridbox}} text-center">
                 <img src="{{imageuri}}" alt="{{imagealttext}}" loading="lazy">
+                {{^sectiontitleingridbox}}{{#hasbadge}}
+                <div data-region="sectionbadges" class="sectionbadges d-flex justify-content-center align-items-center h-100 grid-badge-middle">
+                    {{$ core_courseformat/local/content/section/badges }}
+                        {{> core_courseformat/local/content/section/badges }}
+                    {{/ core_courseformat/local/content/section/badges }}
+                </div>
+                {{/hasbadge}}{{/sectiontitleingridbox}}
                 {{#sectioncompletionmarkup}}{{{sectioncompletionmarkup}}}{{/sectioncompletionmarkup}}
             </div>
             {{/imageuri}}
             {{#generatedimageuri}}
-            <div class="grid-generatedimage card-img-bottom{{^sectiontitleandorbadgeingridbox}} card-img-top{{/sectiontitleandorbadgeingridbox}} 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}}{{#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}}{{/sectiontitleingridbox}}
                 {{#sectioncompletionmarkup}}{{{sectioncompletionmarkup}}}{{/sectioncompletionmarkup}}
             </div>
             {{/generatedimageuri}}
             {{#imageerror}}
-            <div class="grid-image-error card-img-bottom{{^sectiontitleandorbadgeingridbox}} card-img-top{{/sectiontitleandorbadgeingridbox}} text-center">
+            <div class="grid-image-error card-img-bottom{{^sectiontitleingridbox}} card-img-top{{/sectiontitleingridbox}} text-center">
                 <p><small>{{imageerror}}</small></p>
                 {{#sectioncompletionmarkup}}{{{sectioncompletionmarkup}}}{{/sectioncompletionmarkup}}
             </div>