Tidy.

gjbarnard · Sep 6, 2024 · 71422b2 · 71422b2
1 parent 2104edd
commit 71422b2
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 32 deletions.
diff --git a/styles.css b/styles.css
@@ -61,31 +61,28 @@
 }
 
 .format-grid .thegrid .grid-section {
+    box-sizing: content-box;
     width: 210px;
 }
 
 .format-grid .thegrid .grid-section.currentgridsection {
     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
@@ -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
@@ -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}}