mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-01-18 05:58:34 +01:00
Code Issues Projects Releases Wiki Activity

MDL-63064 block_starredcourses: horizontal scroll, load all courses

Browse Source
This commit is contained in:
Bas Brands 2018-10-31 16:39:58 +01:00 committed by lameze
parent bdde16014d
commit 0ec602615d
13 changed files with 69 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,7 +41,7 @@
data-course-id="{{id}}"
aria-controls="favorite-icon-{{ id }}"
>
{{#pix}} i/star, core, {{#str}} favourite, block_myoverview {{/str}} {{/pix}}
{{#pix}} i/star, core, {{#str}} favourites, block_myoverview {{/str}} {{/pix}}
{{#str}} addtofavourites, block_myoverview {{/str}}
<div class="sr-only">
{{#str}} aria:addtofavourites, block_myoverview {{/str}} {{{fullname}}}

49
blocks/myoverview/templates/favourite-icon.mustache
View File

@ -1,49 +0,0 @@
{{!
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/favourite-icon
This template renders the favourite icon for a course.
Example context (json):
{
"id": 3,
"isfavourite": true
}
}}
<div id="favorite-icon-{{ id }}"
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, block_myoverview {{/str}} {{/pix}}
<span class="sr-only">{{#str}} aria:favourite, block_myoverview {{/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, block_myoverview {{/str}} {{/pix}}
</span>
</div>
</div>

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

@ -39,15 +39,15 @@
<div class="card dashboard-card" 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, block_myoverview{{/str}}</span>
{{> block_myoverview/favourite-icon }}
<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}}">
<span class="sr-only">{{#str}}aria:coursename, block_myoverview{{/str}}</span>
<span class="sr-only">{{#str}}aria:coursename, core_course{{/str}}</span>
{{#shortentext}}40, {{{fullname}}} {{/shortentext}}
</a>
</div>

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

@ -40,9 +40,9 @@
<div class="row-fluid">
<div class="{{#hasprogress}}col-6 span6{{/hasprogress}}{{^hasprogress}}col-11 span11{{/hasprogress}} p-l-0">
<div class="d-flex align-items-center">
{{> block_myoverview/favourite-icon }}
{{> core_course/favouriteicon }}
<a href="{{viewurl}}">
<span class="sr-only">{{#str}}aria:coursename, block_myoverview{{/str}}</span>
<span class="sr-only">{{#str}}aria:coursename, core_course{{/str}}</span>
{{{fullname}}}
</a>
</div>

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

@ -40,16 +40,16 @@
<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">
{{> block_myoverview/favourite-icon }}
{{> core_course/favouriteicon }}
</div>
<div class="card-img-top summaryimage" style='background-image: url("{{{courseimage}}}");'>
<span class="sr-only">{{#str}}aria:courseimage, block_myoverview{{/str}}</span>
<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, block_myoverview{{/str}}</span>
<span class="sr-only">{{#str}}aria:coursename, core_course{{/str}}</span>
<h4>{{{fullname}}}</h4>
</a>
{{> block_myoverview/course-action-menu }}

2
blocks/starredcourses/amd/build/main.min.js vendored
View File

@ -1 +1 @@
define(["jquery","core/notification","block_starredcourses/repository","core/pubsub","core/templates","core_course/events"],function(a,b,c,d,e,f){var g={STARRED_COURSES_REGION_VIEW:'[data-region="starred-courses-view"]',STARRED_COURSES_REGION:'[data-region="starred-courses-view-content"]'},h=5,i=function(a,b){if(b.length>0)return e.render("block_starredcourses/view-cards",{courses:b});var c=a.find(g.STARRED_COURSES_REGION_VIEW).attr("data-nocoursesimg");return e.render("block_starredcourses/no-courses",{nocoursesimg:c})},j=function(a){var d=a.find(g.STARRED_COURSES_REGION),f={limit:h,offset:0};return c.getStarredCourses(f).then(function(b){return i(a,b)}).then(function(a,b){return e.replaceNodeContents(d,a,b)})["catch"](b.exception)},k=function(a){d.subscribe(f.favourited,function(){j(a)}),d.subscribe(f.unfavorited,function(){j(a)})},l=function(b){b=a(b),k(b),j(b)};return{init:l}});
define(["jquery","core/notification","block_starredcourses/repository","core/pubsub","core/templates","core_course/events"],function(a,b,c,d,e,f){var g={STARRED_COURSES_REGION_VIEW:'[data-region="starred-courses-view"]',STARRED_COURSES_REGION:'[data-region="starred-courses-view-content"]'},h=function(a,b){if(b.length>0)return e.render("block_starredcourses/view-cards",{courses:b});var c=a.find(g.STARRED_COURSES_REGION_VIEW).attr("data-nocoursesimg");return e.render("block_starredcourses/no-courses",{nocoursesimg:c})},i=function(a){var d=a.find(g.STARRED_COURSES_REGION),f={limit:0,offset:0};return c.getStarredCourses(f).then(function(b){return h(a,b)}).then(function(a,b){return e.replaceNodeContents(d,a,b)})["catch"](b.exception)},j=function(a){d.subscribe(f.favourited,function(){i(a)}),d.subscribe(f.unfavorited,function(){i(a)})},k=function(b){b=a(b),j(b),i(b)};return{init:k}});

4
blocks/starredcourses/amd/src/main.js
View File

@ -43,8 +43,6 @@ function(
STARRED_COURSES_REGION: '[data-region="starred-courses-view-content"]'
};
var NUM_COURSES_TOTAL = 5;
/**
* Render the starred courses.
*
@ -76,7 +74,7 @@ function(
var content = root.find(SELECTORS.STARRED_COURSES_REGION);
var args = {
limit: NUM_COURSES_TOTAL,
limit: 0,
offset: 0,
};

37
blocks/starredcourses/classes/external.php
View File

@ -47,8 +47,7 @@ class block_starredcourses_external extends core_course_external {
public static function get_starred_courses_parameters() {
return new external_function_parameters([
'limit' => new external_value(PARAM_INT, 'Limit', VALUE_DEFAULT, 0),
'offset' => new external_value(PARAM_INT, 'Offset', VALUE_DEFAULT, 0),
'userid' => new external_value(PARAM_INT, 'id of user, empty for current user', VALUE_DEFAULT, 0)
'offset' => new external_value(PARAM_INT, 'Offset', VALUE_DEFAULT, 0)
]);
}
@ -63,23 +62,19 @@ class block_starredcourses_external extends core_course_external {
public static function get_starred_courses($limit, $offset) {
global $USER, $PAGE;
$userid = $USER->id;
$params = self::validate_parameters(self::get_starred_courses_parameters(), [
'limit' => $limit,
'offset' => $offset,
'userid' => $userid
'offset' => $offset
]);
$userid = $params['userid'];
$limit = $params['limit'];
$offset = $params['offset'];
$usercontext = context_user::instance($userid);
$usercontext = context_user::instance($USER->id);
self::validate_context($usercontext);
$PAGE->set_context($usercontext);
$output = $PAGE->get_renderer('block_starredcourses');
$renderer = $PAGE->get_renderer('core');
// Get the user favourites service, scoped to a single user (their favourites only).
$userservice = \core_favourites\service_factory::get_service_for_user_context($usercontext);
@ -87,17 +82,21 @@ class block_starredcourses_external extends core_course_external {
// Get the favourites, by type, for the user.
$favourites = $userservice->find_favourites_by_type('core_course', 'courses', $offset, $limit);
$results = [];
foreach ($favourites as $favourite) {
$courseid = $favourite->itemid;
if (!isset($results[$courseid])) {
$exporter = new course_summary_exporter(get_course($courseid),
['context' => \context_course::instance($courseid), 'isfavourite' => true]);
$results[$courseid] = $exporter->export($output);
}
}
// Sort the favourites getting last added first.
usort($favourites, function($a, $b) {
if ($a->timemodified == $b->timemodified) return 0;
return ($a->timemodified > $b->timemodified) ? -1 : 1;
});
return $results;
$formattedcourses = array_map(function($favourite) use ($renderer) {
$course = get_course($favourite->itemid);
$context = \context_course::instance($favourite->itemid);
$exporter = new course_summary_exporter($course, ['context' => $context, 'isfavourite' => true]);
return $exporter->export($renderer);
}, $favourites);
return $formattedcourses;
}
/**

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

@ -28,7 +28,7 @@
}}
<div class="card-deck dashboard-card-deck" role="list">
{{#courses}}
<div class="card dashboard-card" role="listitem">
<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>

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

@ -77,11 +77,12 @@ $blocks-plus-gutter: $blocks-column-width + ( $grid-gutter-width / 2 );
$card-gutter : $card-deck-margin * 2;
.block .empty-placeholder-image-lg {
height: 125px;
}
.block_myoverview,
.block_starredcourses {
.empty-placeholder-image-lg {
height: 125px;
}
.course-info-container {
padding: 0.8rem;
}
@ -111,6 +112,13 @@ $card-gutter : $card-deck-margin * 2;
}
}
.block_starredcourses {
.dashboard-card-deck {
flex-flow: nowrap;
overflow-y: scroll;
}
}
.summaryimage {
height: 7rem;
background-position: center;

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

@ -11134,8 +11134,7 @@ div.editor_atto_toolbar button .icon {
[data-region="blocks-column"] {
width: 100%; } }
.block_myoverview .empty-placeholder-image-lg,
.block_starredcourses .empty-placeholder-image-lg {
.block .empty-placeholder-image-lg {
height: 125px; }
.block_myoverview .course-info-container,
@ -11190,6 +11189,10 @@ div.editor_atto_toolbar button .icon {
#rubric-rubric.gradingform_rubric .block_starredcourses .btn-link.btn-icon.addcriterion:focus {
background-color: #e9ecef; }
.block_starredcourses .dashboard-card-deck {
flex-flow: nowrap;
overflow-y: scroll; }
.summaryimage {
height: 7rem;
background-position: center;

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

@ -340,6 +340,7 @@
}
}
.block_starredcourses,
.block_myoverview {
.empty-placeholder-image-lg {
@ -387,6 +388,13 @@
}
}
.block_starredcourses {
.dashboard-card-deck {
flex-flow: nowrap;
overflow-y: scroll;
}
}
.dashboard-card-deck {
box-sizing: border-box;
*,
@ -419,7 +427,7 @@
@media (min-width: 1200px) {
.dashboard-card {
flex-basis: ~"calc(33% - 0.5rem)";
flex-basis: ~"calc(33.333% - 0.5rem)";
}
}
}

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

@ -16546,13 +16546,16 @@ body {
height: 35px;
width: 35px;
}
.block_starredcourses .empty-placeholder-image-lg,
.block_myoverview .empty-placeholder-image-lg {
height: 125px;
}
.block_starredcourses .course-info-container,
.block_myoverview .course-info-container {
flex: 1 1 auto;
padding: 0.8rem;
}
.block_starredcourses .dashboard-card-footer,
.block_myoverview .dashboard-card-footer {
padding: 0.8rem;
background-color: #f5f5f5;
@ -16564,13 +16567,16 @@ body {
-moz-border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px;
}
.block_starredcourses .progress,
.block_myoverview .progress {
height: 0.5rem;
margin-bottom: 0;
}
.block_starredcourses .list-group,
.block_myoverview .list-group {
margin: 0;
}
.block_starredcourses .course-listitem,
.block_myoverview .course-listitem {
display: block;
padding: 0.75rem 1.25rem;
@ -16581,6 +16587,7 @@ body {
-moz-border-radius: 4px;
border-radius: 4px;
}
.block_starredcourses .course-summaryitem,
.block_myoverview .course-summaryitem {
padding: 0.5rem;
background-color: #fff;
@ -16589,14 +16596,20 @@ body {
-moz-border-radius: 4px;
border-radius: 4px;
}
.block_starredcourses .summary img,
.block_myoverview .summary img {
max-width: 100%;
}
@media (max-width: 576px) {
.block_starredcourses .summaryimage,
.block_myoverview .summaryimage {
max-height: 7rem;
}
}
.block_starredcourses .dashboard-card-deck {
flex-flow: nowrap;
overflow-y: scroll;
}
.dashboard-card-deck {
box-sizing: border-box;
display: flex;
@ -16630,7 +16643,7 @@ body {
}
@media (min-width: 1200px) {
.dashboard-card-deck .dashboard-card {
flex-basis: calc(33% - 0.5rem);
flex-basis: calc(33.333% - 0.5rem);
}
}
@media (min-width: 768px) {