mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-01-17 21:49:15 +01:00
Code Issues Projects Releases Wiki Activity

MDL-63988 core_my: add course shortname to dashboard blocks …

Browse Source 
* all dashboard card templates moved to /course/templates/
* added aria labels for course short name
* removed ":" from other course aria strings to improve screenreader output
This commit is contained in:
Bas Brands 2018-11-26 16:10:09 +01:00
parent df6d0b6d45
commit f87181fdaf
15 changed files with 163 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
blocks/myoverview/templates/course-action-menu.mustache
View File

@ -39,7 +39,7 @@
<a class="dropdown-item {{#isfavourite}}hidden{{/isfavourite}}" href="#"
data-action="add-favourite"
data-course-id="{{id}}"
aria-controls="favorite-icon-{{ id }}"
aria-controls="favorite-icon-{{ id }}-{{ uniqid }}"
>
<span class="text-primary">{{#pix}} i/star, core, {{#str}} favourites, block_myoverview {{/str}} {{/pix}}</span>
{{#str}} addtofavourites, block_myoverview {{/str}}
@ -50,7 +50,7 @@
<a class="dropdown-item {{^isfavourite}}hidden{{/isfavourite}}" href="#"
data-action="remove-favourite"
data-course-id="{{id}}"
aria-controls="favorite-icon-{{ id }}"
aria-controls="favorite-icon-{{ id }}-{{ uniqid }}"
>
{{#str}} removefromfavourites, block_myoverview {{/str}}
<div class="sr-only">
@ -60,7 +60,7 @@
<a class="dropdown-item {{^hidden}}hidden{{/hidden}}" href="#"
data-action="show-course"
data-course-id="{{id}}"
aria-controls="favorite-icon-{{ id }}"
aria-controls="favorite-icon-{{ id }}-{{ uniqid }}"
>
{{#pix}} i/show, core, {{#str}} hidden, block_myoverview {{/str}} {{/pix}}
{{#str}} show, block_myoverview {{/str}}
@ -71,7 +71,7 @@
<a class="dropdown-item {{#hidden}}hidden{{/hidden}}" href="#"
data-action="hide-course"
data-course-id="{{id}}"
aria-controls="favorite-icon-{{ id }}"
aria-controls="favorite-icon-{{ id }}-{{ uniqid }}"
>
{{#pix}} i/hide, core, {{#str}} hidden, block_myoverview {{/str}} {{/pix}}
{{#str}} hidecourse, block_myoverview {{/str}}

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

@ -34,33 +34,20 @@
}
}}
<div class="card-deck dashboard-card-deck" role="list">
{{#courses}}
<div class="card dashboard-card" role="listitem"
data-region="course-content"
data-course-id="{{{id}}}">
<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>
</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 mb-0 mr-2">
{{> core_course/favouriteicon }}
<a href="{{viewurl}}" class="coursename">
<span class="sr-only">{{#str}}aria:coursename, core_course{{/str}}</span>
{{#shortentext}}30, {{{fullname}}} {{/shortentext}}
</a>
</div>
{{< core_course/coursecards }}
{{$menu}}
{{> block_myoverview/course-action-menu }}
</div>
</div>
{{/menu}}
{{$progress}}
{{#hasprogress}}
<div class="card-footer dashboard-card-footer border-0 bg-white">
{{> block_myoverview/progress-bar}}
</div>
{{/hasprogress}}
</div>
{{/courses}}
</div>
{{/progress}}
{{$coursename}}
<span class="multiline">
{{#shortentext}}50, {{{fullname}}} {{/shortentext}}
</span>
{{/coursename}}
{{/ core_course/coursecards }}

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

@ -41,14 +41,20 @@
data-course-id="{{{id}}}">
<div class="row-fluid">
<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}}" class="coursename">
<span class="sr-only">{{#str}}aria:coursename, core_course{{/str}}</span>
<span class="sr-only">
{{#str}}aria:courseshortname, core_course{{/str}}
</span>
<div class="text-muted muted">
{{{shortname}}}
</div>
{{> core_course/favouriteicon }}
<span class="sr-only">
{{#str}}aria:coursename, core_course{{/str}}
</span>
{{{fullname}}}
</a>
</div>
</div>
{{#hasprogress}}
<div class="col-md-5 span5 pt-1">
{{> block_myoverview/progress-bar}}

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

@ -48,13 +48,19 @@
<div class="align-self-stretch d-flex flex-column w-100">
<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>
{{{fullname}}}
</a>
<span class="sr-only">
{{#str}}aria:courseshortname, core_course{{/str}}
</span>
<div class="h5 mb-0 text-muted muted">
{{{shortname}}}
</div>
{{> core_course/favouriteicon }}
<span class="sr-only">
{{#str}}aria:coursename, core_course{{/str}}
</span>
<h4 class="d-inline mb-2">{{{fullname}}}</h4>
</a>
{{> block_myoverview/course-action-menu }}
</div>
<div class="summary">

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

@ -33,25 +33,8 @@
}
}}
<div class="card-deck dashboard-card-deck one-row" role="list">
{{#courses}}
<div class="card dashboard-card m-b-1" role="listitem">
<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>
</div>
</a>
<div class="card-body pr-1 course-info-container" id="course-info-container-{{id}}-{{uniqid}}">
<div class="d-flex align-items-start">
<div class="card-title mb-0 mr-2">
{{> core_course/favouriteicon }}
<a href="{{viewurl}}" class="coursename">
<span class="sr-only">{{#str}}aria:coursename, core_course{{/str}}</span>
{{#shortentext}}30, {{{fullname}}} {{/shortentext}}
</a>
</div>
</div>
</div>
</div>
{{/courses}}
</div>
{{< core_course/coursecards }}
{{$classes}}one-row{{/classes}}
{{$coursename}} {{fullname}} {{/coursename}}
{{/ core_course/coursecards }}

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

@ -26,25 +26,8 @@
]
}
}}
<div class="card-deck dashboard-card-deck one-row" role="list">
{{#courses}}
<div class="card dashboard-card m-b-1" role="listitem">
<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>
</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 mb-0">
{{>core_course/favouriteicon }}
<a href="{{viewurl}}" class="coursename">
<span class="sr-only">{{#str}}aria:coursename, core_course{{/str}}</span>
{{#shortentext}}30, {{{fullname}}} {{/shortentext}}
</a>
</div>
</div>
</div>
</div>
{{/courses}}
</div>
{{< core_course/coursecards }}
{{$classes}}one-row{{/classes}}
{{$coursename}} {{fullname}} {{/coursename}}
{{/ core_course/coursecards }}

8
course/classes/external/course_summary_exporter.php vendored
View File

@ -54,7 +54,7 @@ class course_summary_exporter extends \core\external\exporter {
}
protected function get_other_values(renderer_base $output) {
global $CFG;
$courseimage = self::get_course_image($this->data);
if (!$courseimage) {
$courseimage = self::get_course_pattern($this->data);
@ -72,7 +72,8 @@ class course_summary_exporter extends \core\external\exporter {
'progress' => $progress,
'hasprogress' => $hasprogress,
'isfavourite' => $this->related['isfavourite'],
'hidden' => boolval(get_user_preferences('block_myoverview_hidden_course_' . $this->data->id, 0))
'hidden' => boolval(get_user_preferences('block_myoverview_hidden_course_' . $this->data->id, 0)),
'showshortname' => $CFG->courselistshortnames ? true : false
);
}
@ -145,6 +146,9 @@ class course_summary_exporter extends \core\external\exporter {
'timeaccess' => array(
'type' => PARAM_INT,
'optional' => true
),
'showshortname' => array(
'type' => PARAM_BOOL
)
);
}

70
course/templates/coursecards.mustache Normal file
View File

@ -0,0 +1,70 @@
{{!
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/view-cards
This template renders the cards view for the myoverview block.
Example context (json):
{
"courses": [
{
"name": "Assignment due 1",
"viewurl": "https://moodlesite/course/view.php?id=2",
"courseimage": "https://moodlesite/pluginfile/123/course/overviewfiles/123.jpg",
"fullname": "course 3",
"hasprogress": true,
"progress": 10
}
]
}
}}
<div class="card-deck dashboard-card-deck {{$classes}}{{/classes}}" role="list">
{{#courses}}
<div class="card dashboard-card" role="listitem"
data-region="course-content"
data-course-id="{{{id}}}">
<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>
</div>
</a>
<div class="card-body pr-1 course-info-container" id="course-info-container-{{id}}-{{uniqid}}">
<div class="d-flex align-items-start">
<a href="{{viewurl}}" class="coursename mr-2 text-truncate">
<span class="sr-only">
{{#str}}aria:courseshortname, core_course{{/str}}
</span>
{{#showshortname}}
<div class="text-muted muted w-100 mb-1 text-truncate">
{{{shortname}}}
</div>
{{/showshortname}}
{{> core_course/favouriteicon }}
<span class="sr-only">
{{#str}}aria:coursename, core_course{{/str}}
</span>
{{$coursename}}{{/coursename}}
</a>
{{$menu}}{{/menu}}
</div>
</div>
{{$progress}}{{/progress}}
</div>
{{/courses}}
</div>

2
course/templates/favouriteicon.mustache
View File

@ -25,7 +25,7 @@
"isfavourite": true
}
}}
<span id="favorite-icon-{{ id }}-{{uniqid}}"
<span id="favorite-icon-{{ id }}-{{ uniqid }}"
data-region="favourite-icon"
data-course-id="{{id}}"
>

5
lang/en/course.php
View File

@ -22,8 +22,9 @@
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
$string['aria:courseimage'] = 'Course image:';
$string['aria:coursename'] = 'Course name:';
$string['aria:courseimage'] = 'Course image';
$string['aria:courseshortname'] = 'Course short name';
$string['aria:coursename'] = 'Course name';
$string['aria:favourite'] = 'Course is starred';
$string['favourite'] = 'Starred course';
$string['privacy:perpage'] = 'The number of courses to show per page.';

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

@ -102,6 +102,9 @@ $card-gutter : $card-deck-margin * 2;
.btn-link {
color: inherit;
}
.multiline {
white-space: normal;
}
.btn.btn-link.btn-icon {
height: 36px;
width: 36px;

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

@ -11240,6 +11240,9 @@ div.editor_atto_toolbar button .icon {
.block .block-cards .btn-link {
color: inherit; }
.block .block-cards .multiline {
white-space: normal; }
.block .block-cards .btn.btn-link.btn-icon, .block .block-cards #page-grade-grading-manage .actions .btn-link.btn-icon.action, #page-grade-grading-manage .actions .block .block-cards .btn-link.btn-icon.action, .block .block-cards #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel input.btn-link.btn-icon, #rubric-rubric.gradingform_rubric #rubric-criteria .criterion .addlevel .block .block-cards input.btn-link.btn-icon, .block .block-cards #rubric-rubric.gradingform_rubric .btn-link.btn-icon.addcriterion, #rubric-rubric.gradingform_rubric .block .block-cards .btn-link.btn-icon.addcriterion {
height: 36px;
width: 36px;

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

@ -287,6 +287,9 @@
border: 1px solid @tableBorder;
.border-radius(@baseBorderRadius);
}
.multiline {
white-space: normal;
}
.summary img {
max-width: 100%;
}

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

@ -16376,6 +16376,9 @@ body {
-moz-border-radius: 4px;
border-radius: 4px;
}
.block .block-cards .multiline {
white-space: normal;
}
.block .block-cards .summary img {
max-width: 100%;
}

22
theme/bootstrapbase/templates/block_myoverview/course-action-menu.mustache
View File

@ -35,24 +35,38 @@
{{#pix}} i/moremenu, core {{/pix}}
</button>
<ul class="dropdown-menu pull-right">
<li class="{{#isfavourite}}hidden{{/isfavourite}}" data-action="add-favourite" data-course-id="{{id}}">
<li class="{{#isfavourite}}hidden{{/isfavourite}}"
data-action="add-favourite"
data-course-id="{{id}}"
aria-controls="favorite-icon-{{ id }}-{{ uniqid }}"
>
<a class="dropdown-item p-x-1" href="#">
{{#pix}} i/star, core, {{#str}} starred, block_myoverview {{/str}} {{/pix}}
{{#str}} addtofavourites, block_myoverview {{/str}}
</a>
</li>
<li class="{{^isfavourite}}hidden{{/isfavourite}}" data-action="remove-favourite" data-course-id="{{id}}">
<li class="{{^isfavourite}}hidden{{/isfavourite}}"
data-action="remove-favourite"
data-course-id="{{id}}"
aria-controls="favorite-icon-{{ id }}-{{ uniqid }}"
>
<a class="dropdown-item p-x-1" href="#">
{{#str}} removefromfavourites, block_myoverview {{/str}}
</a>
</li>
<li class="{{^hidden}}hidden{{/hidden}}" data-action="show-course" data-course-id="{{id}}">
<li class="{{^hidden}}hidden{{/hidden}}"
data-action="show-course"
data-course-id="{{id}}"
aria-controls="favorite-icon-{{ id }}-{{ uniqid }}">
<a class="dropdown-item p-x-1" href="#">
{{#pix}} i/show, core, {{#str}} hidden, block_myoverview {{/str}} {{/pix}}
{{#str}} show, block_myoverview {{/str}}
</a>
</li>
<li class="{{#hidden}}hidden{{/hidden}}" data-action="hide-course" data-course-id="{{id}}">
<li class="{{#hidden}}hidden{{/hidden}}"
data-action="hide-course"
data-course-id="{{id}}"
aria-controls="favorite-icon-{{ id }}-{{ uniqid }}">
<a class="dropdown-item p-x-1" href="#">
{{#pix}} i/hide, core, {{#str}} hidden, block_myoverview {{/str}} {{/pix}}
{{#str}} hidecourse, block_myoverview {{/str}}