MDL-89337 core_course: align course cards and loading placeholders

Author: muhammadarnaldo

public/blocks/myoverview/templates/placeholders.mustache

@@ -24,10 +24,10 @@
 }}
 <div data-region="loading-placeholder-content" aria-hidden="true">
     {{#card}}
-        <div class="card-grid row row-cols-1 row-cols-sm-2 row-cols-md-3 mx-0 flex-nowrap overflow-hidden" style="height: 13rem">
-            <div class="col d-flex px-1">{{> core_course/placeholder-course }}</div>
-            <div class="col d-flex px-1">{{> core_course/placeholder-course }}</div>
-            <div class="col d-flex px-1">{{> core_course/placeholder-course }}</div>
+        <div class="card-grid row gx-2 row-cols-1 row-cols-sm-2 row-cols-md-3 flex-nowrap overflow-hidden" style="height: 13rem">
+            <div class="col">{{> core_course/placeholder-course }}</div>
+            <div class="col">{{> core_course/placeholder-course }}</div>
+            <div class="col">{{> core_course/placeholder-course }}</div>
         </div>
     {{/card}}
     {{#list}}

public/blocks/recentlyaccessedcourses/templates/recentlyaccessedcourses-view.mustache

@@ -25,10 +25,10 @@
 }}
 <div id="recentlyaccessedcourses-view-{{uniqid}}" data-region="recentlyaccessedcourses-view">
     <div data-region="loading-placeholder">
-        <div class="card-grid mx-0 mt-5 row row-cols-1 row-cols-sm-2 row-cols-md-3 flex-nowrap overflow-hidden" style="height: 13.05rem">
-            <div class="col p-0">{{> core_course/placeholder-course }}</div>
-            <div class="col p-0">{{> core_course/placeholder-course }}</div>
-            <div class="col p-0">{{> core_course/placeholder-course }}</div>
+        <div class="card-grid row gx-2 mt-5 row-cols-1 row-cols-sm-2 row-cols-md-3 flex-nowrap overflow-hidden" style="height: 13.05rem">
+            <div class="col">{{> core_course/placeholder-course }}</div>
+            <div class="col">{{> core_course/placeholder-course }}</div>
+            <div class="col">{{> core_course/placeholder-course }}</div>
         </div>
     </div>
     <div class="hidden" data-region="view-content">
@@ -37,7 +37,7 @@
                 {{> core/paged_content_paging_bar }}
             </div>
         {{/pagingbar}}
-        <div class="card-carousel mx-0 justify-content-center flex-nowrap overflow-hidden" data-region="card-deck" role="list">
+        <div class="card-carousel mx-0 gap-2 justify-content-center flex-nowrap overflow-hidden" data-region="card-deck" role="list">
             {{#courses}}
                 {{> core_course/coursecard }}
             {{/courses}}

public/blocks/starredcourses/templates/view.mustache

@@ -29,10 +29,10 @@
      data-nocoursesimg="{{nocoursesimg}}">
     <div data-region="starred-courses-view-content">
         <div data-region="starred-courses-loading-placeholder">
-            <div class="card-grid mx-0 row row-cols-1 row-cols-sm-2 row-cols-lg-3 flex-nowrap overflow-hidden" style="height: 11.1rem">
-                <div class="col p-0">{{> core_course/placeholder-course }}</div>
-                <div class="col p-0">{{> core_course/placeholder-course }}</div>
-                <div class="col p-0">{{> core_course/placeholder-course }}</div>
+            <div class="card-grid row gx-2 row-cols-1 row-cols-sm-2 row-cols-lg-3 flex-nowrap overflow-hidden" style="height: 11.1rem">
+                <div class="col">{{> core_course/placeholder-course }}</div>
+                <div class="col">{{> core_course/placeholder-course }}</div>
+                <div class="col">{{> core_course/placeholder-course }}</div>
             </div>
         </div>
     </div>

public/course/templates/coursecard.mustache

@@ -34,7 +34,7 @@
         ]
     }
 }}
-<div class="card course-card mx-1" role="listitem"
+<div class="card course-card" role="listitem"
     data-region="course-content"
     data-course-id="{{{id}}}">
     <a href="{{viewurl}}" tabindex="-1">

public/course/templates/coursecards.mustache

@@ -35,9 +35,9 @@
     }
 }}
 
-<div class="card-grid mx-0 row row-cols-1 row-cols-sm-2 row-cols-lg-3 {{$classes}}{{/classes}}" data-region="card-deck" role="list">
+<div class="card-grid row gx-2 row-cols-1 row-cols-sm-2 row-cols-lg-3 {{$classes}}{{/classes}}" data-region="card-deck" role="list">
 {{#courses}}
-    <div class="col d-flex px-0 mb-2">
+    <div class="col d-flex mb-2">
         {{> core_course/coursecard }}
     </div>
 {{/courses}}

public/course/templates/placeholder-course.mustache

@@ -22,7 +22,7 @@
     Example context (json):
     {}
 }}
-<div class="card border-0 px-1">
+<div class="card border-0">
     <div class="card-img-top bg-pulse-grey w-100" style="height: 7rem">
     </div>
     <div class="card-body pe-1 course-info-container">