MDL-58251 block_myoverview: style courses view on clean theme

Part of MDL-55611 epic.

blocks/myoverview/templates/course-summary.mustache

@@ -29,15 +29,15 @@
     }
 }}
 <div class="course-info-container" id="course-info-container-{{id}}">
-    <div class="hidden-sm-up">
+    <div class="hidden-sm-up hidden-tablet hidden-phone">
         {{> block_myoverview/progress-chart}}
         <h4 class="h5"><a href="{{viewurl}}">{{fullnamedisplay}}</a></h4>
     </div>
-    <div class="hidden-sm-down">
+    <div class="hidden-sm-down hidden-tablet hidden-desktop">
         {{> block_myoverview/progress-chart}}
         <h4 class="h5"><a href="{{viewurl}}">{{fullnamedisplay}}</a></h4>
     </div>
-    <div class="hidden-xs-down hidden-md-up">
+    <div class="hidden-xs-down hidden-md-up visible-tablet">
         <div class="media">
             <div class="media-left">
                 <div class="media-object">

blocks/myoverview/templates/courses-view-course-item.mustache

@@ -31,11 +31,11 @@
 <div class="col-lg-6 col-xl-4">
     <div class="card m-b-1">
         <div class="card-block course-info-container" id="course-info-container-{{id}}">
-            <div class="hidden-sm-up">
+            <div class="hidden-sm-up hidden-phone">
                 {{> block_myoverview/progress-chart}}
                 <h4 class="h5"><a href="{{viewurl}}">{{fullnamedisplay}}</a></h4>
             </div>
-            <div class="hidden-xs-down">
+            <div class="hidden-xs-down visible-phone">
                 <div class="media">
                     <div class="media-left">
                         <div class="media-object">

blocks/myoverview/templates/paging-bar-item.mustache

@@ -32,9 +32,6 @@
        data-region="page-link">
         {{$item-content}}
             {{{page}}}
-            {{#active}}
-                <span class="sr-only">{{#str}}currentinparentheses, theme_boost{{/str}}</span>
-            {{/active}}
         {{/item-content}}
     </a>
 </li>

blocks/myoverview/templates/paging-content-item.mustache

@@ -25,7 +25,7 @@
 }}
 <div data-region="paging-content-item"
      data-page="{{page}}"
-     class="row {{#active}}active{{/active}}{{^active}}hidden{{/active}}">
+     class="{{#active}}active{{/active}}{{^active}}hidden{{/active}}">
     {{$content}}
         {{{content}}}
     {{/content}}

theme/bootstrapbase/templates/block_myoverview/main.mustache

@@ -23,28 +23,28 @@
     {}
 }}
 
-<div id="block-myoverview-{{uniqid}}" class="block-myoverview container-fluid" data-region="myoverview">
+<div id="block-myoverview-{{uniqid}}" class="block-myoverview" data-region="myoverview">
-    <div class="row">
+    <ul class="nav nav-tabs" role="tablist">
-        <ul class="nav nav-tabs" role="tablist">
+        <li class="nav-item active">
-            <li class="nav-item active">
+            <a class="nav-link" href="#myoverview_timeline_view" role="tab" data-toggle="tab">
-                <a class="nav-link" href="#myoverview_timeline_view" role="tab" data-toggle="tab">
+                {{#str}} timeline, block_myoverview {{/str}}
-                    {{#str}} timeline, block_myoverview {{/str}}
+            </a>
-                </a>
+        </li>
-            </li>
+        <li class="nav-item">
-            <li class="nav-item">
+            <a class="nav-link" href="#myoverview_courses_view" role="tab" data-toggle="tab">
-                <a class="nav-link" href="#myoverview_courses_view" role="tab" data-toggle="tab">
+                {{#str}} courses {{/str}}
-                    {{#str}} courses {{/str}}
+            </a>
-                </a>
+        </li>
-            </li>
+    </ul>
-        </ul>
-    </div>
 
     <div class="tab-content">
         <div role="tabpanel" class="tab-pane fade in active" id="myoverview_timeline_view">
             {{> block_myoverview/timeline-view }}
         </div>
         <div role="tabpanel" class="tab-pane fade" id="myoverview_courses_view">
-            {{> block_myoverview/courses-view }}
+            {{#coursesview}}
+                {{> block_myoverview/courses-view }}
+            {{/coursesview}}
         </div>
     </div>
 </div>

theme/bootstrapbase/templates/block_myoverview/paging-bar.mustache

@@ -0,0 +1,71 @@
+{{!
+    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-bar
+
+    This template renders the each course block containing a summary and calendar events.
+
+    Example context (json):
+    {
+    }
+}}
+{{#pagingbar}}
+<div aria-label="{{label}}"
+     id="{{$pagingbarid}}paging-bar-{{uniqid}}{{/pagingbarid}}"
+     class="pagination"
+     data-region="paging-bar"
+     data-page-count="{{pagecount}}">
+
+    <ul>
+        {{#previous}}
+            {{< block_myoverview/paging-bar-item }}
+                {{$item-content}}
+                    <span aria-hidden="true">&laquo;</span>
+                    <span class="sr-only">{{#str}}previous{{/str}}</span>
+                {{/item-content}}
+            {{/ block_myoverview/paging-bar-item }}
+        {{/previous}}
+        {{#first}}
+            {{< block_myoverview/paging-bar-item }}
+                {{$pagenumber}}first{{/pagenumber}}
+            {{/ block_myoverview/paging-bar-item }}
+        {{/first}}
+        {{#pages}}
+            {{> block_myoverview/paging-bar-item }}
+        {{/pages}}
+        {{#last}}
+            {{< block_myoverview/paging-bar-item }}
+                {{$pagenumber}}last{{/pagenumber}}
+            {{/ block_myoverview/paging-bar-item }}
+        {{/last}}
+        {{#next}}
+            {{< block_myoverview/paging-bar-item }}
+                {{$item-content}}
+                    <span aria-hidden="true">&raquo;</span>
+                    <span class="sr-only">{{#str}}next{{/str}}</span>
+                {{/item-content}}
+            {{/ block_myoverview/paging-bar-item }}
+        {{/next}}
+    </ul>
+</div>
+{{#js}}
+require(['jquery', 'block_myoverview/paging_bar'], function($, PagingBar) {
+    var root = $('#{{$pagingbarid}}paging-bar-{{uniqid}}{{/pagingbarid}}');
+    PagingBar.registerEventListeners(root);
+});
+{{/js}}
+{{/pagingbar}}