MDL-63064 block_starredcourses: horizontal scroll, load all courses

blocks/myoverview/templates/course-action-menu.mustache

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

blocks/myoverview/templates/view-cards.mustache

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

blocks/myoverview/templates/view-list.mustache

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

blocks/myoverview/templates/view-summary.mustache

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

blocks/starredcourses/amd/src/main.js

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

blocks/starredcourses/classes/external.php

@@ -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,41 +62,41 @@ public static function get_starred_courses_parameters() {
     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);
 
         // 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);
-            }
-        }
-
-        return $results;
+        // 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;
+        });
+
+        $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;
     }
 
     /**

blocks/starredcourses/templates/view-cards.mustache

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

theme/boost/scss/moodle/blocks.scss

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

theme/boost/style/moodle.css

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

theme/bootstrapbase/less/moodle/blocks.less

@@ -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)";
         }
     }
 }

theme/bootstrapbase/style/moodle.css

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