From ec68819eee6e9d70766a7ee866a84668fcff6bee Mon Sep 17 00:00:00 2001
From: Gareth Barnard <1058419+gjb2048@users.noreply.github.com>
Date: Mon, 19 Aug 2024 21:30:53 +0100
Subject: [PATCH] Grid section title / badges - work in progress.

---
 classes/output/courseformat/content.php | 3 +++
 styles.css                              | 6 +++---
 templates/grid.mustache                 | 6 ++++--
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/classes/output/courseformat/content.php b/classes/output/courseformat/content.php
index 63591219..e31bd07e 100644
--- a/classes/output/courseformat/content.php
+++ b/classes/output/courseformat/content.php
@@ -153,6 +153,9 @@ public function export_for_template(\renderer_base $output) {
             // Justification.
             $data->gridjustification = $coursesettings['gridjustification'];
 
+            // Image resize is crop.
+            $data->imageresizemethodcrop = ($coursesettings['imageresizemethod'] == 2);
+
             // Section title in grid box.
             $data->sectiontitleingridbox = ($coursesettings['sectiontitleingridbox'] == 2);
 
diff --git a/styles.css b/styles.css
index 83e9522f..591b37aa 100644
--- a/styles.css
+++ b/styles.css
@@ -86,7 +86,7 @@
 }
 
 .format-grid .thegrid .grid-image .grid-badge-bottom {
-    bottom: 10px;
+    bottom: 1.5rem;
     left: 0;
     position: absolute;
     right: 0;
@@ -126,14 +126,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/grid.mustache b/templates/grid.mustache
index 5d21120e..c459fb0b 100644
--- a/templates/grid.mustache
+++ b/templates/grid.mustache
@@ -26,6 +26,7 @@
     * sectionbreak - There is a section break for this section.
     * 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?
@@ -63,6 +64,7 @@
                 "sectioncompletionmarkup": ""
             }
         ],
+        "imageresizemethodcrop": true,
         "sectiontitleingridbox": true,
         "sectionbadgeingridbox": true,
         "showcompletion": true
@@ -99,9 +101,9 @@
             {{/sectiontitleingridbox}}
             {{#imageuri}}
             <div class="grid-image card-img-bottom{{^sectiontitleingridbox}} card-img-top{{/sectiontitleingridbox}} text-center">
-                <img src="{{imageuri}}" alt="{{imagealttext}}" loading="lazy"{{^sectiontitleingridbox}} class="card-img-bottom card-img-top"{{/sectiontitleingridbox}}>
+                <img src="{{imageuri}}" alt="{{imagealttext}}" loading="lazy"{{#imageresizemethodcrop}} class="h-100 card-img-bottom{{^sectiontitleingridbox}} card-img-top{{/sectiontitleingridbox}}"{{/imageresizemethodcrop}}>
                 {{^sectiontitleingridbox}}{{#hasbadge}}
-                <div data-region="sectionbadges" class="sectionbadges d-flex justify-content-center align-items-end h-100 grid-badge-bottom">
+                <div data-region="sectionbadges" class="sectionbadges d-flex {{^sectioncompletionmarkup}}justify-content-center{{/sectioncompletionmarkup}}{{#sectioncompletionmarkup}}ml-2{{/sectioncompletionmarkup}} align-items-end h-100 grid-badge-bottom">
                     {{$ core_courseformat/local/content/section/badges }}
                         {{> core_courseformat/local/content/section/badges }}
                     {{/ core_courseformat/local/content/section/badges }}