From 8c890dd57d7f014cf7f0ab87109a0fbb2fe4611b Mon Sep 17 00:00:00 2001
From: Ryan Wyllie <ryan@moodle.com>
Date: Wed, 12 Dec 2018 10:06:58 +0800
Subject: [PATCH] MDL-64376 recentlyaccessedcourses: make cards fixed width

---
 theme/boost/scss/moodle/blocks.scss         | 44 +++++++++++---------
 theme/boost/style/moodle.css                | 33 ++++++++-------
 theme/bootstrapbase/less/moodle/blocks.less | 45 ++++++++++++---------
 theme/bootstrapbase/style/moodle.css        | 33 ++++++++-------
 4 files changed, 89 insertions(+), 66 deletions(-)

diff --git a/theme/boost/scss/moodle/blocks.scss b/theme/boost/scss/moodle/blocks.scss
index b52a1fb4eaa..5f19cb8347b 100644
--- a/theme/boost/scss/moodle/blocks.scss
+++ b/theme/boost/scss/moodle/blocks.scss
@@ -129,23 +129,31 @@ $card-gutter : $card-deck-margin * 2;
     background-size: cover;
 }
 
-.dashboard-card-deck .dashboard-card {
-    margin-bottom: $card-gutter;
-    flex-basis: auto;
-    width: 100%;
-    flex-grow: 0;
-    flex-shrink: 0;
-    .dashboard-card-img {
-        height: 7rem;
-        background-position: center;
-        background-size: cover;
+.dashboard-card-deck {
+    .dashboard-card {
+        margin-bottom: $card-gutter;
+        flex-basis: auto;
+        width: 100%;
+        flex-grow: 0;
+        flex-shrink: 0;
+        .dashboard-card-img {
+            height: 7rem;
+            background-position: center;
+            background-size: cover;
+        }
+        .dashboard-card-footer {
+            padding: 0.8rem;
+        }
     }
-    .dashboard-card-footer {
-        padding: 0.8rem;
+
+    &.fixed-width-cards {
+        .dashboard-card {
+            width: 300px;
+        }
     }
 }
 
-.dashboard-card-deck {
+.dashboard-card-deck:not(.fixed-width-cards) {
     @media (min-width: 576px) {
         .dashboard-card {
             width: calc(50% - #{$card-gutter});
@@ -169,7 +177,7 @@ $card-gutter : $card-deck-margin * 2;
 }
 
 #region-main.has-blocks {
-    .dashboard-card-deck {
+    .dashboard-card-deck:not(.fixed-width-cards) {
         @media (min-width: 1200px) {
             .dashboard-card {
                 width: calc(33.33% - #{$card-gutter});
@@ -184,7 +192,7 @@ $card-gutter : $card-deck-margin * 2;
 }
 
 body.drawer-open-left {
-    .dashboard-card-deck {
+    .dashboard-card-deck:not(.fixed-width-cards) {
         @media (min-width: 768px) {
             .dashboard-card {
                 width: calc(100% - #{$card-gutter});
@@ -209,7 +217,7 @@ body.drawer-open-left {
 }
 
 body.drawer-open-left #region-main.has-blocks {
-    .dashboard-card-deck {
+    .dashboard-card-deck:not(.fixed-width-cards) {
         @media (min-width: 1200px) {
             .dashboard-card {
                 width: calc(100% - #{$card-gutter});
@@ -230,7 +238,7 @@ body.drawer-open-left #region-main.has-blocks {
 
 @media (min-width: 1200px) {
     #block-region-side-pre {
-        .dashboard-card-deck {
+        .dashboard-card-deck:not(.fixed-width-cards) {
             margin-left: 0;
             margin-right: 0;
             .dashboard-card {
@@ -297,4 +305,4 @@ body.drawer-open-left #region-main.has-blocks {
     .icon {
         margin-right: 2px;
     }
-}
\ No newline at end of file
+}
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 672a8c73d33..aa60831ef88 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -11277,63 +11277,66 @@ div.editor_atto_toolbar button .icon {
   .dashboard-card-deck .dashboard-card .dashboard-card-footer {
     padding: 0.8rem; }
 
+.dashboard-card-deck.fixed-width-cards .dashboard-card {
+  width: 300px; }
+
 @media (min-width: 576px) {
-  .dashboard-card-deck .dashboard-card {
+  .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
     width: calc(50% - 0.5rem); } }
 
 @media (min-width: 840px) {
-  .dashboard-card-deck .dashboard-card {
+  .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
     width: calc(33.33% - 0.5rem); } }
 
 @media (min-width: 1100px) {
-  .dashboard-card-deck .dashboard-card {
+  .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
     width: calc(25% - 0.5rem); } }
 
 @media (min-width: 1360px) {
-  .dashboard-card-deck .dashboard-card {
+  .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
     width: calc(20% - 0.5rem); } }
 
 @media (min-width: 1200px) {
-  #region-main.has-blocks .dashboard-card-deck .dashboard-card {
+  #region-main.has-blocks .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
     width: calc(33.33% - 0.5rem); } }
 
 @media (min-width: 1470px) {
-  #region-main.has-blocks .dashboard-card-deck .dashboard-card {
+  #region-main.has-blocks .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
     width: calc(25% - 0.5rem); } }
 
 @media (min-width: 768px) {
-  body.drawer-open-left .dashboard-card-deck .dashboard-card {
+  body.drawer-open-left .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
     width: calc(100% - 0.5rem); } }
 
 @media (min-width: 861px) {
-  body.drawer-open-left .dashboard-card-deck .dashboard-card {
+  body.drawer-open-left .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
     width: calc(50% - 0.5rem); } }
 
 @media (min-width: 1122px) {
-  body.drawer-open-left .dashboard-card-deck .dashboard-card {
+  body.drawer-open-left .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
     width: calc(33.33% - 0.5rem); } }
 
 @media (min-width: 1381px) {
-  body.drawer-open-left .dashboard-card-deck .dashboard-card {
+  body.drawer-open-left .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
     width: calc(25% - 0.5rem); } }
 
 @media (min-width: 1200px) {
-  body.drawer-open-left #region-main.has-blocks .dashboard-card-deck .dashboard-card {
+  body.drawer-open-left #region-main.has-blocks .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
     width: calc(100% - 0.5rem); } }
 
 @media (min-width: 1236px) {
-  body.drawer-open-left #region-main.has-blocks .dashboard-card-deck .dashboard-card {
+  body.drawer-open-left #region-main.has-blocks .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
     width: calc(50% - 0.5rem); } }
 
 @media (min-width: 1497px) {
-  body.drawer-open-left #region-main.has-blocks .dashboard-card-deck .dashboard-card {
+  body.drawer-open-left #region-main.has-blocks .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
     width: calc(33.33% - 0.5rem); } }
 
 @media (min-width: 1200px) {
-  #block-region-side-pre .dashboard-card-deck {
+  #block-region-side-pre .dashboard-card-deck:not(.fixed-width-cards) {
     margin-left: 0;
     margin-right: 0; }
-    #block-region-side-pre .dashboard-card-deck .dashboard-card {
+    #block-region-side-pre .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
       width: calc(100% - 0.5rem) !important; } }
 
 .block_recentlyaccesseditems img.icon {
diff --git a/theme/bootstrapbase/less/moodle/blocks.less b/theme/bootstrapbase/less/moodle/blocks.less
index b355cc0d123..0bf7524679a 100644
--- a/theme/bootstrapbase/less/moodle/blocks.less
+++ b/theme/bootstrapbase/less/moodle/blocks.less
@@ -364,33 +364,42 @@
         width: ~"calc(100% - 0.5rem)";
         flex-basis: auto;
     }
-    @media (min-width: 647px) {
-        .dashboard-card {
-            display: flex;
-            flex-direction: column;
 
-            width: ~"calc(50% - 0.5rem)";
+    &.fixed-width-cards {
+        .dashboard-card {
+            width: 300px;
         }
     }
-    @media (min-width: 888px) {
-        .dashboard-card {
-            width: ~"calc(33.333% - 0.5rem)";
+
+    &:not(.fixed-width-cards) {
+        @media (min-width: 647px) {
+            .dashboard-card {
+                display: flex;
+                flex-direction: column;
+
+                width: ~"calc(50% - 0.5rem)";
+            }
         }
-    }
-    @media (min-width: 1147px) {
-        .dashboard-card {
-            width: ~"calc(25% - 0.5rem)";
+        @media (min-width: 888px) {
+            .dashboard-card {
+                width: ~"calc(33.333% - 0.5rem)";
+            }
         }
-    }
-    @media (min-width: 1407px) {
-        .dashboard-card {
-            width: ~"calc(20% - 0.5rem)";
+        @media (min-width: 1147px) {
+            .dashboard-card {
+                width: ~"calc(25% - 0.5rem)";
+            }
+        }
+        @media (min-width: 1407px) {
+            .dashboard-card {
+                width: ~"calc(20% - 0.5rem)";
+            }
         }
     }
 }
 body.used-region-side-pre.empty-region-side-post,
 body.used-region-side-post.empty-region-side-pre {
-    .dashboard-card-deck {
+    .dashboard-card-deck:not(.fixed-width-cards) {
         @media (min-width: 768px) {
             .dashboard-card {
                 width: ~"calc(100% - 0.5rem)";
@@ -414,7 +423,7 @@ body.used-region-side-post.empty-region-side-pre {
     }
 }
 body.used-region-side-pre.used-region-side-post {
-    .dashboard-card-deck {
+    .dashboard-card-deck:not(.fixed-width-cards) {
         @media (min-width: 768px) {
             .dashboard-card {
                 width: ~"calc(100% - 0.5rem)";
diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
index 7b59b141b65..33260af2ea0 100644
--- a/theme/bootstrapbase/style/moodle.css
+++ b/theme/bootstrapbase/style/moodle.css
@@ -16448,64 +16448,67 @@ body {
   width: calc(100% - 0.5rem);
   flex-basis: auto;
 }
+.dashboard-card-deck.fixed-width-cards .dashboard-card {
+  width: 300px;
+}
 @media (min-width: 647px) {
-  .dashboard-card-deck .dashboard-card {
+  .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
     display: flex;
     flex-direction: column;
     width: calc(50% - 0.5rem);
   }
 }
 @media (min-width: 888px) {
-  .dashboard-card-deck .dashboard-card {
+  .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
     width: calc(33.333% - 0.5rem);
   }
 }
 @media (min-width: 1147px) {
-  .dashboard-card-deck .dashboard-card {
+  .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
     width: calc(25% - 0.5rem);
   }
 }
 @media (min-width: 1407px) {
-  .dashboard-card-deck .dashboard-card {
+  .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
     width: calc(20% - 0.5rem);
   }
 }
 @media (min-width: 768px) {
-  body.used-region-side-pre.empty-region-side-post .dashboard-card-deck .dashboard-card,
-  body.used-region-side-post.empty-region-side-pre .dashboard-card-deck .dashboard-card {
+  body.used-region-side-pre.empty-region-side-post .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card,
+  body.used-region-side-post.empty-region-side-pre .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
     width: calc(100% - 0.5rem);
   }
 }
 @media (min-width: 815px) {
-  body.used-region-side-pre.empty-region-side-post .dashboard-card-deck .dashboard-card,
-  body.used-region-side-post.empty-region-side-pre .dashboard-card-deck .dashboard-card {
+  body.used-region-side-pre.empty-region-side-post .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card,
+  body.used-region-side-post.empty-region-side-pre .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
     width: calc(50% - 0.5rem);
   }
 }
 @media (min-width: 1163px) {
-  body.used-region-side-pre.empty-region-side-post .dashboard-card-deck .dashboard-card,
-  body.used-region-side-post.empty-region-side-pre .dashboard-card-deck .dashboard-card {
+  body.used-region-side-pre.empty-region-side-post .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card,
+  body.used-region-side-post.empty-region-side-pre .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
     width: calc(33.333% - 0.5rem);
   }
 }
 @media (min-width: 1514px) {
-  body.used-region-side-pre.empty-region-side-post .dashboard-card-deck .dashboard-card,
-  body.used-region-side-post.empty-region-side-pre .dashboard-card-deck .dashboard-card {
+  body.used-region-side-pre.empty-region-side-post .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card,
+  body.used-region-side-post.empty-region-side-pre .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
     width: calc(25% - 0.5rem);
   }
 }
 @media (min-width: 768px) {
-  body.used-region-side-pre.used-region-side-post .dashboard-card-deck .dashboard-card {
+  body.used-region-side-pre.used-region-side-post .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
     width: calc(100% - 0.5rem);
   }
 }
 @media (min-width: 1144px) {
-  body.used-region-side-pre.used-region-side-post .dashboard-card-deck .dashboard-card {
+  body.used-region-side-pre.used-region-side-post .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
     width: calc(50% - 0.5rem);
   }
 }
 @media (min-width: 1680px) {
-  body.used-region-side-pre.used-region-side-post .dashboard-card-deck .dashboard-card {
+  body.used-region-side-pre.used-region-side-post .dashboard-card-deck:not(.fixed-width-cards) .dashboard-card {
     width: calc(33.333% - 0.5rem);
   }
 }