MDL-68828 theme_classic: fix for mobile
authorBas Brands <bas@moodle.com>
Tue, 26 May 2020 09:44:54 +0000 (11:44 +0200)
committerBas Brands <bas@moodle.com>
Tue, 26 May 2020 12:08:05 +0000 (14:08 +0200)
- setting a max width so the page does not overflow its container on
mobile
- fixing dashboard cards to be 100% wide on mobile

theme/classic/scss/classic/post.scss
theme/classic/style/moodle.css

index dc6079d..83ad67b 100644 (file)
     .blockcolumn,
     .region-main {
         flex: 0 0 100%;
+        max-width: 100%;
         padding: 0 1rem;
         margin-bottom: 1rem;
     }
     @include page_layout(20%);
 }
 
-.block_myoverview,
-.block_recentlyaccesseditems {
-    .dashboard-card-deck {
-        .dashboard-card {
-            width: calc(33.33% - #{$card-gutter});
+@include media-breakpoint-up(sm) {
+    .block_myoverview,
+    .block_recentlyaccesseditems {
+        .dashboard-card-deck {
+            .dashboard-card {
+                width: calc(33.33% - #{$card-gutter});
+            }
         }
     }
 }
index 586cb36..829db41 100644 (file)
@@ -19029,6 +19029,7 @@ body {
   .blockcolumn,
   .region-main {
     flex: 0 0 100%;
+    max-width: 100%;
     padding: 0 1rem;
     margin-bottom: 1rem; } }
 
@@ -19212,9 +19213,10 @@ body {
     padding: 0 1rem;
     max-width: 20%; } }
 
-.block_myoverview .dashboard-card-deck .dashboard-card,
-.block_recentlyaccesseditems .dashboard-card-deck .dashboard-card {
-  width: calc(33.33% - 0.5rem); }
+@media (min-width: 576px) {
+  .block_myoverview .dashboard-card-deck .dashboard-card,
+  .block_recentlyaccesseditems .dashboard-card-deck .dashboard-card {
+    width: calc(33.33% - 0.5rem); } }
 
 @media (min-width: 768px) {
   .blockcolumn .dashboard-card-deck {