Grid section title / badges - work in progress.

gjbarnard · Aug 30, 2024 · ec68819 · ec68819
1 parent 0b92c1c
commit ec68819
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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 }}