MDL-63830 block_myoverview: star icon updates

Change the star icon from being in a button and allow it to be inline using spans instead of divs. Add the option to passes css classed to the template.
moodle · Nov 7, 2018 · 78c06a6 · 78c06a6
1 parent aba5b89
commit 78c06a6
Show file tree

Hide file tree

Showing 14 changed files with 40 additions and 40 deletions.
diff --git a/blocks/myoverview/templates/view-cards.mustache b/blocks/myoverview/templates/view-cards.mustache
@@ -42,13 +42,13 @@
         <a href="{{viewurl}}" tabindex="-1">
             <div class="card-img dashboard-card-img" style='background-image: url("{{{courseimage}}}");'>
                 <span class="sr-only">{{#str}}aria:courseimage, core_course{{/str}}</span>
-                {{> core_course/favouriteicon }}
             </div>
         </a>
         <div class="card-body pr-1 course-info-container" id="course-info-container-{{id}}">
             <div class="d-flex align-items-start">
                 <div class="card-title mr-2">
-                    <a href="{{viewurl}}">
+                    {{> core_course/favouriteicon }}
+                    <a href="{{viewurl}}" class="coursename">
                         <span class="sr-only">{{#str}}aria:coursename, core_course{{/str}}</span>
                         {{#shortentext}}40, {{{fullname}}} {{/shortentext}}
                     </a>

diff --git a/blocks/myoverview/templates/view-list.mustache b/blocks/myoverview/templates/view-list.mustache
@@ -40,8 +40,8 @@
         data-region="course-content"
         data-course-id="{{{id}}}">
         <div class="row-fluid">
-            <div class="{{#hasprogress}}col-md-6 span6{{/hasprogress}}{{^hasprogress}}col-md-11 span11{{/hasprogress}} p-l-0">
-                <div class="d-flex align-items-center">
+            <div class="{{#hasprogress}}col-md-6 span6{{/hasprogress}}{{^hasprogress}}col-md-11 span11{{/hasprogress}} d-flex align-items-center">
+                <div class="d-block">
                     {{> core_course/favouriteicon }}
                     <a href="{{viewurl}}">
                         <span class="sr-only">{{#str}}aria:coursename, core_course{{/str}}</span>

diff --git a/blocks/myoverview/templates/view-summary.mustache b/blocks/myoverview/templates/view-summary.mustache
@@ -41,19 +41,19 @@
         data-course-id="{{{id}}}">
         <div class="row-fluid d-flex">
             <a href="{{viewurl}}" class="col-sm-4 col-xl-3 span4 position-relative" tabindex="-1">
-                <div class="position-absolute">
-                    {{> core_course/favouriteicon }}
-                </div>
                 <div class="card-img-top summaryimage" style='background-image: url("{{{courseimage}}}");'>
                     <span class="sr-only">{{#str}}aria:courseimage, core_course{{/str}}</span>
                 </div>
             </a>
             <div class="col-sm-8 col-xl-9 span8 align-self-stretch d-flex flex-column">
-                <div class="d-flex">
-                    <a href="{{viewurl}}">
-                        <span class="sr-only">{{#str}}aria:coursename, core_course{{/str}}</span>
-                        <h4>{{{fullname}}}</h4>
-                    </a>
+                <div class="d-flex mb-1">
+                    <div class="d-block">
+                        {{> core_course/favouriteicon }}
+                        <a href="{{viewurl}}" class="coursename">
+                            <span class="sr-only">{{#str}}aria:coursename, core_course{{/str}}</span>
+                            <h4 class="d-inline">{{{fullname}}}</h4>
+                        </a>
+                    </div>
                     {{> block_myoverview/course-action-menu }}
                 </div>
                 <div class="summary">

diff --git a/blocks/myoverview/tests/behat/block_myoverview_favourite.feature b/blocks/myoverview/tests/behat/block_myoverview_favourite.feature
@@ -30,7 +30,6 @@ Feature: The my overview block allows users to favourite their courses
     And I reload the page
     Then "//div[@class='card dashboard-card' and contains(.,'Course 2')]//span[@data-region='is-favourite' and @aria-hidden='false']" "xpath_element" should exist
     And "//div[@class='card dashboard-card' and contains(.,'Course 2')]//span[@data-region='is-favourite' and @aria-hidden='true']" "xpath_element" should not exist
-    And "//div[@class='card dashboard-card' and contains(.,'Course 2')]//span[@data-region='not-favourite' and @aria-hidden='true']" "xpath_element" should exist
     And "//div[@class='card dashboard-card' and contains(.,'Course 1')]//span[@data-region='is-favourite' and @aria-hidden='true']" "xpath_element" should exist
     And "//div[@class='card dashboard-card' and contains(.,'Course 3')]//span[@data-region='is-favourite' and @aria-hidden='true']" "xpath_element" should exist
     And I log out
@@ -45,7 +44,6 @@ Feature: The my overview block allows users to favourite their courses
     And I reload the page
     Then "//li[contains(concat(' ', normalize-space(@class), ' '), 'list-group-item') and contains(.,'Course 5')]//span[@data-region='is-favourite' and @aria-hidden='false']" "xpath_element" should exist
     And "//li[contains(concat(' ', normalize-space(@class), ' '), 'list-group-item') and contains(.,'Course 5')]//span[@data-region='is-favourite' and @aria-hidden='true']" "xpath_element" should not exist
-    And "//li[contains(concat(' ', normalize-space(@class), ' '), 'list-group-item') and contains(.,'Course 5')]//span[@data-region='not-favourite' and @aria-hidden='true']" "xpath_element" should exist
     And "//li[contains(concat(' ', normalize-space(@class), ' '), 'list-group-item') and contains(.,'Course 1')]//span[@data-region='is-favourite' and @aria-hidden='true']" "xpath_element" should exist
     And "//li[contains(concat(' ', normalize-space(@class), ' '), 'list-group-item') and contains(.,'Course 3')]//span[@data-region='is-favourite' and @aria-hidden='true']" "xpath_element" should exist
     And I log out
@@ -60,7 +58,6 @@ Feature: The my overview block allows users to favourite their courses
     And I reload the page
     Then "//div[contains(concat(' ', normalize-space(@class), ' '), 'course-summaryitem') and contains(.,'Course 5')]//span[@data-region='is-favourite' and @aria-hidden='false']" "xpath_element" should exist
     And "//div[contains(concat(' ', normalize-space(@class), ' '), 'course-summaryitem') and contains(.,'Course 5')]//span[@data-region='is-favourite' and @aria-hidden='true']" "xpath_element" should not exist
-    And "//div[contains(concat(' ', normalize-space(@class), ' '), 'course-summaryitem') and contains(.,'Course 5')]//span[@data-region='not-favourite' and @aria-hidden='true']" "xpath_element" should exist
     And "//div[contains(concat(' ', normalize-space(@class), ' '), 'course-summaryitem') and contains(.,'Course 1')]//span[@data-region='is-favourite' and @aria-hidden='true']" "xpath_element" should exist
     And "//div[contains(concat(' ', normalize-space(@class), ' '), 'course-summaryitem') and contains(.,'Course 3')]//span[@data-region='is-favourite' and @aria-hidden='true']" "xpath_element" should exist
     And I log out
diff --git a/blocks/recentlyaccessedcourses/templates/view-cards.mustache b/blocks/recentlyaccessedcourses/templates/view-cards.mustache
@@ -39,11 +39,11 @@
             <a href="{{viewurl}}" title="{{fullname}}">
                 <div class="card-img-top dashboard-card-img" style='background-image: url("{{{courseimage}}}");'>
                     <span class="sr-only">{{#str}}aria:courseimage, core_course{{/str}}</span>
-                    {{>core_course/favouriteicon }}
                 </div>
                 <div class="card-body pr-1 course-info-container">
                     <div class="d-flex">
                         <div class="card-title d-inline-block text-truncate">
+                            {{> core_course/favouriteicon }}
                             {{{fullname}}}
                         </div>
                     </div>

diff --git a/blocks/starredcourses/templates/view-cards.mustache b/blocks/starredcourses/templates/view-cards.mustache
@@ -32,13 +32,13 @@
         <a href="{{viewurl}}" tabindex="-1">
             <div class="card-img dashboard-card-img" style='background-image: url("{{{courseimage}}}");'>
                 <span class="sr-only">{{#str}}aria:courseimage, core_course{{/str}}</span>
-                {{>core_course/favouriteicon }}
             </div>
         </a>
         <div class="card-body pr-1 course-info-container" id="course-info-container-{{id}}">
             <div class="d-flex align-items-start">
                 <div class="card-title mr-2">
-                    <a href="{{viewurl}}">
+                    {{>core_course/favouriteicon }}
+                    <a href="{{viewurl}}" class="coursename">
                         <span class="sr-only">{{#str}}aria:coursename, core_course{{/str}}</span>
                         {{#shortentext}}40, {{{fullname}}} {{/shortentext}}
                     </a>

diff --git a/course/templates/favouriteicon.mustache b/course/templates/favouriteicon.mustache
@@ -25,25 +25,16 @@
         "isfavourite": true
     }
 }}
-<div id="favorite-icon-{{ id }}"
+<span id="favorite-icon-{{ id }}-{{uniqid}}"
     data-region="favourite-icon"
     data-course-id="{{id}}"
     >
-    <div class="btn btn-link favouritebtn p-2">
-        <span
-            {{^isfavourite}}class="hidden"{{/isfavourite}}
-            data-region="is-favourite"
-            aria-hidden="{{^isfavourite}}true{{/isfavourite}}{{#isfavourite}}false{{/isfavourite}}"
-            >
-            {{#pix}} i/star, core, {{#str}} favourite, core_course {{/str}} {{/pix}}
-            <span class="sr-only">{{#str}} aria:favourite, core_course {{/str}}</span>
-        </span>
-        <span
-            {{#isfavourite}}class="hidden"{{/isfavourite}}
-            data-region="not-favourite"
-            aria-hidden="{{^isfavourite}}false{{/isfavourite}}{{#isfavourite}}true{{/isfavourite}}"
-            >
-            {{#pix}} i/empty, core, {{#str}} notfavourite, core_course {{/str}} {{/pix}}
-        </span>
-    </div>
-</div>
+    <span
+        class="{{^isfavourite}}hidden{{/isfavourite}}"
+        data-region="is-favourite"
+        aria-hidden="{{^isfavourite}}true{{/isfavourite}}{{#isfavourite}}false{{/isfavourite}}"
+        >
+        {{#pix}} i/star, core, {{#str}} favourite, core_course {{/str}} {{/pix}}
+        <span class="sr-only">{{#str}} aria:favourite, core_course {{/str}}</span>
+    </span>
+</span>
diff --git a/lang/en/course.php b/lang/en/course.php
@@ -26,7 +26,6 @@
 $string['aria:coursename'] = 'Course name:';
 $string['aria:favourite'] = 'Course is starred';
 $string['favourite'] = 'Starred course';
-$string['notfavourite'] = 'Not starred';
 $string['privacy:perpage'] = 'The number of courses to show per page.';
 $string['privacy:completionpath'] = 'Course completion';
 $string['privacy:metadata:completionsummary'] = 'The course contains completion information about the user.';
diff --git a/pix/i/star.png b/pix/i/star.png
diff --git a/pix/i/star.svg b/pix/i/star.svg
diff --git a/theme/boost/scss/moodle/blocks.scss b/theme/boost/scss/moodle/blocks.scss
@@ -97,6 +97,9 @@ $card-gutter : $card-deck-margin * 2;
     }
     .icon {
         margin-right: 0;
+        &.fa-star {
+            color: $blue;
+        }
     }
     a,
     .btn-link {

diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
@@ -11164,6 +11164,9 @@ div.editor_atto_toolbar button .icon {
 .block_recentlyaccesseditems .icon,
 .block_recentlyaccessedcourses .icon {
   margin-right: 0; }
+  .block_myoverview .icon.fa-star,
+  .block_starredcourses .icon.fa-star {
+    color: #1177d1; }
 
 .block_myoverview a,
 .block_myoverview .btn-link,

diff --git a/theme/bootstrapbase/less/moodle/blocks.less b/theme/bootstrapbase/less/moodle/blocks.less
@@ -289,6 +289,9 @@
     .summary img {
         max-width: 100%;
     }
+    img.icon {
+        padding: 0;
+    }
 
     @media (max-width: 576px) {
         .summaryimage {

diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
@@ -16249,6 +16249,10 @@ body {
 .block_myoverview .summary img {
   max-width: 100%;
 }
+.block_starredcourses img.icon,
+.block_myoverview img.icon {
+  padding: 0;
+}
 @media (max-width: 576px) {
   .block_starredcourses .summaryimage,
   .block_recentlyaccesseditems .summaryimage,