Solution?

gjbarnard · Sep 7, 2024 · c0a5d59 · c0a5d59
1 parent 17fab18
commit c0a5d59
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 22 deletions.
diff --git a/styles.css b/styles.css
@@ -71,12 +71,26 @@
 
 .format-grid .thegrid .grid-image-container {
     height: 140px;
+    min-height: 140px;
 }
 
 .format-grid .thegrid .grid-image {
     position: relative;
 }
 
+.format-grid .thegrid .grid-image .grid-badge-middle {
+    left: 0;
+    position: absolute;
+    right: 0;
+}
+
+.format-grid .thegrid .grid-image .grid-badge-bottom {
+    bottom: 1.5rem;
+    left: 0;
+    position: absolute;
+    right: 0;
+}
+
 .format-grid .thegrid .grid-generatedimage {
     background-size: contain;
     height: 100%;
@@ -104,14 +118,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/coursestyles.mustache b/templates/coursestyles.mustache
@@ -36,6 +36,7 @@
     /* -- Grid -- */
     .format-grid .thegrid .grid-image-container {
         height: {{height}}px;
+        min-height: {{height}}px;
     }
 
     .format-grid .thegrid .grid-section {

diff --git a/templates/grid.mustache b/templates/grid.mustache
@@ -26,6 +26,8 @@
     * sectionbreak - There is a section break for this section.
     * sectionbreakheading - Section break heading.
     * number - Section number.
+    * sectiontitleingridbox - Show the section title?
+    * sectionbadgeingridbox - Show the section bagde if any?
     * iscurrent - Current section?
     * sectionurl - Section URL.
     * sectionname - Section name.
@@ -61,6 +63,8 @@
                 "sectioncompletionmarkup": ""
             }
         ],
+        "sectiontitleingridbox": true,
+        "sectionbadgeingridbox": true,
         "showcompletion": true
     }
 }}
@@ -82,35 +86,51 @@
         <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">
+                {{#sectiontitleingridbox}}
                 <div class="card-header h-100">
                     <h3 class="h4 text-truncate">{{{sectionname}}}</h3>
-                    {{#hasbadge}}
+                    {{#sectionbadgeingridbox}}{{#hasbadge}}
                     <div data-region="sectionbadges" class="sectionbadges d-flex">
                         {{$ core_courseformat/local/content/section/badges }}
                             {{> core_courseformat/local/content/section/badges }}
                         {{/ core_courseformat/local/content/section/badges }}
                     </div>
-                    {{/hasbadge}}
+                    {{/hasbadge}}{{/sectionbadgeingridbox}}
                 </div>
-            </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}}
+                {{/sectiontitleingridbox}}
+                <div class="grid-image-container">
+                    {{#imageuri}}
+                    <div class="grid-image text-center">
+                        <img class="card-img-bottom{{^sectiontitleingridbox}} card-img-top{{/sectiontitleingridbox}}" src="{{imageuri}}" alt="{{imagealttext}}" loading="lazy">
+                        {{^sectiontitleingridbox}}{{#sectionbadgeingridbox}}{{#hasbadge}}
+                        <div data-region="sectionbadges" class="sectionbadges d-flex {{^sectioncompletionmarkup}}justify-content-center{{/sectioncompletionmarkup}}{{#sectioncompletionmarkup}}ml-2{{/sectioncompletionmarkup}} align-items-end grid-badge-bottom">
+                            {{$ core_courseformat/local/content/section/badges }}
+                                {{> core_courseformat/local/content/section/badges }}
+                            {{/ core_courseformat/local/content/section/badges }}
+                        </div>
+                        {{/hasbadge}}{{/sectionbadgeingridbox}}{{/sectiontitleingridbox}}
+                        {{#sectioncompletionmarkup}}{{{sectioncompletionmarkup}}}{{/sectioncompletionmarkup}}
+                    </div>
+                    {{/imageuri}}
+                    {{#generatedimageuri}}
+                    <div class="grid-generatedimage card-img-bottom{{^sectiontitleingridbox}} card-img-top{{/sectiontitleingridbox}} text-center" style="background-image: url('{{generatedimageuri}}');">
+                        {{^sectiontitleingridbox}}{{#sectionbadgeingridbox}}{{#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}}{{/sectionbadgeingridbox}}{{/sectiontitleingridbox}}
+                        {{#sectioncompletionmarkup}}{{{sectioncompletionmarkup}}}{{/sectioncompletionmarkup}}
+                    </div>
+                    {{/generatedimageuri}}
+                    {{#imageerror}}
+                    <div class="grid-image-error card-img-bottom{{^sectiontitleingridbox}} card-img-top{{/sectiontitleingridbox}} text-center">
+                        <p><small>{{imageerror}}</small></p>
+                        {{#sectioncompletionmarkup}}{{{sectioncompletionmarkup}}}{{/sectioncompletionmarkup}}
+                    </div>
+                    {{/imageerror}}
                 </div>
-            {{/imageerror}}
             </div>
         {{^popup}}
         {{#notavailable}}</div>{{/notavailable}}