MDL-63698 block_myoverview: Summary view course images eq height/width.

diff --git a/blocks/myoverview/templates/view-summary.mustache b/blocks/myoverview/templates/view-summary.mustache
index 73779ee..0470ca4 100644 (file)
--- a/blocks/myoverview/templates/view-summary.mustache
+++ b/blocks/myoverview/templates/view-summary.mustache
@@ -42,8 +42,9 @@
                 <div class="position-absolute">
                     {{> block_myoverview/favourite-icon }}
                 </div>
-                <img src="{{{courseimage}}}" class="summaryimage img-fluid" alt="{{#str}}aria:courseimage, block_myoverview{{/str}}">
-
+                <div class="card-img-top summaryimage" style='background-image: url("{{{courseimage}}}");'>
+                    <span class="sr-only">{{#str}}aria:courseimage, block_myoverview{{/str}}</span>
+                </div>
             </a>
             <div class="col-sm-8 col-xl-9 span8 align-self-stretch d-flex flex-column">
                 <div class="d-flex">

diff --git a/theme/boost/scss/moodle/blocks.scss b/theme/boost/scss/moodle/blocks.scss
index 6494af8..a512c03 100644 (file)
--- a/theme/boost/scss/moodle/blocks.scss
+++ b/theme/boost/scss/moodle/blocks.scss
@@ -108,11 +108,12 @@ $card-gutter : $card-deck-margin * 2;
             background-color: $gray-200;
         }
     }
-    @include media-breakpoint-down(sm) {
-        .summaryimage {
-            max-height: 7rem;
-        }
-    }
+}
+
+.summaryimage {
+    height: 7rem;
+    background-position: center;
+    background-size: cover;
 }
 
 .dashboard-card-deck .dashboard-card {

diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 2b9922b..7f190af 100644 (file)
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -11162,9 +11162,10 @@ div.editor_atto_toolbar button .icon {
   .block_myoverview .btn.btn-link.btn-icon:hover, .block_myoverview #page-grade-grading-manage .actions .btn-link.btn-icon.action:hover, #page-grade-grading-manage .actions .block_myoverview .btn-link.btn-icon.action:hover, .block_myoverview #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon:hover, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .block_myoverview input.btn-link.btn-icon:hover, .block_myoverview #rubric-rubric.gradingform_rubric .btn-link.btn-icon.addcriterion:hover, #rubric-rubric.gradingform_rubric .block_myoverview .btn-link.btn-icon.addcriterion:hover, .block_myoverview .btn.btn-link.btn-icon:focus, .block_myoverview #page-grade-grading-manage .actions .btn-link.btn-icon.action:focus, #page-grade-grading-manage .actions .block_myoverview .btn-link.btn-icon.action:focus, .block_myoverview #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon:focus, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .block_myoverview input.btn-link.btn-icon:focus, .block_myoverview #rubric-rubric.gradingform_rubric .btn-link.btn-icon.addcriterion:focus, #rubric-rubric.gradingform_rubric .block_myoverview .btn-link.btn-icon.addcriterion:focus {
     background-color: #e9ecef; }
 
-@media (max-width: 767.98px) {
-  .block_myoverview .summaryimage {
-    max-height: 7rem; } }
+.summaryimage {
+  height: 7rem;
+  background-position: center;
+  background-size: cover; }
 
 .dashboard-card-deck .dashboard-card {
   margin-bottom: 0.5rem;