MDL-72790 block_timeline: Improve padding and background in Classic

This ensures in the Classic theme that some padding is appled to both
sides of each item, so titles and action buttons are not flush against
the margin. Dropdowns/inputs in the block are also aligned to this
content, so everything aligns in both Boost and Classic.
This commit also groups related elements with a solid background colour
(eg within the same course in courses view), rather than having
individual row items broken up, to improve readability (and look nicer).

blocks/timeline/amd/src/event_list.js

@@ -268,7 +268,7 @@ function(
                     loadingPlaceholder.addClass('hidden');
 
                     if (!data.loadedAll) {
-                        Templates.render(TEMPLATES.MORE_ACTIVITIES_BUTTON, {}).then(function(html) {
+                        Templates.render(TEMPLATES.MORE_ACTIVITIES_BUTTON, {courseview}).then(function(html) {
                             eventListContent.append(html);
                             setLastTimestamp(root, data.lastTimeStamp);
                             // Init the event handler.

blocks/timeline/amd/src/view_courses.js

@@ -342,6 +342,7 @@ function(
             daysoffset: daysOffset,
             dayslimit: daysLimit,
             nodayslimit: daysLimit == undefined,
+            courseview: true,
         }).then(function(html) {
             hideLoadingPlaceholder(root);
 

blocks/timeline/templates/course-item-loading-placeholder.mustache

@@ -22,8 +22,8 @@
     Example context (json):
     {}
 }}
-<li class="list-group-item mt-3 p-0 border-0">
-    <div class="w-50 bg-pulse-grey mb-2" style="height: 20px"></div>
+<li class="list-group-item mt-3 p-0 px-2 border-0">
+    <div class="w-50 bg-pulse-grey mt-1 mb-2" style="height: 20px"></div>
     <div>
         <ul class="pl-0 list-group list-group-flush">
             {{> block_timeline/placeholder-event-list-item }}
@@ -32,8 +32,7 @@
             {{> block_timeline/placeholder-event-list-item }}
             {{> block_timeline/placeholder-event-list-item }}
         </ul>
-        <div class="pt-3 d-flex justify-content-between">
-            <div class="w-25 bg-pulse-grey" style="height: 35px"></div>
+        <div class="pt-3 pb-2 d-flex justify-content-between">
             <div class="w-25 bg-pulse-grey" style="height: 35px"></div>
         </div>
     </div>

blocks/timeline/templates/course-item.mustache

@@ -27,7 +27,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}}">
+    <div data-region="course-events-container" id="course-events-container-{{id}}" data-course-id="{{id}}" class="px-2">
         <h4 class="h5 font-weight-bold">{{{fullnamedisplay}}}</h4>
         {{< block_timeline/event-list }}
             {{$courseid}}{{id}}{{/courseid}}