Merge branch 'MDL-72089' of https://github.com/Chocolate-lightning/mo…

…odle
NoelDeMartin · Jan 26, 2022 · f067a42 · f067a42
2 parents 3916f80 + c530e4c
commit f067a42
Show file tree

Hide file tree

Showing 18 changed files with 258 additions and 157 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>