From 71422b2a0ce03d2c4ef4fc37ac3413a7a6a6933e Mon Sep 17 00:00:00 2001
From: Gareth Barnard <1058419+gjb2048@users.noreply.github.com>
Date: Fri, 6 Sep 2024 21:26:03 +0100
Subject: [PATCH] Tidy.

---
 styles.css                      | 19 +++++++---------
 templates/coursestyles.mustache |  3 +--
 templates/grid.mustache         | 40 +++++++++++++++++----------------
 3 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/styles.css b/styles.css
index 922b9cf0..5a2834e0 100644
--- a/styles.css
+++ b/styles.css
@@ -61,6 +61,7 @@
 }
 
 .format-grid .thegrid .grid-section {
+    box-sizing: content-box;
     width: 210px;
 }
 
@@ -68,24 +69,20 @@
     border: 2px solid var(--primary);
 }
 
-.format-grid .thegrid .grid-image {
+.format-grid .thegrid .grid-image-container {
     height: 140px;
+}
+
+.format-grid .thegrid .grid-image {
     position: relative;
 }
 
 .format-grid .thegrid .grid-generatedimage {
     background-size: contain;
-    height: 140px;
-}
-
-/*rtl:begin:ignore*/
-.format-grid .thegrid .grid-image img {
-    left: 50%;
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%,-50%);
+    height: 100%;
+    position: relative;
+    width: 100%;
 }
-/*rtl:end:ignore*/
 
 .format-grid #gridPopup .modal-dialog {
     max-width: 100%;
diff --git a/templates/coursestyles.mustache b/templates/coursestyles.mustache
index 34361b82..f86ca0b1 100644
--- a/templates/coursestyles.mustache
+++ b/templates/coursestyles.mustache
@@ -34,8 +34,7 @@
     /* <![CDATA[ */
 
     /* -- Grid -- */
-    .format-grid .thegrid .grid-image,
-    .format-grid .thegrid .grid-generatedimage {
+    .format-grid .thegrid .grid-image-container {
         height: {{height}}px;
     }
 
diff --git a/templates/grid.mustache b/templates/grid.mustache
index 9aa362be..b26e260d 100644
--- a/templates/grid.mustache
+++ b/templates/grid.mustache
@@ -75,11 +75,11 @@
     {{/sectionbreak}}
     <div id="section-{{number}}" class="grid-section card{{#iscurrent}} currentgridsection{{/iscurrent}}" title="{{sectionname}}">
         {{^popup}}
-        {{#notavailable}}<div class="grid-section-inner d-flex flex-column h-100 justify-content-between">{{/notavailable}}
-        {{^notavailable}}<a class="grid-section-inner d-flex flex-column h-100 justify-content-between" href="{{sectionurl}}">{{/notavailable}}
+        {{#notavailable}}<div class="grid-section-inner d-flex flex-column h-100">{{/notavailable}}
+        {{^notavailable}}<a class="grid-section-inner d-flex flex-column h-100" href="{{sectionurl}}">{{/notavailable}}
         {{/popup}}
         {{#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">
+        <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">
                 <div class="card-header h-100">
@@ -93,23 +93,25 @@
                     {{/hasbadge}}
                 </div>
             </div>
-            {{#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}}');">
-                {{#sectioncompletionmarkup}}{{{sectioncompletionmarkup}}}{{/sectioncompletionmarkup}}
-            </div>
-            {{/generatedimageuri}}
-            {{#imageerror}}
-            <div class="grid-image-error card-img-bottom text-center">
-                <p><small>{{imageerror}}</small></p>
-                {{#sectioncompletionmarkup}}{{{sectioncompletionmarkup}}}{{/sectioncompletionmarkup}}
-            </div>
+            <div class="grid-image-container">
+                {{#imageuri}}
+                <div class="grid-image text-center">
+                    <img class="card-img-bottom" 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}}');">
+                    {{#sectioncompletionmarkup}}{{{sectioncompletionmarkup}}}{{/sectioncompletionmarkup}}
+                </div>
+                {{/generatedimageuri}}
+                {{#imageerror}}
+                <div class="grid-image-error card-img-bottom text-center">
+                    <p><small>{{imageerror}}</small></p>
+                    {{#sectioncompletionmarkup}}{{{sectioncompletionmarkup}}}{{/sectioncompletionmarkup}}
+                </div>
             {{/imageerror}}
+            </div>
         {{^popup}}
         {{#notavailable}}</div>{{/notavailable}}
         {{^notavailable}}</a>{{/notavailable}}