MDL-71293 theme_boost: improve navbar for new navigation

lib/outputrenderers.php

@@ -3330,7 +3330,7 @@ EOD;
             return html_writer::div(
                 html_writer::span(
                     $returnstr,
-                    'login'
+                    'login nav-link'
                 ),
                 $usermenuclasses
             );
@@ -3347,7 +3347,7 @@ EOD;
             return html_writer::div(
                 html_writer::span(
                     $returnstr,
-                    'login'
+                    'login nav-link'
                 ),
                 $usermenuclasses
             );
@@ -3419,7 +3419,8 @@ EOD;
 
         $am = new action_menu();
         $am->set_menu_trigger(
-            $returnstr
+            $returnstr,
+            'nav-link'
         );
         $am->set_action_label(get_string('usermenu'));
         $am->set_alignment(action_menu::TR, action_menu::BR);

lib/templates/action_menu.mustache

@@ -30,7 +30,7 @@
         }
     }
 }}
-<div class="action-menu {{classes}} d-inline"{{#attributes}} {{name}}="{{value}}"{{/attributes}}>
+<div class="action-menu {{classes}}"{{#attributes}} {{name}}="{{value}}"{{/attributes}}>
     {{#primary}}
 
         <div class="{{classes}} d-flex "{{#attributes}} {{name}}="{{value}}"{{/attributes}}>

lib/templates/action_menu_trigger.mustache

@@ -78,7 +78,7 @@
     }
 }}
 <div class="dropdown{{^secondary.items}} hidden{{/secondary.items}}">
-    <a href="#" tabindex="0" class="d-inline-block {{triggerextraclasses}} dropdown-toggle icon-no-margin" id="action-menu-toggle-{{instance}}" aria-label="{{title}}" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" aria-controls="action-menu-{{instance}}-menu">
+    <a href="#" tabindex="0" class="{{triggerextraclasses}} dropdown-toggle icon-no-margin" id="action-menu-toggle-{{instance}}" aria-label="{{title}}" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" aria-controls="action-menu-{{instance}}-menu">
         {{{actiontext}}}
         {{{menutrigger}}}
             {{#icon}}

lib/templates/custom_menu_item.mustache

@@ -50,7 +50,7 @@
 {{/haschildren}}
 {{^haschildren}}
 <li class="nav-item">
-    <a class="nav-item nav-link" href="{{{url}}}" {{#title}}title="{{{title}}}"{{/title}}>{{{text}}}</a>
+    <a class="nav-link" href="{{{url}}}" {{#title}}title="{{{title}}}"{{/title}}>{{{text}}}</a>
 </li>
 {{/haschildren}}
 {{/divider}}

lib/templates/search_input_navbar.mustache

@@ -70,7 +70,7 @@
         </form>
     </div>
     <a
-        class="btn btn-open"
+        class="btn btn-open nav-link"
         data-toggle="collapse"
         data-action="opensearch"
         href="#searchform-navbar"

message/templates/message_popover.mustache

@@ -36,7 +36,7 @@
 
 }}
 <div class="popover-region collapsed" data-region="popover-region-messages">
-    <a id="message-drawer-toggle-{{uniqid}}" class="nav-link d-inline-block popover-region-toggle position-relative icon-no-margin" href="#"
+    <a id="message-drawer-toggle-{{uniqid}}" class="nav-link popover-region-toggle position-relative icon-no-margin" href="#"
             role="button">
         {{#pix}} t/message, core, {{#str}} togglemessagemenu, message {{/str}} {{/pix}}
         <div class="count-container {{^unreadcount}}hidden{{/unreadcount}}" data-region="count-container"

theme/boost/scss/moodle.scss

@@ -11,7 +11,6 @@ $breadcrumb-divider-rtl: "◀" !default;
 @import "moodle/icons";
 @import "moodle/admin";
 @import "moodle/blocks";
-@import "moodle/bootswatch";
 @import "moodle/calendar";
 @import "moodle/contentbank";
 @import "moodle/course";
@@ -43,3 +42,4 @@ $breadcrumb-divider-rtl: "◀" !default;
 @import "moodle/prefixes";
 @import "moodle/atto";
 @import "moodle/toasts";
+@import "moodle/navbar";

theme/boost/scss/moodle/bootswatch.scss

@@ -1,7 +0,0 @@
-// Adjustments to make bootstrap 4 work better with some variables from bootstrap 3 bootswatches
-
-$navbar-height: 50px !default;
-
-.navbar {
-    max-height: $navbar-height;
-}

theme/boost/scss/moodle/navbar.scss

@@ -0,0 +1,45 @@
+.navbar.fixed-top {
+    padding-top: 0;
+    padding-bottom: 0;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+    align-items: stretch;
+    height: $navbar-height;
+
+    .navbar-brand {
+        .logo {
+            max-height: calc(#{$navbar-height} - (#{$primary-nav-padding-y} * 2));
+        }
+    }
+    .nav-link {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        white-space: nowrap;
+    }
+    .divider {
+        width: 1px;
+        background-color: $gray-300;
+    }
+
+    #usernavigation .nav-link {
+        padding: 0 $primary-nav-padding-x;
+    }
+    .usermenu {
+        display: flex;
+        .action-menu {
+            display: flex;
+            align-items: center;
+        }
+        .dropdown-toggle::after {
+            display: none;
+        }
+    }
+    .moodle-actionmenu .menubar,
+    .action-menu-trigger .dropdown {
+        height: 100%;
+        display: flex;
+    }
+}
+#page {
+    margin-top: $navbar-height;
+}

theme/boost/scss/moodle/popover-region.scss

@@ -199,7 +199,7 @@ $content-header-footer-height: $region-header-height + $region-footer-height;
     }
 
     .popover-region-container {
-        top: $line-height-base * 1.4 * $font-size-base;
+        top: calc(#{$navbar-height} - (#{$spacer} / 2));
     }
 
 }

theme/boost/scss/moodle/search.scss

@@ -51,7 +51,6 @@
     }
 }
 
-@include media-breakpoint-down(md) {
 .simplesearchform .collapse.show,
 .simplesearchform .collapsing {
     position: absolute;
@@ -68,15 +67,6 @@
         margin-right: auto;
     }
 }
-}
-.navbar.navbar-light {
-    .simplesearchform .btn-open {
-        color: $navbar-light-color;
-        &:hover {
-            color: $navbar-light-hover-color;
-        }
-    }
-}
 
 .search-areas-actions {
     margin-bottom: $spacer;

theme/boost/scss/moodle/variables.scss

@@ -18,3 +18,8 @@ $state-warning-border: theme-color-level("warning", -10) !default;
 
 $state-danger-bg: theme-color-level("danger", -10) !default;
 $state-danger-border: theme-color-level("danger", -9) !default;
+
+$primary-nav-padding-y: ($spacer / 4) !default;
+$primary-nav-padding-x: ($spacer / 2) !default;
+
+$navbar-height: 50px !default;

theme/boost/style/moodle.css

@@ -12818,9 +12818,6 @@ input[disabled] {
   .pagelayout-embedded .embedded-blocks {
     width: 100%; } }
 
-.navbar {
-  max-height: 50px; }
-
 /* calendar.less */
 .calendar_event_category {
   background-color: #e0cbe0; }
@@ -16348,7 +16345,6 @@ body.path-question-type .mform fieldset.hidden {
   transition: none;
   width: inherit; }
 
-@media (max-width: 991.98px) {
 .simplesearchform .collapse.show,
 .simplesearchform .collapsing {
   position: absolute;
@@ -16363,12 +16359,7 @@ body.path-question-type .mform fieldset.hidden {
   .simplesearchform .collapsing .form-inline {
     width: auto;
     margin-left: auto;
-      margin-right: auto; } }
+    margin-right: auto; }
-
-.navbar.navbar-light .simplesearchform .btn-open {
-  color: rgba(0, 0, 0, 0.6); }
-  .navbar.navbar-light .simplesearchform .btn-open:hover {
-    color: rgba(0, 0, 0, 0.9); }
 
 .search-areas-actions {
   margin-bottom: 1rem; }
@@ -19007,7 +18998,7 @@ body {
   right: 0; }
 
 .navbar .popover-region-container {
-  top: 1.96875rem; }
+  top: calc(50px - (1rem / 2)); }
 
 .content-item-container {
   width: 100%;
@@ -19753,6 +19744,39 @@ div.editor_atto_toolbar button .icon {
   .toast .close {
     color: inherit; }
 
+.navbar.fixed-top {
+  padding-top: 0;
+  padding-bottom: 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  align-items: stretch;
+  height: 50px; }
+  .navbar.fixed-top .navbar-brand .logo {
+    max-height: calc(50px - (0.25rem * 2)); }
+  .navbar.fixed-top .nav-link {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    white-space: nowrap; }
+  .navbar.fixed-top .divider {
+    width: 1px;
+    background-color: #dee2e6; }
+  .navbar.fixed-top #usernavigation .nav-link {
+    padding: 0 0.5rem; }
+  .navbar.fixed-top .usermenu {
+    display: flex; }
+    .navbar.fixed-top .usermenu .action-menu {
+      display: flex;
+      align-items: center; }
+    .navbar.fixed-top .usermenu .dropdown-toggle::after {
+      display: none; }
+  .navbar.fixed-top .moodle-actionmenu .menubar,
+  .navbar.fixed-top .action-menu-trigger .dropdown {
+    height: 100%;
+    display: flex; }
+
+#page {
+  margin-top: 50px; }
+
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale; }

theme/boost/templates/navbar-secure.mustache

@@ -28,23 +28,22 @@
         "sitename": "Moodle Site"
     }
 }}
-<nav class="fixed-top navbar navbar-light bg-white navbar-expand moodle-has-zindex" aria-label="{{#str}}navigation{{/str}}">
+<nav class="navbar fixed-top navbar-light bg-white navbar-expand" aria-label="{{#str}}sitemenubar, admin{{/str}}">
-
+    <div class="navbar-brand d-flex align-items-center m-1 p-0 aabtn">
         {{# output.should_display_navbar_logo }}
-            <span class="logo d-none d-sm-inline">
+            <img src="{{output.get_compact_logo_url}}" class="logo mr-1" alt="{{sitename}}">
-                <img src="{{output.get_compact_logo_url}}" alt="{{sitename}}">
-            </span>
         {{/ output.should_display_navbar_logo }}
-        <span class="site-name d-none d-md-inline">{{{ sitename }}}</span>
+        {{{ sitename }}}
+    </div>
 
     {{# output.secure_layout_language_menu }}
-        <ul class="navbar-nav d-none d-md-flex">
+    <ul class="nav navbar-nav language-menu my-1">
-            <!-- language_menu -->
         {{{ . }}}
     </ul>
     {{/ output.secure_layout_language_menu }}
+
     {{# output.secure_layout_login_info }}
-        <div class="ml-auto">
+    <div class="ml-auto nav-link">
         {{{ . }}}
     </div>
     {{/ output.secure_layout_login_info }}

theme/boost/templates/navbar.mustache

@@ -37,43 +37,35 @@
         "sitename": "Moodle Site"
     }
 }}
-<nav class="fixed-top navbar navbar-light bg-white navbar-expand moodle-has-zindex" aria-label="{{#str}}sitemenubar, admin{{/str}}">
+<nav class="navbar fixed-top navbar-light bg-white navbar-expand" aria-label="{{#str}}sitemenubar, admin{{/str}}">
 
-        <div data-region="drawer-toggle" class="d-inline-block mr-3">
+    <div class="d-flex" data-region="drawer-toggle">
-            <button aria-expanded="{{#navdraweropen}}true{{/navdraweropen}}{{^navdraweropen}}false{{/navdraweropen}}" aria-controls="nav-drawer" type="button" class="btn nav-link float-sm-left mr-1 btn-light bg-gray" data-action="toggle-drawer" data-side="left" data-preference="drawer-open-nav">{{#pix}}i/menubars{{/pix}}<span class="sr-only">{{#str}}sidepanel, core{{/str}}</span></button>
+        <button class="navbar-toggler aabtn d-block my-1 mr-2" aria-expanded="{{#navdraweropen}}true{{/navdraweropen}}{{^navdraweropen}}false{{/navdraweropen}}" aria-controls="nav-drawer" type="button" data-action="toggle-drawer" data-side="left" data-preference="drawer-open-nav">
+            <span class="navbar-toggler-icon"></span>
+            <span class="sr-only">{{#str}}sidepanel, core{{/str}}</span>
+        </button>
     </div>
 
-        <a href="{{{ config.wwwroot }}}" class="navbar-brand aabtn {{# output.should_display_navbar_logo }}has-logo{{/ output.should_display_navbar_logo }}
+    <a href="{{{ config.wwwroot }}}" class="navbar-brand d-flex align-items-center m-1 p-0 aabtn">
-            {{^ output.should_display_navbar_logo }}
-                d-none d-sm-inline
-            {{/ output.should_display_navbar_logo }}
-                ">
         {{# output.should_display_navbar_logo }}
-                <span class="logo d-none d-sm-inline">
+            <img src="{{output.get_compact_logo_url}}" class="logo mr-1" alt="{{sitename}}">
-                    <img src="{{output.get_compact_logo_url}}" alt="{{sitename}}">
-                </span>
         {{/ output.should_display_navbar_logo }}
-            <span class="site-name d-none d-md-inline">{{{ sitename }}}</span>
+        {{{ sitename }}}
     </a>
 
-        <ul class="navbar-nav d-none d-md-flex">
+    <ul class="navbar-nav d-none d-md-flex my-1 px-1">
         <!-- custom_menu -->
         {{{ output.custom_menu }}}
         <!-- page_heading_menu -->
         {{{ output.page_heading_menu }}}
     </ul>
-        <div class="ml-auto">
+
+    <div id="usernavigation" class="navbar-nav my-1 ml-auto">
+        <div class="divider border-left h-50 align-self-center mx-1"></div>
         {{{ output.search_box }}}
-        </div>
-        <ul class="nav navbar-nav usernav">
-            <!-- navbar_plugin_output -->
-            <li class="nav-item">
         {{{ output.navbar_plugin_output }}}
-            </li>
+        <div class="d-flex align-items-stretch usermenu-container" data-region="usermenu">
-            <!-- user_menu -->
-            <li class="nav-item align-items-center pl-2">
             {{{ output.user_menu }}}
-            </li>
+        </div>
-        </ul>
+    </div>
-        <!-- search_box -->
 </nav>

theme/classic/style/moodle.css

@@ -13040,9 +13040,6 @@ input[disabled] {
   .pagelayout-embedded .embedded-blocks {
     width: 100%; } }
 
-.navbar {
-  max-height: 50px; }
-
 /* calendar.less */
 .calendar_event_category {
   background-color: #e0cbe0; }
@@ -16581,7 +16578,6 @@ body.path-question-type .mform fieldset.hidden {
   transition: none;
   width: inherit; }
 
-@media (max-width: 991.98px) {
 .simplesearchform .collapse.show,
 .simplesearchform .collapsing {
   position: absolute;
@@ -16596,12 +16592,7 @@ body.path-question-type .mform fieldset.hidden {
   .simplesearchform .collapsing .form-inline {
     width: auto;
     margin-left: auto;
-      margin-right: auto; } }
+    margin-right: auto; }
-
-.navbar.navbar-light .simplesearchform .btn-open {
-  color: rgba(0, 0, 0, 0.6); }
-  .navbar.navbar-light .simplesearchform .btn-open:hover {
-    color: rgba(0, 0, 0, 0.9); }
 
 .search-areas-actions {
   margin-bottom: 1rem; }
@@ -19196,7 +19187,7 @@ body {
   right: 0; }
 
 .navbar .popover-region-container {
-  top: 1.96875rem; }
+  top: calc(50px - (1rem / 2)); }
 
 .content-item-container {
   width: 100%;
@@ -19944,6 +19935,39 @@ div.editor_atto_toolbar button .icon {
   .toast .close {
     color: inherit; }
 
+.navbar.fixed-top {
+  padding-top: 0;
+  padding-bottom: 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  align-items: stretch;
+  height: 50px; }
+  .navbar.fixed-top .navbar-brand .logo {
+    max-height: calc(50px - (0.25rem * 2)); }
+  .navbar.fixed-top .nav-link {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    white-space: nowrap; }
+  .navbar.fixed-top .divider {
+    width: 1px;
+    background-color: #dee2e6; }
+  .navbar.fixed-top #usernavigation .nav-link {
+    padding: 0 0.5rem; }
+  .navbar.fixed-top .usermenu {
+    display: flex; }
+    .navbar.fixed-top .usermenu .action-menu {
+      display: flex;
+      align-items: center; }
+    .navbar.fixed-top .usermenu .dropdown-toggle::after {
+      display: none; }
+  .navbar.fixed-top .moodle-actionmenu .menubar,
+  .navbar.fixed-top .action-menu-trigger .dropdown {
+    height: 100%;
+    display: flex; }
+
+#page {
+  margin-top: 50px; }
+
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale; }

theme/classic/templates/navbar.mustache

@@ -38,17 +38,11 @@
 }}
 <nav class="fixed-top navbar navbar-bootswatch navbar-expand moodle-has-zindex">
 
-        <a href="{{{ config.wwwroot }}}" class="navbar-brand aalink {{# output.should_display_navbar_logo }}has-logo{{/ output.should_display_navbar_logo }}
+    <a href="{{{ config.wwwroot }}}" class="navbar-brand d-flex align-items-center m-1 p-0 aabtn">
-            {{^ output.should_display_navbar_logo }}
-                d-none d-sm-inline
-            {{/ output.should_display_navbar_logo }}
-                ">
         {{# output.should_display_navbar_logo }}
-                <span class="logo d-none d-sm-inline">
+            <img src="{{output.get_compact_logo_url}}" class="logo mr-1" alt="{{sitename}}">
-                    <img src="{{output.get_compact_logo_url}}" alt="{{sitename}}">
-                </span>
         {{/ output.should_display_navbar_logo }}
-            <span class="site-name d-none d-md-inline">{{{ sitename }}}</span>
+        {{{ sitename }}}
     </a>
 
     <ul class="navbar-nav d-none d-md-flex">
@@ -57,19 +51,12 @@
         <!-- page_heading_menu -->
         {{{ output.page_heading_menu }}}
     </ul>
-        <div class="ml-auto">
+    <div id="usernavigation" class="navbar-nav my-1 ml-auto">
+        <div class="divider border-left h-50 align-self-center mx-1"></div>
         {{{ output.search_box }}}
-        </div>
-        <ul class="nav navbar-nav usernav">
-            <!-- navbar_plugin_output -->
-            <li class="nav-item">
         {{{ output.navbar_plugin_output }}}
-            </li>
+        <div class="d-flex align-items-stretch usermenu-container" data-region="usermenu">
-            <!-- user_menu -->
-            <li class="nav-item align-items-center">
             {{{ output.user_menu }}}
-            </li>
+        </div>
-        </ul>
+    </div>
-        <!-- search_box -->
 </nav>
-