MDL-63663 core_my: prevent page jumps on load
authorBas Brands <bas@moodle.com>
Mon, 12 Nov 2018 14:44:37 +0000 (15:44 +0100)
committerBas Brands <bas@moodle.com>
Mon, 12 Nov 2018 14:44:37 +0000 (15:44 +0100)
equal size loading placeholders
added list view and summary view placeholders for myoverview

18 files changed:
blocks/myoverview/templates/courses-view.mustache
blocks/myoverview/templates/no-courses.mustache
blocks/myoverview/templates/placeholder-course.mustache [deleted file]
blocks/myoverview/templates/placeholders.mustache [new file with mode: 0644]
blocks/recentlyaccessedcourses/templates/no-courses.mustache
blocks/recentlyaccessedcourses/templates/placeholder-course.mustache
blocks/recentlyaccessedcourses/templates/recentlyaccessedcourses-view.mustache
blocks/recentlyaccesseditems/templates/no-items.mustache
blocks/recentlyaccesseditems/templates/placeholder-item.mustache
blocks/starredcourses/templates/no-courses.mustache
blocks/starredcourses/templates/placeholder-course.mustache
blocks/starredcourses/templates/view.mustache
lib/templates/paged_content_pages.mustache
theme/boost/scss/moodle/blocks.scss
theme/boost/scss/moodle/core.scss
theme/boost/style/moodle.css
theme/bootstrapbase/less/moodle/blocks.less
theme/bootstrapbase/style/moodle.css

index c5be1e8..661da4d 100644 (file)
     data-prev-display="{{view}}"
     data-nocoursesimg="{{nocoursesimg}}">
     <div data-region="course-view-content">
-        <div data-region="courses-loading-placeholder">
-            <div class="card-deck dashboard-card-deck">
-                {{> block_myoverview/placeholder-course }}
-                {{> block_myoverview/placeholder-course }}
-                {{> block_myoverview/placeholder-course }}
-                {{> block_myoverview/placeholder-course }}
-            </div>
-        </div>
+        {{> block_myoverview/placeholders }}
     </div>
 </div>
\ No newline at end of file
index 2da1441..ba52e4a 100644 (file)
@@ -24,8 +24,8 @@
         "nocoursesimg": "https://moodlesite/theme/image.php/boost/block_myoverview/1535727318/courses"
     }
 }}
-<div class="text-xs-center text-center m-t-3" data-region="empty-message">
-    <img class="empty-placeholder-image-lg"
+<div class="text-xs-center text-center m-t-1" data-region="empty-message">
+    <img class="empty-placeholder-image-lg m-t-1"
          src="{{nocoursesimg}}"
          alt="{{#str}} nocourses, block_myoverview {{/str}}"
          role="presentation">
diff --git a/blocks/myoverview/templates/placeholder-course.mustache b/blocks/myoverview/templates/placeholder-course.mustache
deleted file mode 100644 (file)
index e377042..0000000
+++ /dev/null
@@ -1,33 +0,0 @@
-{{!
-    This file is part of Moodle - http://moodle.org/
-
-    Moodle is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    Moodle is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
-
-    You should have received a copy of the GNU General Public License
-    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
-}}
-{{!
-    @template block_myoverview/placeholder-course
-
-    This template renders an course card item loading placeholder for the myoverview block.
-
-    Example context (json):
-    {}
-}}
-<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 course-info-container">
-        <div class="bg-pulse-grey w-100 m-b-3" style="height: 1rem"></div>
-    </div>
-    <div class="bg-pulse-grey w-100" style="height: 3rem">
-    </div>
-</div>
diff --git a/blocks/myoverview/templates/placeholders.mustache b/blocks/myoverview/templates/placeholders.mustache
new file mode 100644 (file)
index 0000000..d61c984
--- /dev/null
@@ -0,0 +1,99 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template block_myoverview/placeholders
+
+    This template renders the loading placeholders for the myoverview block.
+
+    Example context (json):
+    {}
+}}
+<div data-region="loading-placeholder-content" aria-hidden="true">
+    {{#cards}}
+    <div class="card-deck dashboard-card-deck one-row" style="height: 13rem">
+        <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 course-info-container">
+                <div class="bg-pulse-grey w-100" style="height: 1rem"></div>
+            </div>
+        </div>
+        <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 course-info-container">
+                <div class="bg-pulse-grey w-100" style="height: 1rem"></div>
+            </div>
+        </div>
+        <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 course-info-container">
+                <div class="bg-pulse-grey w-100" style="height: 1rem"></div>
+            </div>
+        </div>
+        <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 course-info-container">
+                <div class="bg-pulse-grey w-100" style="height: 1rem"></div>
+            </div>
+        </div>
+    </div>
+    {{/cards}}
+    {{#list}}
+    <ul class="list-group">
+        <li class="list-group-item course-listitem">
+            <div class="col-md-6 span6 p-0 d-flex align-items-center">
+                <div class="bg-pulse-grey rounded-circle mr-2" style="height: 1rem; width: 1rem;"></div>
+                <div class="bg-pulse-grey w-50" style="height: 1rem; margin: 0.5rem 0"></div>
+            </div>
+        </li>
+        <li class="list-group-item course-listitem">
+            <div class="col-md-6 span6 p-0 d-flex align-items-center">
+                <div class="bg-pulse-grey rounded-circle mr-2" style="height: 1rem; width: 1rem;"></div>
+                <div class="bg-pulse-grey w-50" style="height: 1rem; margin: 0.5rem 0"></div>
+            </div>
+        </li>
+        <li class="list-group-item course-listitem">
+            <div class="col-md-6 span6 p-0 d-flex align-items-center">
+                <div class="bg-pulse-grey rounded-circle mr-2" style="height: 1rem; width: 1rem;"></div>
+                <div class="bg-pulse-grey w-50" style="height: 1rem; margin: 0.5rem 0"></div>
+            </div>
+        </li>
+        <li class="list-group-item course-listitem">
+            <div class="col-md-6 span6 p-0 d-flex align-items-center">
+                <div class="bg-pulse-grey rounded-circle mr-2" style="height: 1rem; width: 1rem;"></div>
+                <div class="bg-pulse-grey w-50" style="height: 1rem; margin: 0.5rem 0"></div>
+            </div>
+        </li>
+    </ul>
+    {{/list}}
+    {{#summary}}
+    <div class="course-summaryitem m-b-1 p-2">
+        <div class="d-flex">
+            <div class="d-flex">
+                <div class="bg-pulse-grey rounded-circle m-0 p-0 m-r-1" style="height: 7rem; width: 7rem;"></div>
+            </div>
+            <div class="d-flex w-100 flex-column">
+                <div class="bg-pulse-grey w-50 m-b-1" style="height: 1rem; margin: 0.5rem 0"></div>
+                <div class="bg-pulse-grey w-100" style="height: 13rem"></div>
+            </div>
+        </div>
+    </div>
+    {{/summary}}
+</div>
index 0cb3109..27ab207 100644 (file)
@@ -25,7 +25,7 @@
     }
 }}
 <div class="text-xs-center text-center m-t-3" data-region="empty-message">
-    <img class="empty-placeholder-image-lg"
+    <img class="empty-placeholder-image-lg m-t-1"
          src="{{nocoursesimgurl}}"
          alt="{{#str}} nocourses, block_recentlyaccessedcourses {{/str}}"
          role="presentation">
index da6b325..63c455d 100644 (file)
@@ -25,7 +25,7 @@
 <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 recent-course-info-container">
-        <div class="bg-pulse-grey w-100 m-b-3" style="height: 1rem"></div>
+    <div class="card-body pr-1 course-info-container">
+        <div class="bg-pulse-grey w-100" style="height: 1rem"></div>
     </div>
-</div>
\ No newline at end of file
+</div>
index 5a4d166..b277154 100644 (file)
      data-nocoursesimgurl="{{nocoursesimgurl}}">
     <div data-region="recentlyaccessedcourses-view-content">
         <div data-region="recentlyaccessedcourses-loading-placeholder">
-            <div class="card-deck dashboard-card-deck one-row">
-                {{> block_recentlyaccessedcourses/placeholder-course }}
-                {{> block_recentlyaccessedcourses/placeholder-course }}
-                {{> block_recentlyaccessedcourses/placeholder-course }}
-                {{> block_recentlyaccessedcourses/placeholder-course }}
-                {{> block_recentlyaccessedcourses/placeholder-course }}
+            <div class="card-deck dashboard-card-deck one-row" style="height: 11.1rem">
                 {{> block_recentlyaccessedcourses/placeholder-course }}
                 {{> block_recentlyaccessedcourses/placeholder-course }}
                 {{> block_recentlyaccessedcourses/placeholder-course }}
index 794f424..8919e52 100644 (file)
         "noitemsimgurl": "https://moodlesite/theme/image.php/boost/block_recentlyaccesseditems/1535727318/items"
     }
 }}
-<div class="text-center mt-3" data-region="empty-message">
+<div class="text-center" data-region="empty-message">
     <img class="empty-placeholder-image-lg"
         src="{{noitemsimgurl}}"
         alt="{{#str}} noitems, block_recentlyaccesseditems {{/str}}"
         role="presentation"
     >
-    <p class="text-muted mt-3">{{#str}} noitems, block_recentlyaccesseditems {{/str}}</p>
+    <p class="text-muted mt-3 mb-0">{{#str}} noitems, block_recentlyaccesseditems {{/str}}</p>
 </div>
\ No newline at end of file
index 91155c9..0e5cd86 100644 (file)
     Example context (json):
     {}
 }}
-<div class="card dashboard-card border-0">
-    <div class="card-body course-info-container">
-        <div class="d-flex flex-row align-items-center" style="height: 32px">
-            <div class="bg-pulse-grey rounded-circle" style="height: 32px; width: 32px;"></div>
+<div class="card dashboard-card border-0 mb-0">
+        <div class="d-flex flex-row align-items-center" style="height: 6rem">
+            <div class="bg-pulse-grey rounded-circle" style="height: 2rem; width: 2rem;"></div>
             <div class="w-100 line-height-3 ml-1">
-                <div class="bg-pulse-grey w-100" style="height: 15px;"></div>
-                <div class="bg-pulse-grey w-75 mt-1" style="height: 10px;"></div>
+                <div class="bg-pulse-grey w-100" style="height: 1rem;"></div>
+                <div class="bg-pulse-grey w-75 mt-1" style="height: 0.8rem;"></div>
             </div>
         </div>
-    </div>
 </div>
\ No newline at end of file
index 1b74964..a00de4e 100644 (file)
@@ -20,7 +20,7 @@
     }
 }}
 <div class="text-xs-center text-center m-t-3" data-region="empty-message">
-    <img class="empty-placeholder-image-lg"
+    <img class="empty-placeholder-image-lg m-t-1"
          src="{{nocoursesimg}}"
          alt="{{#str}} nocourses, block_starredcourses {{/str}}"
          role="presentation">
index 0e35afe..3ce061e 100644 (file)
@@ -21,6 +21,6 @@
     <div class="card-img-top bg-pulse-grey w-100" style="height: 7rem">
     </div>
     <div class="card-body recent-course-info-container">
-        <div class="bg-pulse-grey w-100 m-b-3" style="height: 1rem"></div>
+        <div class="bg-pulse-grey w-100" style="height: 1rem"></div>
     </div>
 </div>
index 15009bb..7046b96 100644 (file)
@@ -29,7 +29,7 @@
      data-nocoursesimg="{{nocoursesimg}}">
     <div data-region="starred-courses-view-content">
         <div data-region="starred-courses-loading-placeholder">
-            <div class="card-deck dashboard-card-deck one-row">
+            <div class="card-deck dashboard-card-deck one-row" style="height: 11.1rem">
                 {{> block_starredcourses/placeholder-course }}
                 {{> block_starredcourses/placeholder-course }}
                 {{> block_starredcourses/placeholder-course }}
index bd53214..a85b0eb 100644 (file)
@@ -37,8 +37,8 @@
 }}
 <div
     id="{{$pagingcontentid}}page-container-{{uniqid}}{{/pagingcontentid}}"
-    style="min-height: 50px"
     data-region="page-container"
+    class="paged-content-page-container"
     aria-live="polite"
 >
     {{#pages}}
index 19d6ec8..d1c52e4 100644 (file)
@@ -78,7 +78,7 @@ $blocks-plus-gutter: $blocks-column-width + ( $grid-gutter-width / 2 );
 $card-gutter : $card-deck-margin * 2;
 
 .block .empty-placeholder-image-lg {
-    height: 125px;
+    height: 5rem;
 }
 
 .block .block-cards {
@@ -219,6 +219,15 @@ body.drawer-open-left #region-main.has-blocks {
     }
 }
 
+.block_myoverview {
+    .content {
+        min-height: 19.35rem;
+    }
+    .paged-content-page-container {
+        min-height: 13rem;
+    }
+}
+
 // Show expand collapse with font-awesome.
 .block_settings .block_tree [aria-expanded="true"],
 .block_settings .block_tree [aria-expanded="true"].emptybranch,
index 7fc00a8..470d2b0 100644 (file)
@@ -2149,3 +2149,7 @@ div.editor_atto_toolbar button .icon {
         display: none;
     }
 }
+
+.paged-content-page-container {
+    min-height: 3.125rem;
+}
index a0250ee..12d5556 100644 (file)
@@ -10468,6 +10468,9 @@ div.editor_atto_toolbar button .icon {
 .dir-ltr .dir-ltr-hide {
   display: none; }
 
+.paged-content-page-container {
+  min-height: 3.125rem; }
+
 .icon {
   font-size: 16px;
   width: 16px;
@@ -11138,7 +11141,7 @@ div.editor_atto_toolbar button .icon {
     width: 100%; } }
 
 .block .empty-placeholder-image-lg {
-  height: 125px; }
+  height: 5rem; }
 
 .block .block-cards .course-info-container {
   padding: 0.8rem; }
@@ -11238,6 +11241,12 @@ div.editor_atto_toolbar button .icon {
   width: auto;
   margin-right: 6px; }
 
+.block_myoverview .content {
+  min-height: 19.35rem; }
+
+.block_myoverview .paged-content-page-container {
+  min-height: 13rem; }
+
 .block_settings .block_tree [aria-expanded="true"],
 .block_settings .block_tree [aria-expanded="true"].emptybranch,
 .block_settings .block_tree [aria-expanded="false"],
index be6af72..a1c9147 100644 (file)
     }
 }
 
+.block_myoverview {
+    .content {
+        min-height: 19.35rem;
+    }
+    .paged-content-page-container {
+        min-height: 13rem;
+    }
+}
+
 .dashboard-card-deck {
     box-sizing: border-box;
     *,
index 62755b1..f858298 100644 (file)
@@ -16249,6 +16249,12 @@ body {
   text-decoration: none;
   color: unset;
 }
+.block_myoverview .content {
+  min-height: 19.35rem;
+}
+.block_myoverview .paged-content-page-container {
+  min-height: 13rem;
+}
 .dashboard-card-deck {
   box-sizing: border-box;
   display: flex;