mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-22 17:02:03 +02:00
Code Issues Projects Releases Wiki Activity

MDL-63830 block_myoverview: star icon updates

Browse Source 
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.
This commit is contained in:
Bas Brands 2018-11-05 15:44:14 +01:00
parent aba5b89c7a
commit 78c06a660b
14 changed files with 40 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
blocks/myoverview/templates/view-cards.mustache
View File

@ -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>

4
blocks/myoverview/templates/view-list.mustache
View File

@ -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>

16
blocks/myoverview/templates/view-summary.mustache
View File

@ -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">

3
blocks/myoverview/tests/behat/block_myoverview_favourite.feature
View File

@ -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

2
blocks/recentlyaccessedcourses/templates/view-cards.mustache
View File

@ -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>

4
blocks/starredcourses/templates/view-cards.mustache
View File

@ -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>

29
course/templates/favouriteicon.mustache
View File

@ -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>

1
lang/en/course.php
View File

@ -26,7 +26,6 @@ $string['aria:courseimage'] = 'Course image:';
$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.';

BIN
pix/i/star.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 392 B

After

Width:  |  Height:  |  Size: 390 B

4
pix/i/star.svg
View File

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16pt" height="16pt" viewBox="0 0 16 16" version="1.1" preserveAspectRatio="xMinYMid meet">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16pt" height="16pt" viewBox="0 0 16 16" version="1.1">
<g id="surface1">
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(60%,60%,60%);fill-opacity:1;" d="M 15.429688 5.777344 C 15.429688 5.90625 15.351562 6.050781 15.195312 6.207031 L 11.957031 9.367188 L 12.722656 13.832031 C 12.730469 13.871094 12.730469 13.929688 12.730469 14.007812 C 12.730469 14.132812 12.699219 14.238281 12.636719 14.324219 C 12.574219 14.414062 12.484375 14.457031 12.367188 14.457031 C 12.253906 14.457031 12.132812 14.417969 12.007812 14.347656 L 8 12.242188 L 3.992188 14.347656 C 3.859375 14.417969 3.742188 14.457031 3.632812 14.457031 C 3.507812 14.457031 3.414062 14.414062 3.351562 14.324219 C 3.289062 14.238281 3.257812 14.132812 3.257812 14.007812 C 3.257812 13.972656 3.265625 13.914062 3.277344 13.832031 L 4.042969 9.367188 L 0.792969 6.207031 C 0.644531 6.042969 0.570312 5.902344 0.570312 5.777344 C 0.570312 5.554688 0.738281 5.417969 1.070312 5.367188 L 5.554688 4.714844 L 7.5625 0.652344 C 7.675781 0.40625 7.820312 0.285156 8 0.285156 C 8.179688 0.285156 8.324219 0.40625 8.4375 0.652344 L 10.445312 4.714844 L 14.929688 5.367188 C 15.261719 5.417969 15.429688 5.554688 15.429688 5.777344 Z M 15.429688 5.777344 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,43.921569%,65.882353%);fill-opacity:1;" d="M 15.429688 5.777344 C 15.429688 5.90625 15.351562 6.050781 15.195312 6.207031 L 11.957031 9.367188 L 12.722656 13.832031 C 12.730469 13.871094 12.730469 13.929688 12.730469 14.007812 C 12.730469 14.132812 12.699219 14.238281 12.636719 14.324219 C 12.574219 14.414062 12.484375 14.457031 12.367188 14.457031 C 12.253906 14.457031 12.132812 14.417969 12.007812 14.347656 L 8 12.242188 L 3.992188 14.347656 C 3.859375 14.417969 3.742188 14.457031 3.632812 14.457031 C 3.507812 14.457031 3.414062 14.414062 3.351562 14.324219 C 3.289062 14.238281 3.257812 14.132812 3.257812 14.007812 C 3.257812 13.972656 3.265625 13.914062 3.277344 13.832031 L 4.042969 9.367188 L 0.792969 6.207031 C 0.644531 6.042969 0.570312 5.902344 0.570312 5.777344 C 0.570312 5.554688 0.738281 5.417969 1.070312 5.367188 L 5.554688 4.714844 L 7.5625 0.652344 C 7.675781 0.40625 7.820312 0.285156 8 0.285156 C 8.179688 0.285156 8.324219 0.40625 8.4375 0.652344 L 10.445312 4.714844 L 14.929688 5.367188 C 15.261719 5.417969 15.429688 5.554688 15.429688 5.777344 Z M 15.429688 5.777344 "/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

3
theme/boost/scss/moodle/blocks.scss
View File

@ -97,6 +97,9 @@ $card-gutter : $card-deck-margin * 2;
}
.icon {
margin-right: 0;
&.fa-star {
color: $blue;
}
}
a,
.btn-link {

3
theme/boost/style/moodle.css
View File

@ -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,

3
theme/bootstrapbase/less/moodle/blocks.less
View File

@ -289,6 +289,9 @@
.summary img {
max-width: 100%;
}
img.icon {
padding: 0;
}
@media (max-width: 576px) {
.summaryimage {

4
theme/bootstrapbase/style/moodle.css
View File

@ -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,