MDL-63923: core_my: card sizes clean and boost

Cards should have a minimum size of 250px wide

diff --git a/theme/boost/scss/moodle/blocks.scss b/theme/boost/scss/moodle/blocks.scss
index 19d6ec8..5ba826e 100644 (file)
--- a/theme/boost/scss/moodle/blocks.scss
+++ b/theme/boost/scss/moodle/blocks.scss
@@ -146,22 +146,22 @@ $card-gutter : $card-deck-margin * 2;
 }
 
 .dashboard-card-deck {
-    @include media-breakpoint-up(sm) {
+    @media (min-width: 576px) {
         .dashboard-card {
             width: calc(50% - #{$card-gutter});
         }
     }
-    @include media-breakpoint-up(md) {
+    @media (min-width: 840px) {
         .dashboard-card {
             width: calc(33.33% - #{$card-gutter});
         }
     }
-    @include media-breakpoint-up(lg) {
+    @media (min-width: 1100px) {
         .dashboard-card {
             width: calc(25% - #{$card-gutter});
         }
     }
-    @include media-breakpoint-up(xl) {
+    @media (min-width: 1360px) {
         .dashboard-card {
             width: calc(20% - #{$card-gutter});
         }
@@ -170,12 +170,12 @@ $card-gutter : $card-deck-margin * 2;
 
 #region-main.has-blocks {
     .dashboard-card-deck {
-        @include media-breakpoint-up(lg) {
+        @media (min-width: 1200px) {
             .dashboard-card {
                 width: calc(33.33% - #{$card-gutter});
             }
         }
-        @include media-breakpoint-up(xl) {
+        @media (min-width: 1470px) {
             .dashboard-card {
                 width: calc(25% - #{$card-gutter});
             }
@@ -183,14 +183,24 @@ $card-gutter : $card-deck-margin * 2;
     }
 }
 
-body.drawer-open-left #region-main.has-blocks {
+body.drawer-open-left {
     .dashboard-card-deck {
-        @include media-breakpoint-up(lg) {
+        @media (min-width: 768px) {
+            .dashboard-card {
+                width: calc(100% - #{$card-gutter});
+            }
+        }
+        @media (min-width: 861px) {
+            .dashboard-card {
+                width: calc(50% - #{$card-gutter});
+            }
+        }
+        @media (min-width: 1122px) {
             .dashboard-card {
                 width: calc(33.33% - #{$card-gutter});
             }
         }
-        @media (min-width: 1400px) {
+        @media (min-width: 1381px) {
             .dashboard-card {
                 width: calc(25% - #{$card-gutter});
             }
@@ -198,14 +208,33 @@ body.drawer-open-left #region-main.has-blocks {
     }
 }
 
+body.drawer-open-left #region-main.has-blocks {
+    .dashboard-card-deck {
+        @media (min-width: 1200px) {
+            .dashboard-card {
+                width: calc(100% - #{$card-gutter});
+            }
+        }
+        @media (min-width: 1236px) {
+            .dashboard-card {
+                width: calc(50% - #{$card-gutter});
+            }
+        }
+        @media (min-width: 1497px) {
+            .dashboard-card {
+                width: calc(33.33% - #{$card-gutter});
+            }
+        }
+    }
+}
+
 @media (min-width: 1200px) {
     #block-region-side-pre {
         .dashboard-card-deck {
-            margin: 0;
+            margin-left: 0;
+            margin-right: 0;
             .dashboard-card {
-                width: 100% !important;
-                margin-left: 0;
-                margin-right: 0;
+                width: calc(100% - #{$card-gutter}) !important;
             }
         }
     }

diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index a0250ee..76abfe6 100644 (file)
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -11197,41 +11197,60 @@ div.editor_atto_toolbar button .icon {
   .dashboard-card-deck .dashboard-card {
     width: calc(50% - 0.5rem); } }
 
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .dashboard-card-deck .dashboard-card {
     width: calc(33.33% - 0.5rem); } }
 
-@media (min-width: 992px) {
+@media (min-width: 1100px) {
   .dashboard-card-deck .dashboard-card {
     width: calc(25% - 0.5rem); } }
 
-@media (min-width: 1200px) {
+@media (min-width: 1360px) {
   .dashboard-card-deck .dashboard-card {
     width: calc(20% - 0.5rem); } }
 
-@media (min-width: 992px) {
+@media (min-width: 1200px) {
   #region-main.has-blocks .dashboard-card-deck .dashboard-card {
     width: calc(33.33% - 0.5rem); } }
 
-@media (min-width: 1200px) {
+@media (min-width: 1470px) {
   #region-main.has-blocks .dashboard-card-deck .dashboard-card {
     width: calc(25% - 0.5rem); } }
 
-@media (min-width: 992px) {
-  body.drawer-open-left #region-main.has-blocks .dashboard-card-deck .dashboard-card {
+@media (min-width: 768px) {
+  body.drawer-open-left .dashboard-card-deck .dashboard-card {
+    width: calc(100% - 0.5rem); } }
+
+@media (min-width: 861px) {
+  body.drawer-open-left .dashboard-card-deck .dashboard-card {
+    width: calc(50% - 0.5rem); } }
+
+@media (min-width: 1122px) {
+  body.drawer-open-left .dashboard-card-deck .dashboard-card {
     width: calc(33.33% - 0.5rem); } }
 
-@media (min-width: 1400px) {
-  body.drawer-open-left #region-main.has-blocks .dashboard-card-deck .dashboard-card {
+@media (min-width: 1381px) {
+  body.drawer-open-left .dashboard-card-deck .dashboard-card {
     width: calc(25% - 0.5rem); } }
 
+@media (min-width: 1200px) {
+  body.drawer-open-left #region-main.has-blocks .dashboard-card-deck .dashboard-card {
+    width: calc(100% - 0.5rem); } }
+
+@media (min-width: 1236px) {
+  body.drawer-open-left #region-main.has-blocks .dashboard-card-deck .dashboard-card {
+    width: calc(50% - 0.5rem); } }
+
+@media (min-width: 1497px) {
+  body.drawer-open-left #region-main.has-blocks .dashboard-card-deck .dashboard-card {
+    width: calc(33.33% - 0.5rem); } }
+
 @media (min-width: 1200px) {
   #block-region-side-pre .dashboard-card-deck {
-    margin: 0; }
+    margin-left: 0;
+    margin-right: 0; }
     #block-region-side-pre .dashboard-card-deck .dashboard-card {
-      width: 100% !important;
-      margin-left: 0;
-      margin-right: 0; } }
+      width: calc(100% - 0.5rem) !important; } }
 
 .block_recentlyaccesseditems img.icon {
   height: auto;

diff --git a/theme/bootstrapbase/less/moodle/blocks.less b/theme/bootstrapbase/less/moodle/blocks.less
index be6af72..5ece0ab 100644 (file)
--- a/theme/bootstrapbase/less/moodle/blocks.less
+++ b/theme/bootstrapbase/less/moodle/blocks.less
@@ -341,41 +341,96 @@
     .dashboard-card {
         .border-radius(@baseBorderRadius);
         margin-bottom: 0.5rem;
+        margin-right: 0.25rem;
+        margin-left: 0.25rem;
         flex-grow: 0;
         flex-shrink: 0;
         min-width: 0;
-        width: 100%;
+        width: ~"calc(100% - 0.5rem)";
         flex-basis: auto;
     }
-    @media (min-width: 576px) {
+    @media (min-width: 647px) {
         .dashboard-card {
             display: flex;
             flex-direction: column;
-            margin-right: 0.25rem;
-            margin-left: 0.25rem;
+
             width: ~"calc(50% - 0.5rem)";
         }
     }
-
-    @media (min-width: 1200px) {
+    @media (min-width: 888px) {
         .dashboard-card {
             width: ~"calc(33.333% - 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 {
+        @media (min-width: 768px) {
+            .dashboard-card {
+                width: ~"calc(100% - 0.5rem)";
+            }
+        }
+        @media (min-width: 815px) {
+            .dashboard-card {
+                width: ~"calc(50% - 0.5rem)";
+            }
+        }
+        @media (min-width: 1163px) {
+            .dashboard-card {
+                width: ~"calc(33.333% - 0.5rem)";
+            }
+        }
+        @media (min-width: 1514px) {
+            .dashboard-card {
+                width: ~"calc(25% - 0.5rem)";
+            }
+        }
+    }
+}
+body.used-region-side-pre.used-region-side-post {
+    .dashboard-card-deck {
+        @media (min-width: 768px) {
+            .dashboard-card {
+                width: ~"calc(100% - 0.5rem)";
+            }
+        }
+        @media (min-width: 1144px) {
+            .dashboard-card {
+                width: ~"calc(50% - 0.5rem)";
+            }
+        }
+        @media (min-width: 1680px) {
+            .dashboard-card {
+                width: ~"calc(33.333% - 0.5rem)";
+            }
+        }
+    }
 }
 
+/* stylelint-disable declaration-no-important */
 @media (min-width: 768px) {
     #block-region-side-post .dashboard-card-deck,
     #block-region-side-pre .dashboard-card-deck {
-        margin: 0;
-        height: unset;
         .dashboard-card {
-            width: 100%;
-            margin-left: 0;
-            margin-right: 0;
+            width: ~"calc(100% - 0.5rem)" !important;
         }
     }
 }
+.block_docked .dashboard-card {
+    width: ~"calc(100% - 0.5rem)" !important;
+}
+/* stylelint-enable */
 
 .dashboard-card-img {
     height: 7rem;

diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
index 62755b1..f8f223a 100644 (file)
--- a/theme/bootstrapbase/style/moodle.css
+++ b/theme/bootstrapbase/style/moodle.css
@@ -16266,39 +16266,86 @@ body {
   -moz-border-radius: 4px;
   border-radius: 4px;
   margin-bottom: 0.5rem;
+  margin-right: 0.25rem;
+  margin-left: 0.25rem;
   flex-grow: 0;
   flex-shrink: 0;
   min-width: 0;
-  width: 100%;
+  width: calc(100% - 0.5rem);
   flex-basis: auto;
 }
-@media (min-width: 576px) {
+@media (min-width: 647px) {
   .dashboard-card-deck .dashboard-card {
     display: flex;
     flex-direction: column;
-    margin-right: 0.25rem;
-    margin-left: 0.25rem;
     width: calc(50% - 0.5rem);
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 888px) {
   .dashboard-card-deck .dashboard-card {
     width: calc(33.333% - 0.5rem);
   }
 }
+@media (min-width: 1147px) {
+  .dashboard-card-deck .dashboard-card {
+    width: calc(25% - 0.5rem);
+  }
+}
+@media (min-width: 1407px) {
+  .dashboard-card-deck .dashboard-card {
+    width: calc(20% - 0.5rem);
+  }
+}
 @media (min-width: 768px) {
-  #block-region-side-post .dashboard-card-deck,
-  #block-region-side-pre .dashboard-card-deck {
-    margin: 0;
-    height: unset;
+  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 {
+    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 {
+    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 {
+    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 {
+    width: calc(25% - 0.5rem);
   }
+}
+@media (min-width: 768px) {
+  body.used-region-side-pre.used-region-side-post .dashboard-card-deck .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 {
+    width: calc(50% - 0.5rem);
+  }
+}
+@media (min-width: 1680px) {
+  body.used-region-side-pre.used-region-side-post .dashboard-card-deck .dashboard-card {
+    width: calc(33.333% - 0.5rem);
+  }
+}
+/* stylelint-disable declaration-no-important */
+@media (min-width: 768px) {
   #block-region-side-post .dashboard-card-deck .dashboard-card,
   #block-region-side-pre .dashboard-card-deck .dashboard-card {
-    width: 100%;
-    margin-left: 0;
-    margin-right: 0;
+    width: calc(100% - 0.5rem) !important;
   }
 }
+.block_docked .dashboard-card {
+  width: calc(100% - 0.5rem) !important;
+}
+/* stylelint-enable */
 .dashboard-card-img {
   height: 7rem;
   background-position: center;