From c530e4c448be004a1f799da7c7e0773591e544a4 Mon Sep 17 00:00:00 2001
From: Mathew May <mathewm@hotmail.co.nz>
Date: Tue, 21 Dec 2021 20:27:19 +0800
Subject: [PATCH] MDL-72089 block_myoverview: Template changes for styling

---
 .../templates/course-action-menu.mustache     |  6 +-
 blocks/myoverview/templates/main.mustache     |  3 +-
 .../templates/nav-display-selector.mustache   |  2 +-
 .../templates/nav-grouping-selector.mustache  |  4 +-
 .../templates/nav-search-widget.mustache      |  2 +-
 .../templates/nav-sort-selector.mustache      |  2 +-
 .../placeholder-course-list-item.mustache     | 34 ++++++++
 .../templates/placeholders.mustache           | 61 +++++---------
 .../templates/progress-bar.mustache           |  8 +-
 .../myoverview/templates/view-cards.mustache  |  6 +-
 .../myoverview/templates/view-list.mustache   | 77 ++++++++++--------
 .../templates/view-summary.mustache           | 81 ++++++++++---------
 course/templates/coursecard.mustache          | 32 ++++----
 lib/templates/search_input_auto.mustache      |  2 +-
 theme/boost/scss/moodle/blocks.scss           | 36 ++++++++-
 theme/boost/scss/moodle/core.scss             |  1 +
 theme/boost/style/moodle.css                  | 29 ++++++-
 theme/classic/style/moodle.css                | 29 ++++++-
 18 files changed, 258 insertions(+), 157 deletions(-)
 create mode 100644 blocks/myoverview/templates/placeholder-course-list-item.mustache

diff --git a/blocks/myoverview/templates/course-action-menu.mustache b/blocks/myoverview/templates/course-action-menu.mustache
index 0f370d3a717..d023110ef1d 100644
--- a/blocks/myoverview/templates/course-action-menu.mustache
+++ b/blocks/myoverview/templates/course-action-menu.mustache
@@ -30,10 +30,8 @@
         data-toggle="dropdown"
         aria-haspopup="true"
         aria-expanded="false">
-        {{#pix}} i/moremenu, core {{/pix}}
-            <span class="sr-only">
-                {{#str}} aria:courseactions, block_myoverview {{/str}} {{{fullname}}}
-            </span>
+        <i class="icon fa fa-ellipsis-v fa-fw m-0" title="{{#str}} aria:courseactions, block_myoverview {{/str}} {{{fullname}}}" aria-hidden="true"></i>
+        <span class="sr-only">{{#str}} aria:courseactions, block_myoverview {{/str}} {{{fullname}}}</span>
     </button>
     <div class="dropdown-menu dropdown-menu-right">
         <a class="dropdown-item {{#isfavourite}}hidden{{/isfavourite}}" href="#"
diff --git a/blocks/myoverview/templates/main.mustache b/blocks/myoverview/templates/main.mustache
index 704ff84f562..11e40ad88aa 100644
--- a/blocks/myoverview/templates/main.mustache
+++ b/blocks/myoverview/templates/main.mustache
@@ -24,8 +24,9 @@
 }}
 
 <div id="block-myoverview-{{uniqid}}" class="block-myoverview block-cards" data-region="myoverview" role="navigation">
+    <hr class="mt-0"/>
 
-    <div data-region="filter" class="d-flex align-items-center flex-wrap" aria-label="{{#str}} aria:controls, block_myoverview {{/str}}">
+    <div data-region="filter" class="d-flex align-items-center my-2" aria-label="{{#str}} aria:controls, block_myoverview {{/str}}">
         {{> block_myoverview/nav-grouping-selector }}
 
         {{> block_myoverview/nav-search-widget }}
diff --git a/blocks/myoverview/templates/nav-display-selector.mustache b/blocks/myoverview/templates/nav-display-selector.mustache
index 8c5cc4c46c0..45787c65cb4 100644
--- a/blocks/myoverview/templates/nav-display-selector.mustache
+++ b/blocks/myoverview/templates/nav-display-selector.mustache
@@ -30,7 +30,7 @@
     <button id="displaydropdown" type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
     aria-label="{{#str}} aria:displaydropdown, block_myoverview {{/str}}">
         {{#pix}} a/view_icon_active {{/pix}}
-        <span class="d-sm-inline-block" data-active-item-text>
+        <span class="sr-only" data-active-item-text>
             {{#card}}{{#str}} card, block_myoverview {{/str}}{{/card}}
             {{#list}}{{#str}} list, block_myoverview {{/str}}{{/list}}
             {{#summary}}{{#str}} summary, block_myoverview {{/str}}{{/summary}}
diff --git a/blocks/myoverview/templates/nav-grouping-selector.mustache b/blocks/myoverview/templates/nav-grouping-selector.mustache
index c7ce41b53b6..6615a273945 100644
--- a/blocks/myoverview/templates/nav-grouping-selector.mustache
+++ b/blocks/myoverview/templates/nav-grouping-selector.mustache
@@ -39,10 +39,10 @@
     }
 }}
 {{#displaygroupingselector}}
-<div class="dropdown mb-1 mr-auto">
+<div class="dropdown mb-1 mr-1">
     <button id="groupingdropdown" type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="{{#str}} aria:groupingdropdown, block_myoverview {{/str}}">
         {{#pix}} i/filter {{/pix}}
-        <span class="d-sm-inline-block" data-active-item-text>
+        <span class="sr-only" data-active-item-text>
             {{#allincludinghidden}}{{#str}} allincludinghidden, block_myoverview {{/str}}{{/allincludinghidden}}
             {{#all}}{{#str}} all, block_myoverview {{/str}}{{/all}}
             {{#inprogress}}{{#str}} inprogress, block_myoverview {{/str}}{{/inprogress}}
diff --git a/blocks/myoverview/templates/nav-search-widget.mustache b/blocks/myoverview/templates/nav-search-widget.mustache
index 0130186edac..bb1c8700932 100644
--- a/blocks/myoverview/templates/nav-search-widget.mustache
+++ b/blocks/myoverview/templates/nav-search-widget.mustache
@@ -22,7 +22,7 @@
     Example context (json):
     {}
 }}
-<div class="mb-1 mr-1">
+<div class="mb-1 mr-1 flex-grow-1">
     {{< core/search_input_auto }}
         {{$label}}{{#str}}
             searchcourses, block_myoverview
diff --git a/blocks/myoverview/templates/nav-sort-selector.mustache b/blocks/myoverview/templates/nav-sort-selector.mustache
index 4dde517c2d8..ac3b1c776eb 100644
--- a/blocks/myoverview/templates/nav-sort-selector.mustache
+++ b/blocks/myoverview/templates/nav-sort-selector.mustache
@@ -30,7 +30,7 @@
     <div class="dropdown">
         <button id="sortingdropdown" type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown"  aria-haspopup="true" aria-expanded="false" aria-label="{{#str}} aria:sortingdropdown, block_myoverview {{/str}}">
             {{#pix}} t/sort_by {{/pix}}
-            <span class="d-sm-inline-block" data-active-item-text>
+            <span class="sr-only" data-active-item-text>
                 {{#title}}{{#str}} title, block_myoverview {{/str}}{{/title}}
                 {{#lastaccessed}}{{#str}} lastaccessed, block_myoverview {{/str}}{{/lastaccessed}}
                 {{#shortname}}{{#str}} shortname, block_myoverview {{/str}}{{/shortname}}
diff --git a/blocks/myoverview/templates/placeholder-course-list-item.mustache b/blocks/myoverview/templates/placeholder-course-list-item.mustache
new file mode 100644
index 00000000000..4454498833a
--- /dev/null
+++ b/blocks/myoverview/templates/placeholder-course-list-item.mustache
@@ -0,0 +1,34 @@
+{{!
+    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/placeholder-course-list-item
+
+    This template renders the loading placeholder for the list & summary course items.
+
+    Example context (json):
+    {}
+}}
+<li class="list-group-item course-listitem border-left-0 border-right-0 border-top-0 px-2 rounded-0">
+    <div class="row">
+        <div class="col-md-2 d-flex align-items-center">
+            <div class="bg-pulse-grey card-img dashboard-list-img w-100" style="height: 1rem; width: 1rem;"></div>
+        </div>
+        <div class="col-md-10 d-flex flex-column">
+            <div class="bg-pulse-grey w-50" style="height: 1rem; margin: 0.5rem 0"></div>
+        </div>
+    </div>
+</li>
diff --git a/blocks/myoverview/templates/placeholders.mustache b/blocks/myoverview/templates/placeholders.mustache
index 022346e947c..7d7df694ac1 100644
--- a/blocks/myoverview/templates/placeholders.mustache
+++ b/blocks/myoverview/templates/placeholders.mustache
@@ -24,52 +24,27 @@
 }}
 <div data-region="loading-placeholder-content" aria-hidden="true">
     {{#cards}}
-    <div class="card-deck dashboard-card-deck one-row" style="height: 13rem">
-        {{> core_course/placeholder-course }}
-        {{> core_course/placeholder-course }}
-        {{> core_course/placeholder-course }}
-        {{> core_course/placeholder-course }}
-    </div>
+        <div class="card-deck dashboard-card-deck one-row" style="height: 13rem">
+            {{> core_course/placeholder-course }}
+            {{> core_course/placeholder-course }}
+            {{> core_course/placeholder-course }}
+            {{> core_course/placeholder-course }}
+        </div>
     {{/cards}}
     {{#list}}
-    <ul class="list-group">
-        <li class="list-group-item course-listitem">
-            <div class="col-md-6 p-0 d-flex align-items-center">
-                <div class="bg-pulse-grey rounded-circle mr-2" style="height: 1rem; width: 1rem;"></div>
-                <div class="bg-pulse-grey w-50" style="height: 1rem; margin: 0.5rem 0"></div>
-            </div>
-        </li>
-        <li class="list-group-item course-listitem">
-            <div class="col-md-6 p-0 d-flex align-items-center">
-                <div class="bg-pulse-grey rounded-circle mr-2" style="height: 1rem; width: 1rem;"></div>
-                <div class="bg-pulse-grey w-50" style="height: 1rem; margin: 0.5rem 0"></div>
-            </div>
-        </li>
-        <li class="list-group-item course-listitem">
-            <div class="col-md-6 p-0 d-flex align-items-center">
-                <div class="bg-pulse-grey rounded-circle mr-2" style="height: 1rem; width: 1rem;"></div>
-                <div class="bg-pulse-grey w-50" style="height: 1rem; margin: 0.5rem 0"></div>
-            </div>
-        </li>
-        <li class="list-group-item course-listitem">
-            <div class="col-md-6 p-0 d-flex align-items-center">
-                <div class="bg-pulse-grey rounded-circle mr-2" style="height: 1rem; width: 1rem;"></div>
-                <div class="bg-pulse-grey w-50" style="height: 1rem; margin: 0.5rem 0"></div>
-            </div>
-        </li>
-    </ul>
+        <ul class="list-group">
+            {{> block_myoverview/placeholder-course-list-item }}
+            {{> block_myoverview/placeholder-course-list-item }}
+            {{> block_myoverview/placeholder-course-list-item }}
+            {{> block_myoverview/placeholder-course-list-item }}
+        </ul>
     {{/list}}
     {{#summary}}
-    <div class="course-summaryitem mb-1 p-2">
-        <div class="d-flex">
-            <div class="d-flex">
-                <div class="bg-pulse-grey rounded-circle m-0 p-0 mr-1" style="height: 7rem; width: 7rem;"></div>
-            </div>
-            <div class="d-flex w-100 flex-column">
-                <div class="bg-pulse-grey w-50 mb-1" style="height: 1rem; margin: 0.5rem 0"></div>
-                <div class="bg-pulse-grey w-100" style="height: 13rem"></div>
-            </div>
-        </div>
-    </div>
+        <ul class="list-group">
+            {{> block_myoverview/placeholder-course-list-item }}
+            {{> block_myoverview/placeholder-course-list-item }}
+            {{> block_myoverview/placeholder-course-list-item }}
+            {{> block_myoverview/placeholder-course-list-item }}
+        </ul>
     {{/summary}}
 </div>
diff --git a/blocks/myoverview/templates/progress-bar.mustache b/blocks/myoverview/templates/progress-bar.mustache
index 02fa1f0e0f3..8a1da523699 100644
--- a/blocks/myoverview/templates/progress-bar.mustache
+++ b/blocks/myoverview/templates/progress-bar.mustache
@@ -24,11 +24,7 @@
         "progress": 50
     }
 }}
-
-<div class="progress bg-white border">
-    <div class="progress-bar bar" role="progressbar" aria-valuenow="{{progress}}" style="width: {{progress}}%" aria-valuemin="0" aria-valuemax="100"></div>
-</div>
-<div class="small">
+<div class="progress-text">
     <span class="sr-only">{{#str}}aria:courseprogress, block_myoverview{{/str}}</span>
-    {{#str}}completepercent, block_myoverview, <strong>{{progress}}</strong>{{/str}}
+    {{#str}}completepercent, block_myoverview, <span>{{progress}}</span>{{/str}}
 </div>
diff --git a/blocks/myoverview/templates/view-cards.mustache b/blocks/myoverview/templates/view-cards.mustache
index c354a646777..e45b3237322 100644
--- a/blocks/myoverview/templates/view-cards.mustache
+++ b/blocks/myoverview/templates/view-cards.mustache
@@ -38,11 +38,13 @@
 
 {{< core_course/coursecards }}
     {{$menu}}
-        {{> block_myoverview/course-action-menu }}
+        <div class="card-footer dashboard-card-footer menu border-0 bg-white ml-auto">
+            {{> block_myoverview/course-action-menu }}
+        </div>
     {{/menu}}
     {{$progress}}
         {{#hasprogress}}
-            <div class="card-footer dashboard-card-footer border-0 bg-white">
+            <div class="card-footer dashboard-card-footer border-0 bg-white w-100">
                 {{> block_myoverview/progress-bar}}
             </div>
         {{/hasprogress}}
diff --git a/blocks/myoverview/templates/view-list.mustache b/blocks/myoverview/templates/view-list.mustache
index 38079f0cb1d..7e89779b152 100644
--- a/blocks/myoverview/templates/view-list.mustache
+++ b/blocks/myoverview/templates/view-list.mustache
@@ -38,51 +38,58 @@
 
 <ul class="list-group">
     {{#courses}}
-        <li class="list-group-item course-listitem"
+        <li class="list-group-item course-listitem border-left-0 border-right-0 border-top-0 px-2 rounded-0"
             data-region="course-content"
             data-course-id="{{{id}}}">
             <div class="row">
-                <div class="{{#hasprogress}}col-md-6{{/hasprogress}}{{^hasprogress}}col-md-11 col-md-11{{/hasprogress}} d-flex align-items-center">
-                    <div>
+                <div class="col-md-2 d-flex align-items-center mb-sm-3 mb-md-0">
+                    <a href="{{viewurl}}" tabindex="-1"  class="mw-100 w-100">
+                        <div class="card-img dashboard-list-img mw-100" style='background-image: url("{{{courseimage}}}");'>
+                            <span class="sr-only">{{#str}}aria:courseimage, core_course{{/str}}</span>
+                        </div>
+                    </a>
+                </div>
+                <div class="col-md-9 d-flex flex-column">
+                    {{#showshortname}}
                         <div class="text-muted muted d-flex flex-wrap">
                             {{#showcoursecategory}}
-                                <span class="sr-only">
-                                    {{#str}}aria:coursecategory, core_course{{/str}}
-                                </span>
-                                <span class="categoryname">
-                                    {{{coursecategory}}}
-                                </span>
+                                <div class="pl-1 pr-1">|</div>
                             {{/showcoursecategory}}
-                            {{#showshortname}}
-                                {{#showcoursecategory}}
-                                    <div class="pl-1 pr-1">|</div>
-                                {{/showcoursecategory}}
-                                <span class="sr-only">
-                                    {{#str}}aria:courseshortname, core_course{{/str}}
-                                </span>
-                                <div>{{{shortname}}}</div>
-                            {{/showshortname}}
+                            <span class="sr-only">
+                                {{#str}}aria:courseshortname, core_course{{/str}}
+                            </span>
+                            <div>{{{shortname}}}</div>
                         </div>
-                        <a href="{{viewurl}}" class="aalink coursename">
-                            {{> core_course/favouriteicon }}
+                    {{/showshortname}}
+                    <a href="{{viewurl}}" class="aalink coursename">
+                        {{> core_course/favouriteicon }}
+                        <span class="sr-only">
+                            {{#str}}aria:coursename, core_course{{/str}}
+                        </span>
+                        {{{fullname}}}
+                    </a>
+                    {{#showcoursecategory}}
+                        <div class="text-muted muted d-flex flex-wrap">
                             <span class="sr-only">
-                                {{#str}}aria:coursename, core_course{{/str}}
+                                {{#str}}aria:coursecategory, core_course{{/str}}
                             </span>
-                            {{{fullname}}}
-                        </a>
-                        {{^visible}}
-                            <div class="d-flex flex-wrap">
-                                <span class="badge badge-info">{{#str}} hiddenfromstudents {{/str}}</span>
-                            </div>
-                        {{/visible}}
-                    </div>
+                            <span class="categoryname">
+                                {{{coursecategory}}}
+                            </span>
+                        </div>
+                    {{/showcoursecategory}}
+                    {{^visible}}
+                        <div class="d-flex flex-wrap">
+                            <span class="badge badge-info">{{#str}} hiddenfromstudents {{/str}}</span>
+                        </div>
+                    {{/visible}}
+                    {{#hasprogress}}
+                        <div class="text-muted muted d-flex flex-wrap mt-auto">
+                            {{> block_myoverview/progress-bar}}
+                        </div>
+                    {{/hasprogress}}
                 </div>
-                {{#hasprogress}}
-                    <div class="col-md-5 pt-1">
-                        {{> block_myoverview/progress-bar}}
-                    </div>
-                {{/hasprogress}}
-                <div class="col-md-1 p-0 d-flex">
+                <div class="col-md-1 p-0 d-flex menu">
                     {{> block_myoverview/course-action-menu }}
                 </div>
             </div>
diff --git a/blocks/myoverview/templates/view-summary.mustache b/blocks/myoverview/templates/view-summary.mustache
index 33a69ff5cbf..32ce2824256 100644
--- a/blocks/myoverview/templates/view-summary.mustache
+++ b/blocks/myoverview/templates/view-summary.mustache
@@ -38,50 +38,48 @@
 }}
 <div role="list">
 {{#courses}}
-    <div class="course-summaryitem mb-1 p-2" role="listitem"
+    <div class="course-summaryitem list-group-item course-listitem border-left-0 border-right-0 border-top-0 px-2 rounded-0" role="listitem"
         data-region="course-content"
         data-course-id="{{{id}}}">
-        <div class="d-flex">
-            <a href="{{viewurl}}" tabindex="-1">
-                <div class="summaryimage rounded-circle mr-1" style='background-image: url("{{{courseimage}}}");'>
-                    <span class="sr-only">{{#str}}aria:courseimage, core_course{{/str}}</span>
-                </div>
-            </a>
-
-            <div class="align-self-stretch d-flex flex-column w-100">
-                <div class="text-muted muted mb-1 d-flex flex-wrap">
-                    <span class="sr-only">
-                        {{#str}}aria:coursecategory, core_course{{/str}}
-                    </span>
-                    {{$coursecategory}}
-                        {{#showcoursecategory}}
-                            <span class="categoryname">
-                                {{#coursecategory}}
-                                    {{{coursecategory}}}
-                                {{/coursecategory}}
-                            </span>
-                        {{/showcoursecategory}}
-                    {{/coursecategory}}
-                    {{#showshortname}}
+        <div class="row">
+            <div class="col-md-2 d-flex align-items-center mb-sm-3 mb-md-0">
+                <a href="{{viewurl}}" tabindex="-1" class="mw-100 w-100">
+                    <div class="summaryimage card-img dashboard-list-img mw-100" style='background-image: url("{{{courseimage}}}");'>
+                        <span class="sr-only">{{#str}}aria:courseimage, core_course{{/str}}</span>
+                    </div>
+                </a>
+            </div>
+            <div class="col-md-9 d-flex flex-column">
+                {{#showshortname}}
+                    <div class="text-muted muted d-flex flex-wrap">
                         {{#showcoursecategory}}
                             <div class="pl-1 pr-1">|</div>
                         {{/showcoursecategory}}
+                        <span class="sr-only">
+                            {{#str}}aria:courseshortname, core_course{{/str}}
+                        </span>
+                        <div>{{{shortname}}}</div>
+                    </div>
+                {{/showshortname}}
+                <a href="{{viewurl}}" class="aalink coursename">
+                    {{> core_course/favouriteicon }}
                     <span class="sr-only">
-                        {{#str}}aria:courseshortname, core_course{{/str}}
+                        {{#str}}aria:coursename, core_course{{/str}}
                     </span>
-                    <div>{{{shortname}}}</div>
-                    {{/showshortname}}
-                </div>
-                <div class="d-flex mb-1">
-                    <a href="{{viewurl}}" class="aalink coursename">
-                        {{> core_course/favouriteicon }}
-                        <span class="sr-only">
-                            {{#str}}aria:coursename, core_course{{/str}}
+                    {{{fullname}}}
+                </a>
+                {{$coursecategory}}
+                    <span class="sr-only">
+                        {{#str}}aria:coursecategory, core_course{{/str}}
+                    </span>
+                    {{#showcoursecategory}}
+                        <span class="categoryname">
+                            {{#coursecategory}}
+                                {{{coursecategory}}}
+                            {{/coursecategory}}
                         </span>
-                        <h6 class="d-inline h5">{{{fullname}}}</h6>
-                    </a>
-                    {{> block_myoverview/course-action-menu }}
-                </div>
+                    {{/showcoursecategory}}
+                {{/coursecategory}}
                 {{^visible}}
                     <div class="d-flex flex-wrap">
                         <span class="badge badge-info">{{#str}} hiddenfromstudents {{/str}}</span>
@@ -91,11 +89,14 @@
                     <span class="sr-only">{{#str}}aria:coursesummary, block_myoverview{{/str}}</span>
                     {{{summary}}}
                 </div>
-                <div class="ml-auto mt-auto w-50 pt-3">
-                    {{#hasprogress}}
+                {{#hasprogress}}
+                    <div class="text-muted muted d-flex flex-wrap mt-auto">
                         {{> block_myoverview/progress-bar}}
-                    {{/hasprogress}}
-                </div>
+                    </div>
+                {{/hasprogress}}
+            </div>
+            <div class="col-md-1 p-0 d-flex menu">
+                {{> block_myoverview/course-action-menu }}
             </div>
         </div>
     </div>
diff --git a/course/templates/coursecard.mustache b/course/templates/coursecard.mustache
index 5e6c7fbbd3b..d5ea8dc2f67 100644
--- a/course/templates/coursecard.mustache
+++ b/course/templates/coursecard.mustache
@@ -45,33 +45,37 @@
     <div class="card-body pr-1 course-info-container" id="course-info-container-{{id}}-{{uniqid}}">
         <div class="d-flex align-items-start">
             <div class="w-100 text-truncate">
-                <div class="text-muted muted d-flex mb-1 flex-wrap">
-                    {{$coursecategory}}{{/coursecategory}}
-                    {{#showshortname}}
-                    {{$divider}}{{/divider}}
-                    <span class="sr-only">
-                        {{#str}}aria:courseshortname, core_course{{/str}}
-                    </span>
-                    <div>
-                        {{{shortname}}}
+                {{#showshortname}}
+                    <div class="text-muted muted d-flex mb-1 flex-wrap">
+                        <span class="sr-only">
+                            {{#str}}aria:courseshortname, core_course{{/str}}
+                        </span>
+                        <div>
+                            {{{shortname}}}
+                        </div>
+                        {{$divider}}{{/divider}}
                     </div>
-                    {{/showshortname}}
-                </div>
-                <a href="{{viewurl}}" class="aalink coursename mr-2">
+                {{/showshortname}}
+                <a href="{{viewurl}}" class="aalink coursename mr-2 mb-1">
                     {{> core_course/favouriteicon }}
                     <span class="sr-only">
                             {{#str}}aria:coursename, core_course{{/str}}
                         </span>
                     {{$coursename}}{{/coursename}}
                 </a>
+                <div class="text-muted muted d-flex flex-wrap">
+                    {{$coursecategory}}{{/coursecategory}}
+                </div>
                 {{^visible}}
                     <div class="d-flex flex-wrap">
                         <span class="badge badge-info">{{#str}} hiddenfromstudents {{/str}}</span>
                     </div>
                 {{/visible}}
             </div>
-            {{$menu}}{{/menu}}
         </div>
     </div>
-    {{$progress}}{{/progress}}
+    <div class="d-flex align-items-start">
+        {{$progress}}{{/progress}}
+        {{$menu}}{{/menu}}
+    </div>
 </div>
diff --git a/lib/templates/search_input_auto.mustache b/lib/templates/search_input_auto.mustache
index ddd4d332abb..9dad3e20cc2 100644
--- a/lib/templates/search_input_auto.mustache
+++ b/lib/templates/search_input_auto.mustache
@@ -37,7 +37,7 @@
     }
 }}
 <div id="searchform-auto-{{uniqid}}" class="form-inline simplesearchform">
-    <div class="input-group searchbar" role="search">
+    <div class="input-group searchbar w-100" role="search">
         <label for="searchinput">
             <span class="sr-only">{{$label}}{{#str}} search, core {{/str}}{{/label}}</span>
         </label>
diff --git a/theme/boost/scss/moodle/blocks.scss b/theme/boost/scss/moodle/blocks.scss
index 14ea02a7961..cb7f4e9b198 100644
--- a/theme/boost/scss/moodle/blocks.scss
+++ b/theme/boost/scss/moodle/blocks.scss
@@ -129,10 +129,22 @@ $card-gutter : $card-deck-margin * 2;
     .card .coursemenubtn {
         margin-top: -0.5rem;
     }
-    a.coursename,
     span.categoryname,
     .btn-link {
-        color: inherit;
+        color: $gray-900;
+    }
+    .progress-text {
+        color: $gray-600;
+    }
+    .dashboard-card-footer.menu {
+        opacity: 0;
+    }
+    .dashboard-card {
+        @include hover-focus {
+            .dashboard-card-footer.menu {
+                opacity: 1;
+            }
+        }
     }
     .multiline {
         white-space: normal;
@@ -160,6 +172,26 @@ $card-gutter : $card-deck-margin * 2;
     background-position: center;
     background-size: cover;
 }
+.dashboard-list-img {
+    height: 5rem;
+    width: 20rem;
+    background-position: center;
+    background-size: cover;
+    @include media-breakpoint-down(lg) {
+        width: 100%;
+    }
+}
+
+.course-listitem .menu {
+    opacity: 0;
+}
+.course-listitem {
+    @include hover-focus {
+        .menu {
+            opacity: 1;
+        }
+    }
+}
 
 .dashboard-card-deck {
     .dashboard-card {
diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index 9169ad5260a..dcb1a7197a1 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -2910,6 +2910,7 @@ body.dragging {
     .block_myoverview {
         border: 0;
         & > .card-body {
+            padding-top: 0 !important; /* stylelint-disable-line declaration-no-important */
             padding-left: 0 !important; /* stylelint-disable-line declaration-no-important */
             padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
         }
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 4a94ff64e52..ed94e576eb8 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -12210,6 +12210,8 @@ body.dragging .dragging {
 .drawers .block_myoverview {
   border: 0; }
   .drawers .block_myoverview > .card-body {
+    padding-top: 0 !important;
+    /* stylelint-disable-line declaration-no-important */
     padding-left: 0 !important;
     /* stylelint-disable-line declaration-no-important */
     padding-right: 0 !important;
@@ -12989,10 +12991,18 @@ body.dragging .dragging {
 .block .block-cards .card .coursemenubtn {
   margin-top: -0.5rem; }
 
-.block .block-cards a.coursename,
 .block .block-cards span.categoryname,
 .block .block-cards .btn-link {
-  color: inherit; }
+  color: #1d2125; }
+
+.block .block-cards .progress-text {
+  color: #6a737b; }
+
+.block .block-cards .dashboard-card-footer.menu {
+  opacity: 0; }
+
+.block .block-cards .dashboard-card:hover .dashboard-card-footer.menu, .block .block-cards .dashboard-card:focus .dashboard-card-footer.menu {
+  opacity: 1; }
 
 .block .block-cards .multiline {
   white-space: normal; }
@@ -13015,6 +13025,21 @@ body.dragging .dragging {
   background-position: center;
   background-size: cover; }
 
+.dashboard-list-img {
+  height: 5rem;
+  width: 20rem;
+  background-position: center;
+  background-size: cover; }
+  @media (max-width: 1199.98px) {
+    .dashboard-list-img {
+      width: 100%; } }
+
+.course-listitem .menu {
+  opacity: 0; }
+
+.course-listitem:hover .menu, .course-listitem:focus .menu {
+  opacity: 1; }
+
 .dashboard-card-deck .dashboard-card {
   margin-bottom: 0.5rem;
   flex-basis: auto;
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index a859ad64032..365e808fa57 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -12210,6 +12210,8 @@ body.dragging .dragging {
 .drawers .block_myoverview {
   border: 0; }
   .drawers .block_myoverview > .card-body {
+    padding-top: 0 !important;
+    /* stylelint-disable-line declaration-no-important */
     padding-left: 0 !important;
     /* stylelint-disable-line declaration-no-important */
     padding-right: 0 !important;
@@ -12989,10 +12991,18 @@ body.dragging .dragging {
 .block .block-cards .card .coursemenubtn {
   margin-top: -0.5rem; }
 
-.block .block-cards a.coursename,
 .block .block-cards span.categoryname,
 .block .block-cards .btn-link {
-  color: inherit; }
+  color: #1d2125; }
+
+.block .block-cards .progress-text {
+  color: #6a737b; }
+
+.block .block-cards .dashboard-card-footer.menu {
+  opacity: 0; }
+
+.block .block-cards .dashboard-card:hover .dashboard-card-footer.menu, .block .block-cards .dashboard-card:focus .dashboard-card-footer.menu {
+  opacity: 1; }
 
 .block .block-cards .multiline {
   white-space: normal; }
@@ -13015,6 +13025,21 @@ body.dragging .dragging {
   background-position: center;
   background-size: cover; }
 
+.dashboard-list-img {
+  height: 5rem;
+  width: 20rem;
+  background-position: center;
+  background-size: cover; }
+  @media (max-width: 1199.98px) {
+    .dashboard-list-img {
+      width: 100%; } }
+
+.course-listitem .menu {
+  opacity: 0; }
+
+.course-listitem:hover .menu, .course-listitem:focus .menu {
+  opacity: 1; }
+
 .dashboard-card-deck .dashboard-card {
   margin-bottom: 0.5rem;
   flex-basis: auto;
-- 
2.43.0