MDL-78999 theme: Fixed site logo issue in small screens

theme/boost/scss/moodle/drawer.scss

@@ -223,6 +223,12 @@ $right-drawer-width: 320px;
             bottom: 0;
         }
     }
+    &.drawer-primary {
+        .drawertoggle {
+            margin-right: 16px;
+            margin-left: 5px;
+        }
+    }
 }
 
 .drawer {
@@ -258,6 +264,12 @@ $right-drawer-width: 320px;
     height: $navbar-height;
     display: flex;
     align-items: center;
+    .sitename {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        margin-right: 16px;
+    }
 }
 .drawer.scrolled .drawerheader {
     box-shadow: 0 8px 11px -7px $drawer-shadow-color;

theme/boost/scss/moodle/navbar.scss

@@ -169,6 +169,17 @@
 .pagelayout-embedded #page {
     margin-top: 0;
 }
+.navbar-bootswatch {
+    .navbar-brand {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        .sitename {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+    }
+}
 
 // Make navbar height available for non-sass use.
 :root {

theme/boost/style/moodle.css

@@ -30090,6 +30090,10 @@ body.drawer-ease {
 .drawer.drawer-bottom.show {
   bottom: 0;
 }
+.drawer.drawer-primary .drawertoggle {
+  margin-right: 16px;
+  margin-left: 5px;
+}
 
 @media (min-width: 992px) {
   .drawer#theme_boost-drawers-blocks:focus-within {
@@ -30110,6 +30114,12 @@ body.drawer-ease {
   display: flex;
   align-items: center;
 }
+.drawerheader .sitename {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-right: 16px;
+}
 
 .drawer.scrolled .drawerheader {
   box-shadow: 0 8px 11px -7px rgba(0, 0, 0, 0.25);
@@ -30195,6 +30205,12 @@ body.drawer-ease {
     bottom: 0;
   }
 }
+@media (max-width: 991.98px) {
+  .drawer-md.drawer-primary .drawertoggle {
+    margin-right: 16px;
+    margin-left: 5px;
+  }
+}
 @media (max-width: 767.98px) {
   .drawer-sm {
     display: block;
@@ -30275,6 +30291,12 @@ body.drawer-ease {
     bottom: 0;
   }
 }
+@media (max-width: 767.98px) {
+  .drawer-sm.drawer-primary .drawertoggle {
+    margin-right: 16px;
+    margin-left: 5px;
+  }
+}
 .drawercontent {
   position: relative;
   z-index: -1;
@@ -37695,6 +37717,16 @@ div.editor_atto_toolbar button .icon {
   margin-top: 0;
 }
 
+.navbar-bootswatch .navbar-brand {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.navbar-bootswatch .navbar-brand .sitename {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 :root {
   --navbar-height: 60px;
 }

theme/boost/templates/drawer.mustache

@@ -47,6 +47,7 @@
         >
             {{#pix}} e/cancel, core {{/pix}}
         </button>
+        {{$drawerheading}}{{/drawerheading}}
         <div class="drawerheadercontent hidden">
             {{$drawerheadercontent}}{{/drawerheadercontent}}
         </div>

theme/boost/templates/primary-drawer-mobile.mustache

@@ -55,7 +55,7 @@
             <img src="{{output.get_compact_logo_url}}" class="logo py-1 h-100" alt="{{sitename}}">
         {{/ output.should_display_navbar_logo }}
         {{^ output.should_display_navbar_logo }}
-            {{{ sitename }}}
+            <span class="sitename" title="{{{ sitename }}}">{{{ sitename }}}</span>
         {{/ output.should_display_navbar_logo }}
     {{/drawerheading}}
     {{$drawercontent}}

theme/classic/style/moodle.css

@@ -30090,6 +30090,10 @@ body.drawer-ease {
 .drawer.drawer-bottom.show {
   bottom: 0;
 }
+.drawer.drawer-primary .drawertoggle {
+  margin-right: 16px;
+  margin-left: 5px;
+}
 
 @media (min-width: 992px) {
   .drawer#theme_boost-drawers-blocks:focus-within {
@@ -30110,6 +30114,12 @@ body.drawer-ease {
   display: flex;
   align-items: center;
 }
+.drawerheader .sitename {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-right: 16px;
+}
 
 .drawer.scrolled .drawerheader {
   box-shadow: 0 8px 11px -7px rgba(0, 0, 0, 0.25);
@@ -30195,6 +30205,12 @@ body.drawer-ease {
     bottom: 0;
   }
 }
+@media (max-width: 991.98px) {
+  .drawer-md.drawer-primary .drawertoggle {
+    margin-right: 16px;
+    margin-left: 5px;
+  }
+}
 @media (max-width: 767.98px) {
   .drawer-sm {
     display: block;
@@ -30275,6 +30291,12 @@ body.drawer-ease {
     bottom: 0;
   }
 }
+@media (max-width: 767.98px) {
+  .drawer-sm.drawer-primary .drawertoggle {
+    margin-right: 16px;
+    margin-left: 5px;
+  }
+}
 .drawercontent {
   position: relative;
   z-index: -1;
@@ -37629,6 +37651,16 @@ div.editor_atto_toolbar button .icon {
   margin-top: 0;
 }
 
+.navbar-bootswatch .navbar-brand {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.navbar-bootswatch .navbar-brand .sitename {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 :root {
   --navbar-height: 50px;
 }

theme/classic/templates/navbar.mustache

@@ -44,7 +44,7 @@
             <img src="{{output.get_compact_logo_url}}" class="logo mr-1" alt="{{sitename}}">
         {{/ output.should_display_navbar_logo }}
         {{^ output.should_display_navbar_logo }}
-            {{{ sitename }}}
+            <span class="sitename">{{{ sitename }}}</span>
         {{/ output.should_display_navbar_logo }}
     </a>