From 5f18da120e41c8ba1f4f2170cf26f9fa0123d0fe Mon Sep 17 00:00:00 2001 From: Frederic Massart Date: Fri, 2 Sep 2016 12:50:59 +0800 Subject: [PATCH] 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 --- theme/noname/scss/moodle/core.scss | 9 ++++ theme/noname/scss/moodle/icons.scss | 4 +- theme/noname/scss/moodle/modules.scss | 7 ++- theme/noname/scss/moodle/search.scss | 25 +++++++--- theme/noname/templates/columns1.mustache | 29 +----------- theme/noname/templates/columns2.mustache | 29 +----------- theme/noname/templates/columns3.mustache | 29 +----------- .../templates/core/custom_menu_item.mustache | 2 +- theme/noname/templates/header.mustache | 47 +++++++++++++++++++ 9 files changed, 84 insertions(+), 97 deletions(-) create mode 100644 theme/noname/templates/header.mustache diff --git a/theme/noname/scss/moodle/core.scss b/theme/noname/scss/moodle/core.scss index 2051604338e..fc87d8ad566 100644 --- 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 afa13595859..f67f6bf8ec4 100644 --- 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 7cda361fd10..9424080f1d6 100644 --- 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 fcbf0e535c0..8ee8dd55559 100644 --- 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 af1221e6756..dc721b92ce8 100644 --- a/theme/noname/templates/columns1.mustache +++ b/theme/noname/templates/columns1.mustache @@ -13,34 +13,7 @@ {{{ output.standard_top_of_body_html }}} - + {{>theme_noname/header}}
{{{ output.full_header }}} diff --git a/theme/noname/templates/columns2.mustache b/theme/noname/templates/columns2.mustache index 72586da1a5f..6c614c0f3c7 100644 --- a/theme/noname/templates/columns2.mustache +++ b/theme/noname/templates/columns2.mustache @@ -13,34 +13,7 @@ {{{ output.standard_top_of_body_html }}} - + {{>theme_noname/header}}
{{{ output.full_header }}} diff --git a/theme/noname/templates/columns3.mustache b/theme/noname/templates/columns3.mustache index c09b8d7a81d..61595ba497a 100644 --- a/theme/noname/templates/columns3.mustache +++ b/theme/noname/templates/columns3.mustache @@ -13,34 +13,7 @@ {{{ output.standard_top_of_body_html }}} - + {{>theme_noname/header}}
{{{ output.full_header }}} diff --git a/theme/noname/templates/core/custom_menu_item.mustache b/theme/noname/templates/core/custom_menu_item.mustache index 28def185b65..9a35f5745a7 100644 --- a/theme/noname/templates/core/custom_menu_item.mustache +++ b/theme/noname/templates/core/custom_menu_item.mustache @@ -1,7 +1,7 @@ {{^divider}} {{#haschildren}} -
diff --git a/theme/noname/templates/header.mustache b/theme/noname/templates/header.mustache new file mode 100644 index 00000000000..2b6168aaae1 --- /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 . +}} +{{! + Page header. +}} + -- 2.43.0