MDL-61657 block_myoverview: implement course images for the myoverview block

theme/bootstrapbase/less/moodle/blocks.less

@@ -343,6 +343,10 @@
 .block_myoverview {
     background-color: transparent;
 
+    .row-fluid [class*="span"] {
+        margin-left:0px;
+    }
+
     .event-list-item {
         border-bottom: 1px solid @tableBorder;
         padding-bottom: 10px;
@@ -395,5 +399,13 @@
     .well {
         background-color: @white;
         box-shadow: none;
+        margin: 0 5px 10px;
+    }
+    .myoverviewimg {
+        height: 150px;
+        &.courseimage {
+            background-position: center;
+            background-size: cover;
+        }
     }
 }

theme/bootstrapbase/style/moodle.css

@@ -16487,6 +16487,9 @@ body {
 .block_myoverview {
   background-color: transparent;
 }
+.block_myoverview .row-fluid [class*="span"] {
+  margin-left: 0px;
+}
 .block_myoverview .event-list-item {
   border-bottom: 1px solid #ddd;
   padding-bottom: 10px;
@@ -16529,6 +16532,14 @@ body {
 .block_myoverview .well {
   background-color: #fff;
   box-shadow: none;
+  margin: 0 5px 10px;
+}
+.block_myoverview .myoverviewimg {
+  height: 150px;
+}
+.block_myoverview .myoverviewimg.courseimage {
+  background-position: center;
+  background-size: cover;
 }
 /**
  * Moodle forms HTML isn't changeable via renderers (yet?) so this

theme/bootstrapbase/templates/block_myoverview/course-paging-content-item.mustache

@@ -42,5 +42,6 @@
         {{#courses}}
             {{> block_myoverview/courses-view-course-item }}
         {{/courses}}
+        <div class="clearfix"></div>
     {{/content}}
 {{/ block_myoverview/paging-content-item }}

theme/bootstrapbase/templates/block_myoverview/courses-view-course-item.mustache

@@ -26,22 +26,28 @@
         "summary": "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
     }
 }}
-<div class="well well-small">
-    <div class="course-info-container" id="course-info-container-{{id}}">
-        <div class="media">
-            <div class="pull-left">
-                <div class="media-object">
-                    {{> block_myoverview/progress-chart}}
+<div class="span6">
+    <div class="well well-small">
+        <a href="{{viewurl}}">
+            <div class="myoverviewimg m-b-1 {{classes}}" style='background-image: url("{{{courseimage}}}");'>
+            </div>
+        </a>
+        <div class="course-info-container" id="course-info-container-{{id}}">
+            <div class="media">
+                <div class="pull-left">
+                    <div class="media-object">
+                        {{> block_myoverview/progress-chart}}
+                    </div>
+                </div>
+                <div class="media-body">
+                    <h4 class="media-heading">
+                        <a href="{{viewurl}}" class="{{^visible}}dimmed{{/visible}}">{{{fullnamedisplay}}}</a>
+                    </h4>
                 </div>
             </div>
-            <div class="media-body">
-                <h4 class="media-heading">
-                    <a href="{{viewurl}}" class="{{^visible}}dimmed{{/visible}}">{{{fullnamedisplay}}}</a>
-                </h4>
-            </div>
+            <p class="text-muted">
+                {{#shortentext}} 140, {{{summary}}}{{/shortentext}}
+            </p>
         </div>
-        <p class="text-muted">
-            {{#shortentext}} 140, {{{summary}}}{{/shortentext}}
-        </p>
     </div>
 </div>

theme/bootstrapbase/templates/block_myoverview/paging-content-item.mustache

@@ -0,0 +1,36 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template block_myoverview/paging-content-item
+
+    This template renders the content of a page. It is to be used with
+    the paging bar to toggle visibility of the content items.
+
+    Example context (json):
+    {
+        "active": true,
+        "page": 1,
+        "content": "<p>Some page content</p>"
+    }
+}}
+<div data-region="paging-content-item"
+     data-page="{{page}}"
+     class="row-fluid {{^active}}hidden{{/active}} {{$classes}}{{/classes}}">
+    {{$content}}
+        {{{content}}}
+    {{/content}}
+</div>