MDL-63064 block_starredcourses: make starred block style consistent

This commit remove an unused template and some custom css that has been added previously and now is no longer necessary.
NoelDeMartin · Oct 31, 2018 · 51437e5 · 51437e5
1 parent 8730c06
commit 51437e5
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 184 deletions.
diff --git a/blocks/starredcourses/templates/courses.mustache b/blocks/starredcourses/templates/courses.mustache
diff --git a/blocks/starredcourses/templates/main.mustache b/blocks/starredcourses/templates/main.mustache
@@ -23,7 +23,7 @@
     {}
 }}
 
-<div id="block-starredcourses-{{uniqid}}" class="block-starred-courses" data-region="starred-courses" data-userid="{{userid}}">
+<div id="block-starredcourses-{{uniqid}}" class="block-starredcourses" data-region="starred-courses">
     <div class="container-fluid p-0">
         {{> block_starredcourses/view }}
     </div>

diff --git a/blocks/starredcourses/templates/placeholder-course.mustache b/blocks/starredcourses/templates/placeholder-course.mustache
@@ -17,10 +17,10 @@
      Example context (json):
     {}
 }}
-<div class="card starred-course-card border-0 mx-1 mb-1">
+<div class="card dashboard-card border-0">
     <div class="card-img-top bg-pulse-grey w-100" style="height: 7rem">
     </div>
-    <div class="card-body starred-course-info-container">
+    <div class="card-body recent-course-info-container">
         <div class="bg-pulse-grey w-100 m-b-3" style="height: 1rem"></div>
     </div>
 </div>
diff --git a/blocks/starredcourses/templates/view-cards.mustache b/blocks/starredcourses/templates/view-cards.mustache
@@ -26,20 +26,25 @@
         ]
     }
 }}
-<div class="course-card-container d-flex justify-content-around">
-    {{#courses}}
-        <a href="{{viewurl}}">
-            <div class="card starred-course-card mx-1 mb-1">
-                <div class="card-img-top starred-course-img" style='background-image: url("{{{courseimage}}}");'>
-                </div>
-                <div class="card-body starred-course-info-container" id="course-info-container-{{id}}">
-                    <div class="d-flex">
-                        <div class="card-title d-inline-block text-truncate">
-                            {{{fullname}}}
-                        </div>
-                    </div>
-                </div>
+<div class="card-deck dashboard-card-deck" role="list">
+{{#courses}}
+    <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 }}
             </div>
         </a>
-    {{/courses}}
+        <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>
+                        {{#shortentext}}40, {{{fullname}}} {{/shortentext}}
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+{{/courses}}
 </div>
diff --git a/blocks/starredcourses/templates/view.mustache b/blocks/starredcourses/templates/view.mustache
@@ -29,7 +29,7 @@
      data-nocoursesimg="{{nocoursesimg}}">
     <div data-region="starred-courses-view-content">
         <div data-region="starred-courses-loading-placeholder">
-            <div class="course-card-container d-flex justify-content-around">
+            <div class="card-deck dashboard-card-deck">
                 {{> block_starredcourses/placeholder-course }}
                 {{> block_starredcourses/placeholder-course }}
                 {{> block_starredcourses/placeholder-course }}

diff --git a/theme/boost/scss/moodle/blocks.scss b/theme/boost/scss/moodle/blocks.scss
@@ -237,64 +237,3 @@ body.drawer-open-left #region-main.has-blocks {
         margin-right: 2px;
     }
 }
-$card-gutter : $card-deck-margin * 2;
-.block_starredcourses {
-    [data-region="starredcoursess-view-content"] {
-        overflow-x: hidden;
-    }
-    .card-deck {
-        flex-wrap: nowrap;
-    }
-    .starredcoursessimg {
-        height: 7rem;
-        background-position: center;
-        background-size: cover;
-    }
-    .starredcourses-info-container {
-        padding: 0.8rem;
-        .card-title {
-            max-width: 100%;
-            a {
-                max-width: 100%;
-            }
-        }
-    }
-    .empty-placeholder-image-lg {
-        height: 125px;
-    }
-}
-
-$card-gutter : $card-deck-margin * 2;
-.block_starredcourses {
-    [data-region="starred-courses-view-content"] {
-        overflow-x: hidden;
-    }
-    .starred-course-card {
-        flex-basis: auto;
-        height: 150px;
-        width: 200px;
-        flex-shrink: 0;
-    }
-    .course-card-container {
-        height: 150px;
-        overflow: hidden;
-        flex-wrap: wrap;
-    }
-    .starred-course-img {
-        height: 7rem;
-        background-position: center;
-        background-size: cover;
-    }
-    .starred-course-info-container {
-        padding: 0.8rem;
-        .card-title {
-            max-width: 100%;
-            a {
-                max-width: 100%;
-            }
-        }
-    }
-    .empty-placeholder-image-lg {
-        height: 125px;
-    }
-}
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
@@ -11251,56 +11251,6 @@ div.editor_atto_toolbar button .icon {
   .block_settings .block_tree p.hasicon .icon {
     margin-right: 2px; }
 
-.block_starredcourses [data-region="starredcoursess-view-content"] {
-  overflow-x: hidden; }
-
-.block_starredcourses .card-deck {
-  flex-wrap: nowrap; }
-
-.block_starredcourses .starredcoursessimg {
-  height: 7rem;
-  background-position: center;
-  background-size: cover; }
-
-.block_starredcourses .starredcourses-info-container {
-  padding: 0.8rem; }
-  .block_starredcourses .starredcourses-info-container .card-title {
-    max-width: 100%; }
-    .block_starredcourses .starredcourses-info-container .card-title a {
-      max-width: 100%; }
-
-.block_starredcourses .empty-placeholder-image-lg {
-  height: 125px; }
-
-.block_starredcourses [data-region="starred-courses-view-content"] {
-  overflow-x: hidden; }
-
-.block_starredcourses .starred-course-card {
-  flex-basis: auto;
-  height: 150px;
-  width: 200px;
-  flex-shrink: 0; }
-
-.block_starredcourses .course-card-container {
-  height: 150px;
-  overflow: hidden;
-  flex-wrap: wrap; }
-
-.block_starredcourses .starred-course-img {
-  height: 7rem;
-  background-position: center;
-  background-size: cover; }
-
-.block_starredcourses .starred-course-info-container {
-  padding: 0.8rem; }
-  .block_starredcourses .starred-course-info-container .card-title {
-    max-width: 100%; }
-    .block_starredcourses .starred-course-info-container .card-title a {
-      max-width: 100%; }
-
-.block_starredcourses .empty-placeholder-image-lg {
-  height: 125px; }
-
 .navbar {
   max-height: 50px; }