From 8ccc266f4d518456e053b4e719e8eb4d43a11a3a Mon Sep 17 00:00:00 2001
From: Bas Brands <bas@moodle.com>
Date: Tue, 8 Feb 2022 17:07:39 +0100
Subject: [PATCH] MDL-73792 theme_boost: drawer layout spacing for mobile

---
 theme/boost/lib.php                            |  3 ++-
 theme/boost/scss/moodle/layout.scss            | 13 +++++++------
 .../boost/scss/moodle/secondarynavigation.scss |  8 +++++++-
 theme/boost/style/moodle.css                   | 18 +++++++++++-------
 theme/classic/style/moodle.css                 | 18 +++++++++++-------
 5 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/theme/boost/lib.php b/theme/boost/lib.php
index 04b56d332a7..7e98100f6d8 100644
--- a/theme/boost/lib.php
+++ b/theme/boost/lib.php
@@ -49,9 +49,10 @@ function theme_boost_get_extra_scss($theme) {
 
     // Sets the background image, and its settings.
     if (!empty($imageurl)) {
+        $content .= '@media (min-width: 768px) {';
         $content .= 'body { ';
         $content .= "background-image: url('$imageurl'); background-size: cover;";
-        $content .= ' }';
+        $content .= ' } }';
     }
 
     // Sets the login background image.
diff --git a/theme/boost/scss/moodle/layout.scss b/theme/boost/scss/moodle/layout.scss
index cbcbc5e9970..153050c0244 100644
--- a/theme/boost/scss/moodle/layout.scss
+++ b/theme/boost/scss/moodle/layout.scss
@@ -35,8 +35,6 @@
 
 #page.drawers {
     margin-top: $navbar-height;
-    padding-left: 15px;
-    padding-right: 15px;
     @include thin-scrolls($gray-100);
     .main-inner {
         max-width: 100%;
@@ -49,10 +47,6 @@
         margin-bottom: 3rem;
         flex: 1 0 auto;
     }
-    div[role="main"] {
-        padding-left: 15px;
-        padding-right: 15px;
-    }
     .activity-header {
         margin-left: 15px;
         margin-right: 15px;
@@ -182,6 +176,13 @@
     #page.drawers {
         padding-left: 3rem;
         padding-right: 3rem;
+        .main-inner {
+            padding: 1.5rem 0.5rem;
+        }
+        div[role="main"] {
+            padding-left: 15px;
+            padding-right: 15px;
+        }
     }
 }
 
diff --git a/theme/boost/scss/moodle/secondarynavigation.scss b/theme/boost/scss/moodle/secondarynavigation.scss
index e9d979932ca..32a50bbfbd9 100644
--- a/theme/boost/scss/moodle/secondarynavigation.scss
+++ b/theme/boost/scss/moodle/secondarynavigation.scss
@@ -1,7 +1,7 @@
 .secondary-navigation {
     max-width: $course-content-maxwidth;
     margin: 0 auto;
-    padding: 0 15px 15px;
+    padding-bottom: 15px;
     .navigation {
         border-top: 1px solid $nav-tabs-border-color;
         border-bottom: 1px solid $nav-tabs-border-color;
@@ -15,3 +15,9 @@
         }
     }
 }
+
+@include media-breakpoint-up(md) {
+    .secondary-navigation {
+        padding: 0 15px 15px;
+    }
+}
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 16a30897d1d..50bd6466191 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -20396,8 +20396,6 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
 
 #page.drawers {
   margin-top: 60px;
-  padding-left: 15px;
-  padding-right: 15px;
   scrollbar-width: thin;
   scrollbar-color: #6a737b #f8f9fa; }
   #page.drawers::-webkit-scrollbar {
@@ -20420,9 +20418,6 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
     margin-top: 0.5rem;
     margin-bottom: 3rem;
     flex: 1 0 auto; }
-  #page.drawers div[role="main"] {
-    padding-left: 15px;
-    padding-right: 15px; }
   #page.drawers .activity-header {
     margin-left: 15px;
     margin-right: 15px; }
@@ -20510,7 +20505,12 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
 @media (min-width: 768px) {
   #page.drawers {
     padding-left: 3rem;
-    padding-right: 3rem; } }
+    padding-right: 3rem; }
+    #page.drawers .main-inner {
+      padding: 1.5rem 0.5rem; }
+    #page.drawers div[role="main"] {
+      padding-left: 15px;
+      padding-right: 15px; } }
 
 @media (min-width: 992px) {
   .drawer-left,
@@ -21612,7 +21612,7 @@ div.editor_atto_toolbar button .icon {
 .secondary-navigation {
   max-width: 830px;
   margin: 0 auto;
-  padding: 0 15px 15px; }
+  padding-bottom: 15px; }
   .secondary-navigation .navigation {
     border-top: 1px solid #dee2e6;
     border-bottom: 1px solid #dee2e6;
@@ -21623,6 +21623,10 @@ div.editor_atto_toolbar button .icon {
       .secondary-navigation .navigation .nav-tabs .nav-link {
         border-radius: initial; }
 
+@media (min-width: 768px) {
+  .secondary-navigation {
+    padding: 0 15px 15px; } }
+
 .tertiary-navigation {
   padding-top: 10px; }
   .tertiary-navigation .navitem {
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 1458269e0da..23f9264d9f3 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -20342,8 +20342,6 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
 
 #page.drawers {
   margin-top: 50px;
-  padding-left: 15px;
-  padding-right: 15px;
   scrollbar-width: thin;
   scrollbar-color: #6a737b #f8f9fa; }
   #page.drawers::-webkit-scrollbar {
@@ -20366,9 +20364,6 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
     margin-top: 0.5rem;
     margin-bottom: 3rem;
     flex: 1 0 auto; }
-  #page.drawers div[role="main"] {
-    padding-left: 15px;
-    padding-right: 15px; }
   #page.drawers .activity-header {
     margin-left: 15px;
     margin-right: 15px; }
@@ -20456,7 +20451,12 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
 @media (min-width: 768px) {
   #page.drawers {
     padding-left: 3rem;
-    padding-right: 3rem; } }
+    padding-right: 3rem; }
+    #page.drawers .main-inner {
+      padding: 1.5rem 0.5rem; }
+    #page.drawers div[role="main"] {
+      padding-left: 15px;
+      padding-right: 15px; } }
 
 @media (min-width: 992px) {
   .drawer-left,
@@ -21558,7 +21558,7 @@ div.editor_atto_toolbar button .icon {
 .secondary-navigation {
   max-width: 830px;
   margin: 0 auto;
-  padding: 0 15px 15px; }
+  padding-bottom: 15px; }
   .secondary-navigation .navigation {
     border-top: 1px solid #dee2e6;
     border-bottom: 1px solid #dee2e6;
@@ -21569,6 +21569,10 @@ div.editor_atto_toolbar button .icon {
       .secondary-navigation .navigation .nav-tabs .nav-link {
         border-radius: initial; }
 
+@media (min-width: 768px) {
+  .secondary-navigation {
+    padding: 0 15px 15px; } }
+
 .tertiary-navigation {
   padding-top: 10px; }
   .tertiary-navigation .navitem {