MDL-72277 block_timeline: UI improvements

nilo72 · Oct 7, 2021 · 43e5cc1 · 43e5cc1
1 parent 70073fd
commit 43e5cc1
Show file tree

Hide file tree

Showing 11 changed files with 55 additions and 32 deletions.
diff --git a/blocks/timeline/amd/build/event_list.min.js b/blocks/timeline/amd/build/event_list.min.js
diff --git a/blocks/timeline/amd/build/event_list.min.js.map b/blocks/timeline/amd/build/event_list.min.js.map
diff --git a/blocks/timeline/amd/build/view_courses.min.js b/blocks/timeline/amd/build/view_courses.min.js
diff --git a/blocks/timeline/amd/build/view_courses.min.js.map b/blocks/timeline/amd/build/view_courses.min.js.map
diff --git a/blocks/timeline/amd/src/event_list.js b/blocks/timeline/amd/src/event_list.js
@@ -42,6 +42,7 @@ function(
 ) {
 
     var SECONDS_IN_DAY = 60 * 60 * 24;
+    var courseview = false;
 
     var SELECTORS = {
         EMPTY_MESSAGE: '[data-region="empty-message"]',
@@ -127,6 +128,7 @@ function(
     var buildTemplateContext = function(calendarEvents, midnight) {
         var eventsByDay = {};
         var templateContext = {
+            courseview,
             eventsbyday: []
         };
 
@@ -405,9 +407,11 @@ function(
      * @param {string} paginationAriaLabel String to set as the aria label for the pagination bar.
      * @param {object} additionalConfig Additional config options to pass to pagedContentFactory
      */
-    var init = function(root, pageLimit, preloadedPages, paginationAriaLabel, additionalConfig) {
+    var init = function(root, pageLimit, preloadedPages, paginationAriaLabel, additionalConfig = {}) {
         root = $(root);
 
+        courseview = !!additionalConfig.courseview;
+
         // Create a promise that will be resolved once the first set of page
         // data has been loaded. This ensures that the loading placeholder isn't
         // hidden until we have all of the data back to prevent the page elements

diff --git a/blocks/timeline/amd/src/view_courses.js b/blocks/timeline/amd/src/view_courses.js
@@ -495,16 +495,19 @@ function(
 
                     pageDeferred.resolve({events: events});
 
+                    var additionalConfig = {courseview: true};
                     // Re-initialise the events list with the preloaded events we just got from
                     // the server.
                     Str.get_string('ariaeventlistpaginationnavcourses', 'block_timeline', courseName)
                         .then(function(string) {
-                            EventList.init(eventListContainer, COURSE_EVENT_LIMIT, {'1': pageDeferred.promise()}, string);
+                            EventList.init(eventListContainer, COURSE_EVENT_LIMIT, {'1': pageDeferred.promise()},
+                                string, additionalConfig);
                             return string;
                         })
                         .catch(function() {
                             // Ignore a failure to load the string. Just render with the default string.
-                            EventList.init(eventListContainer, COURSE_EVENT_LIMIT, {'1': pageDeferred.promise()});
+                            EventList.init(eventListContainer, COURSE_EVENT_LIMIT, {'1': pageDeferred.promise()},
+                                undefined, additionalConfig);
                         });
                 });
 

diff --git a/blocks/timeline/styles.css b/blocks/timeline/styles.css
@@ -0,0 +1,9 @@
+#block-region-side-pre .block_timeline h6.event-action {
+    flex-basis: 100%;
+}
+#block-region-side-pre .block_timeline .event-name-container {
+    flex-basis: 50%;
+}
+#block-region-side-pre .block_timeline h6.event-action a.btn {
+    width: auto;
+}
diff --git a/blocks/timeline/templates/course-item.mustache b/blocks/timeline/templates/course-item.mustache
@@ -28,7 +28,7 @@
 }}
 <li class="list-group-item mt-3 p-0 border-0">
     <div data-region="course-events-container" id="course-events-container-{{id}}" data-course-id="{{id}}">
-        <h4 class="h5"><a href="{{viewurl}}" data-region="course-name">{{{fullnamedisplay}}}</a></h4>
+        <h4 class="h5 font-weight-bold">{{{fullnamedisplay}}}</h4>
         {{< block_timeline/event-list }}
             {{$courseid}}{{id}}{{/courseid}}
         {{/ block_timeline/event-list }}

diff --git a/blocks/timeline/templates/event-list-content.mustache b/blocks/timeline/templates/event-list-content.mustache
@@ -63,9 +63,12 @@
         ]
     }
 }}
-<div class="border-bottom pb-2">
+<div class="pb-2">
     {{#eventsbyday}}
-        <h5 class="h6 mt-3 mb-0 {{#past}}text-danger{{/past}}">{{#userdate}} {{dayTimestamp}}, {{#str}} strftimedaydate, core_langconfig {{/str}}  {{/userdate}}</h5>
+        <div class="mt-3">
+            <h5 class="h6 d-inline {{^courseview}}font-weight-bold{{/courseview}}">{{#userdate}} {{dayTimestamp}}, {{#str}} strftimedaydate, core_langconfig {{/str}}  {{/userdate}}</h5>
+            {{#past}}<span class="badge badge-pill badge-danger">{{#str}} overdue, block_timeline {{/str}}</span>{{/past}}
+        </div>
         {{> block_timeline/event-list-items }}
     {{/eventsbyday}}
-</div>
+</div>