MDL-55802 theme_noname: Navbar is responsive and better styled

Still not perfect, but better...

Conflicts:
	theme/noname/templates/columns1.mustache
	theme/noname/templates/columns2.mustache
	theme/noname/templates/columns3.mustache

Part of MDL-55071

diff --git a/theme/noname/scss/moodle/core.scss b/theme/noname/scss/moodle/core.scss
index 2051604..fc87d8a 100644 (file)
--- a/theme/noname/scss/moodle/core.scss
+++ b/theme/noname/scss/moodle/core.scss
@@ -1659,6 +1659,15 @@ img#persona_signin {
     }
 }
 
+/** Header. */
+header {
+    .collapse.in,
+    .collapsing {
+        display: block;
+        clear: both;
+    }
+}
+
 /** Header-bar styles **/
 .page-context-header {
     // We need to be explicit about the height of the header.

diff --git a/theme/noname/scss/moodle/icons.scss b/theme/noname/scss/moodle/icons.scss
index afa1359..f67f6bf 100644 (file)
--- a/theme/noname/scss/moodle/icons.scss
+++ b/theme/noname/scss/moodle/icons.scss
@@ -15,8 +15,8 @@ a:first-of-type > .icon {
 }
 
 // Fix the cog icon for an action menu.
-.action-menu > .dropdown {
-    margin-left: -0.5rem;
+.action-menu > .dropdown .icon {
+    margin-left: 0;
 }
 
 // Fix the first item in a drop down menu (it's a list of links and icons, but has been made vertical.

diff --git a/theme/noname/scss/moodle/modules.scss b/theme/noname/scss/moodle/modules.scss
index 7cda361..9424080 100644 (file)
--- a/theme/noname/scss/moodle/modules.scss
+++ b/theme/noname/scss/moodle/modules.scss
@@ -279,13 +279,12 @@ div#dock {
 // Usermenu
 .usermenu {
     .login {
-      //  color: $navbarText;
-        line-height: 40px;
+        line-height: 2.25rem;
         a {
-            color: $dropdown-link-color;
+            color: $link-color;
             &:hover,
             &:focus {
-                color: $dropdown-link-hover-color;
+                color: $link-hover-color;
                 text-decoration: underline;
             }
         }

diff --git a/theme/noname/scss/moodle/search.scss b/theme/noname/scss/moodle/search.scss
index fcbf0e5..8ee8dd5 100644 (file)
--- a/theme/noname/scss/moodle/search.scss
+++ b/theme/noname/scss/moodle/search.scss
@@ -12,22 +12,27 @@
 }
 
 .search-input-wrapper {
-    margin: 0 5px 0 2px;
+    margin: 0 $spacer 0 0;
     overflow: hidden;
     float: right;
     height: 100%;
     width: 16px;
     transition: width 0.5s ease, left 0.5s ease;
+    padding-top: $navbar-brand-padding-y;
+    padding-bottom: $navbar-brand-padding-y;
 }
 
 .search-input-wrapper > div {
     float: left;
-    margin: 10px 0 9px 0;
+    margin: 0;
+    .icon {
+        margin-right: 0;
+    }
 }
 
 .search-input-wrapper > form {
     opacity: 0;
-    margin: 5px 0 5px 25px;
+    margin-left: 25px;
     transition: opacity 0.5s ease-in-out;
 }
 
@@ -40,11 +45,19 @@
 }
 
 .search-input-wrapper.expanded {
-    width: 160px;
+    width: 162px;
 }
 
-.navbar .search-input-wrapper > form {
-    margin: 5px 0 5px 25px;
+@include media-breakpoint-down(xs) {
+    .search-input-wrapper {
+        > div {
+            margin: 0;
+        }
+        > form {
+            display: none;
+        }
+        margin: 0 $spacer 0 0;
+    }
 }
 
 .search-areas-actions {

diff --git a/theme/noname/templates/columns1.mustache b/theme/noname/templates/columns1.mustache
index af1221e..dc721b9 100644 (file)
--- a/theme/noname/templates/columns1.mustache
+++ b/theme/noname/templates/columns1.mustache
@@ -13,34 +13,7 @@
 
     {{{ output.standard_top_of_body_html }}}
 
-    <header role="banner" class="navbar navbar-light bg-faded navbar-static-top moodle-has-zindex">
-        <div class="clearfix">
-            <button class="navbar-toggler pull-xs-right hidden-sm-up" data-toggle="collapse" data-target="#bd-main-mav">☰<span class="sr-only">{{#str}}expand{{/str}}</span></button>
-        </div>
-
-        <a href="{{{ config.wwwroot }}}" class="navbar-brand">
-            {{# output.should_display_navbar_logo }}
-                <div class="logo">
-                    <img src="{{output.get_compact_logo_url}}" alt={{#quote}}{{sitename}}{{/quote}}>
-                </div>
-            {{/ output.should_display_navbar_logo }}
-            <div class="site-name">{{{ sitename }}}</div>
-        </a>
-
-        <!-- user_menu -->
-        {{{ output.user_menu }}}
-
-        <div class="collapse navbar-toggleable-xs" id="bd-main-nav">
-            <nav class="nav navbar-nav">
-                <!-- search_box -->
-                {{{ output.search_box }}}
-                <!-- custom_menu -->
-                {{{ output.custom_menu }}}
-                <!-- page_heading_menu -->
-                {{{ output.page_heading_menu }}}
-            </div>
-        </nav>
-    </header>
+    {{>theme_noname/header}}
 
     <div id="page" class="container-fluid">
         {{{ output.full_header }}}

diff --git a/theme/noname/templates/columns2.mustache b/theme/noname/templates/columns2.mustache
index 72586da..6c614c0 100644 (file)
--- a/theme/noname/templates/columns2.mustache
+++ b/theme/noname/templates/columns2.mustache
@@ -13,34 +13,7 @@
 
     {{{ output.standard_top_of_body_html }}}
 
-    <header role="banner" class="navbar navbar-light bg-faded navbar-static-top moodle-has-zindex">
-        <div class="clearfix">
-            <button class="navbar-toggler pull-xs-right hidden-sm-up" data-toggle="collapse" data-target="#bd-main-mav">☰<span class="sr-only">{{#str}}expand{{/str}}</span></button>
-        </div>
-
-        <a href="{{{ config.wwwroot }}}" class="navbar-brand">
-            {{# output.should_display_navbar_logo }}
-                <div class="logo">
-                    <img src="{{output.get_compact_logo_url}}" alt={{#quote}}{{sitename}}{{/quote}}>
-                </div>
-            {{/ output.should_display_navbar_logo }}
-            <div class="site-name">{{{ sitename }}}</div>
-        </a>
-
-        <!-- user_menu -->
-        {{{ output.user_menu }}}
-
-        <div class="collapse navbar-toggleable-xs" id="bd-main-nav">
-            <nav class="nav navbar-nav">
-                <!-- search_box -->
-                {{{ output.search_box }}}
-                <!-- custom_menu -->
-                {{{ output.custom_menu }}}
-                <!-- page_heading_menu -->
-                {{{ output.page_heading_menu }}}
-            </div>
-        </nav>
-    </header>
+    {{>theme_noname/header}}
 
     <div id="page" class="container-fluid">
         {{{ output.full_header }}}

diff --git a/theme/noname/templates/columns3.mustache b/theme/noname/templates/columns3.mustache
index c09b8d7..61595ba 100644 (file)
--- a/theme/noname/templates/columns3.mustache
+++ b/theme/noname/templates/columns3.mustache
@@ -13,34 +13,7 @@
 
     {{{ output.standard_top_of_body_html }}}
 
-    <header role="banner" class="navbar navbar-light bg-faded navbar-static-top moodle-has-zindex">
-        <div class="clearfix">
-            <button class="navbar-toggler pull-xs-right hidden-sm-up" data-toggle="collapse" data-target="#bd-main-mav">☰<span class="sr-only">{{#str}}expand{{/str}}</span></button>
-        </div>
-
-        <a href="{{{ config.wwwroot }}}" class="navbar-brand">
-            {{# output.should_display_navbar_logo }}
-                <div class="logo">
-                    <img src="{{output.get_compact_logo_url}}" alt={{#quote}}{{sitename}}{{/quote}}>
-                </div>
-            {{/ output.should_display_navbar_logo }}
-            <div class="site-name">{{{ sitename }}}</div>
-        </a>
-
-        <!-- user_menu -->
-        {{{ output.user_menu }}}
-
-        <div class="collapse navbar-toggleable-xs" id="bd-main-nav">
-            <nav class="nav navbar-nav">
-                <!-- search_box -->
-                {{{ output.search_box }}}
-                <!-- custom_menu -->
-                {{{ output.custom_menu }}}
-                <!-- page_heading_menu -->
-                {{{ output.page_heading_menu }}}
-            </div>
-        </nav>
-    </header>
+    {{>theme_noname/header}}
 
     <div id="page" class="container-fluid">
         {{{ output.full_header }}}

diff --git a/theme/noname/templates/core/custom_menu_item.mustache b/theme/noname/templates/core/custom_menu_item.mustache
index 28def18..9a35f57 100644 (file)
--- a/theme/noname/templates/core/custom_menu_item.mustache
+++ b/theme/noname/templates/core/custom_menu_item.mustache
@@ -1,7 +1,7 @@
 {{^divider}}
 {{#haschildren}}
 <span class="dropdown nav-item">
-    <a class="dropdown-toggle nav-link p-x-1" id="drop-down-{{uniqid}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">
+    <a class="dropdown-toggle nav-link" id="drop-down-{{uniqid}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">
         {{text}}
     </a>
     <div class="dropdown-menu" aria-labelledby="drop-down-{{uniqid}}">

diff --git a/theme/noname/templates/header.mustache b/theme/noname/templates/header.mustache
new file mode 100644 (file)
index 0000000..2b6168a
--- /dev/null
+++ b/theme/noname/templates/header.mustache
@@ -0,0 +1,47 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    Page header.
+}}
+<header role="banner" class="navbar navbar-light bg-faded navbar-static-top moodle-has-zindex">
+
+    <button class="navbar-toggler pull-xs-right hidden-sm-up" data-toggle="collapse" data-target="#bd-main-nav" aria-expanded="false" aria-controls="bd-main-nav" type="button">☰<span class="sr-only">{{#str}}expand{{/str}}</span></button>
+
+    <a href="{{{ config.wwwroot }}}" class="navbar-brand">
+        {{# output.should_display_navbar_logo }}
+            <div class="logo">
+                <img src="{{output.get_compact_logo_url}}" alt={{#quote}}{{sitename}}{{/quote}}>
+            </div>
+        {{/ output.should_display_navbar_logo }}
+        <div class="site-name">{{{ sitename }}}</div>
+    </a>
+
+    <!-- user_menu -->
+    {{{ output.user_menu }}}
+
+    <!-- search_box -->
+    {{{ output.search_box }}}
+
+    <div class="collapse navbar-toggleable-xs" id="bd-main-nav">
+        <nav class="nav navbar-nav">
+            <!-- custom_menu -->
+            {{{ output.custom_menu }}}
+            <!-- page_heading_menu -->
+            {{{ output.page_heading_menu }}}
+        </nav>
+    </div>
+</header>