execute('behat_general::i_hover', ['.icon[title=Search]', 'css_element']);
+ // Click the search icon.
+ $this->execute("behat_general::i_click_on", [get_string('togglesearch', 'core'), 'button']);
// Set the field.
$this->execute('behat_forms::i_set_the_field_to', ['q', $query]);
// Submit the form.
- $this->execute_script('return document.querySelector(".search-input-form.expanded").submit();');
+ $this->execute_script('return document.querySelector(".searchform-navbar").submit();');
}
/**
diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index 2ddbc8b4d9a9a..c3c8ab2e2510d 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -2042,6 +2042,15 @@ nav.navbar .logo img {
max-height: 35px;
}
+.nav.usernav {
+ .nav-item {
+ display: flex;
+ }
+ .usermenu .dropdown-toggle {
+ padding: 0 0.5rem;
+ }
+}
+
/** Header-bar styles **/
.page-context-header {
// We need to be explicit about the height of the header.
diff --git a/theme/boost/scss/moodle/popover-region.scss b/theme/boost/scss/moodle/popover-region.scss
index 2acb9c67933e3..8bf151b2f3d22 100644
--- a/theme/boost/scss/moodle/popover-region.scss
+++ b/theme/boost/scss/moodle/popover-region.scss
@@ -1,4 +1,3 @@
-$toggle-width: 25px;
$standard-border: 1px solid #ddd;
$region-container-height: 500px;
$region-container-width: 380px;
@@ -176,9 +175,6 @@ $content-header-footer-height: $region-header-height + $region-footer-height;
.navbar {
.popover-region {
- float: left;
- margin-right: 10px;
-
&.collapsed {
.popover-region-container {
@include invisible();
@@ -190,10 +186,6 @@ $content-header-footer-height: $region-header-height + $region-footer-height;
}
}
- .popover-region-toggle {
- width: $toggle-width;
- }
-
.count-container {
padding: 2px;
border-radius: 2px;
diff --git a/theme/boost/scss/moodle/search.scss b/theme/boost/scss/moodle/search.scss
index 89464189860d5..0512d270e4b76 100644
--- a/theme/boost/scss/moodle/search.scss
+++ b/theme/boost/scss/moodle/search.scss
@@ -11,54 +11,70 @@
font-style: italic;
}
-.search-input-wrapper {
- margin: 0 $spacer 0 0;
- overflow: hidden;
- float: right;
- width: 24px;
- transition: width 0.5s ease, left 0.5s ease;
- padding-top: 0;
- padding-bottom: 0;
-}
-
-.search-input-wrapper > div {
- float: left;
- margin: 0;
-
- .icon {
- margin-right: 0;
- margin-top: 10px;
+.simplesearchform {
+ .btn {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ }
+ .btn .icon {
+ margin: 0;
+ }
+ .btn-submit {
+ border-color: $input-border-color;
+ color: $gray-600;
+ }
+ .btn-close,
+ .btn-clear {
+ position: absolute;
+ top: 0;
+ right: 0;
+ color: $gray-600;
+ z-index: 4;
+ }
+ .btn-close {
+ right: 2.2rem;
+ }
+ .btn-submit {
+ background-color: $gray-100;
+ }
+ .withclear {
+ padding-right: 2rem;
+ }
+ .searchinput {
+ display: flex;
+ flex: 1 1 auto;
+ }
+ .collapsing {
+ height: inherit;
+ transition: none;
+ width: inherit;
}
}
-.search-input-wrapper > form {
- opacity: 0;
- margin-left: 25px;
- transition: opacity 0.5s ease-in-out;
-}
-
-.search-input-wrapper > form > input {
- margin: 0;
-}
-
-.search-input-wrapper form.expanded {
- opacity: 1;
-}
-
-.search-input-wrapper.expanded {
- width: 162px;
-}
-
-@include media-breakpoint-down(xs) {
- .search-input-wrapper {
- > div {
- margin: 0;
+@include media-breakpoint-down(md) {
+ .simplesearchform .collapse.show,
+ .simplesearchform .collapsing {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ display: flex;
+ background-color: $white;
+ z-index: $zindex-popover;
+ height: $navbar-height;
+ .form-inline {
+ width: auto;
+ margin-left: auto;
+ margin-right: auto;
}
-
- > form {
- display: none;
+ }
+}
+.navbar.navbar-light {
+ .simplesearchform .btn-open {
+ color: $navbar-light-color;
+ &:hover {
+ color: $navbar-light-hover-color;
}
- margin: 0 $spacer 0 0;
}
}
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 5819e8b3f0b56..f545b2c38666d 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -11308,6 +11308,12 @@ img#persona_signin {
nav.navbar .logo img {
max-height: 35px; }
+.nav.usernav .nav-item {
+ display: flex; }
+
+.nav.usernav .usermenu .dropdown-toggle {
+ padding: 0 0.5rem; }
+
/** Header-bar styles **/
.page-context-header {
overflow: hidden;
@@ -16196,43 +16202,64 @@ body.path-question-type .mform fieldset.hidden {
.search-results .result .filename {
font-style: italic; }
-.search-input-wrapper {
- margin: 0 1rem 0 0;
- overflow: hidden;
- float: right;
- width: 24px;
- transition: width 0.5s ease, left 0.5s ease;
- padding-top: 0;
- padding-bottom: 0; }
+.simplesearchform .btn {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem; }
-.search-input-wrapper > div {
- float: left;
+.simplesearchform .btn .icon {
margin: 0; }
- .search-input-wrapper > div .icon {
- margin-right: 0;
- margin-top: 10px; }
-.search-input-wrapper > form {
- opacity: 0;
- margin-left: 25px;
- transition: opacity 0.5s ease-in-out; }
+.simplesearchform .btn-submit {
+ border-color: #ced4da;
+ color: #6c757d; }
-.search-input-wrapper > form > input {
- margin: 0; }
+.simplesearchform .btn-close,
+.simplesearchform .btn-clear {
+ position: absolute;
+ top: 0;
+ right: 0;
+ color: #6c757d;
+ z-index: 4; }
-.search-input-wrapper form.expanded {
- opacity: 1; }
+.simplesearchform .btn-close {
+ right: 2.2rem; }
-.search-input-wrapper.expanded {
- width: 162px; }
+.simplesearchform .btn-submit {
+ background-color: #f8f9fa; }
-@media (max-width: 575.98px) {
- .search-input-wrapper {
- margin: 0 1rem 0 0; }
- .search-input-wrapper > div {
- margin: 0; }
- .search-input-wrapper > form {
- display: none; } }
+.simplesearchform .withclear {
+ padding-right: 2rem; }
+
+.simplesearchform .searchinput {
+ display: flex;
+ flex: 1 1 auto; }
+
+.simplesearchform .collapsing {
+ height: inherit;
+ transition: none;
+ width: inherit; }
+
+@media (max-width: 991.98px) {
+ .simplesearchform .collapse.show,
+ .simplesearchform .collapsing {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ display: flex;
+ background-color: #fff;
+ z-index: 1060;
+ height: 50px; }
+ .simplesearchform .collapse.show .form-inline,
+ .simplesearchform .collapsing .form-inline {
+ width: auto;
+ margin-left: auto;
+ margin-right: auto; } }
+
+.navbar.navbar-light .simplesearchform .btn-open {
+ color: rgba(0, 0, 0, 0.5); }
+ .navbar.navbar-light .simplesearchform .btn-open:hover {
+ color: rgba(0, 0, 0, 0.9); }
.search-areas-actions {
margin-bottom: 1rem; }
@@ -18745,18 +18772,12 @@ body {
.popover-region-content-container.loading .empty-message {
display: none; }
-.navbar .popover-region {
- float: left;
- margin-right: 10px; }
- .navbar .popover-region.collapsed .popover-region-container {
- opacity: 0;
- visibility: hidden;
- height: 0;
- overflow: hidden;
- transition: height 0.25s, opacity 101ms 0.25s, visibility 101ms 0.25s; }
-
-.navbar .popover-region-toggle {
- width: 25px; }
+.navbar .popover-region.collapsed .popover-region-container {
+ opacity: 0;
+ visibility: hidden;
+ height: 0;
+ overflow: hidden;
+ transition: height 0.25s, opacity 101ms 0.25s, visibility 101ms 0.25s; }
.navbar .count-container {
padding: 2px;
diff --git a/theme/boost/templates/navbar.mustache b/theme/boost/templates/navbar.mustache
index c93e68f0c0be5..e38b64a140d15 100644
--- a/theme/boost/templates/navbar.mustache
+++ b/theme/boost/templates/navbar.mustache
@@ -15,7 +15,27 @@
along with Moodle. If not, see
.
}}
{{!
- Page navbar.
+
+ @template theme_boost/navbar
+
+ This template renders the top navbar.
+
+ Example context (json):
+ {
+ "output": {
+ "should_display_navbar_logo": true,
+ "get_compact_logo_url": "http://placekitten.com/50/50",
+ "custom_menu": "
..",
+ "page_heading_menu": "
..",
+ "search_box": "
",
+ "navbar_plugin_output": "
Messaging
",
+ "user_menu": "
John Doe
"
+ },
+ "config": {
+ "wwwroot": "#"
+ },
+ "sitename": "Moodle Site"
+ }
}}
-
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 99d591e587178..9c588a8b9f77d 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -11518,6 +11518,12 @@ img#persona_signin {
nav.navbar .logo img {
max-height: 35px; }
+.nav.usernav .nav-item {
+ display: flex; }
+
+.nav.usernav .usermenu .dropdown-toggle {
+ padding: 0 0.5rem; }
+
/** Header-bar styles **/
.page-context-header {
overflow: hidden;
@@ -16421,43 +16427,64 @@ body.path-question-type .mform fieldset.hidden {
.search-results .result .filename {
font-style: italic; }
-.search-input-wrapper {
- margin: 0 1rem 0 0;
- overflow: hidden;
- float: right;
- width: 24px;
- transition: width 0.5s ease, left 0.5s ease;
- padding-top: 0;
- padding-bottom: 0; }
+.simplesearchform .btn {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem; }
-.search-input-wrapper > div {
- float: left;
+.simplesearchform .btn .icon {
margin: 0; }
- .search-input-wrapper > div .icon {
- margin-right: 0;
- margin-top: 10px; }
-.search-input-wrapper > form {
- opacity: 0;
- margin-left: 25px;
- transition: opacity 0.5s ease-in-out; }
+.simplesearchform .btn-submit {
+ border-color: #ced4da;
+ color: #6c757d; }
-.search-input-wrapper > form > input {
- margin: 0; }
+.simplesearchform .btn-close,
+.simplesearchform .btn-clear {
+ position: absolute;
+ top: 0;
+ right: 0;
+ color: #6c757d;
+ z-index: 4; }
-.search-input-wrapper form.expanded {
- opacity: 1; }
+.simplesearchform .btn-close {
+ right: 2.2rem; }
-.search-input-wrapper.expanded {
- width: 162px; }
+.simplesearchform .btn-submit {
+ background-color: #f8f9fa; }
-@media (max-width: 575.98px) {
- .search-input-wrapper {
- margin: 0 1rem 0 0; }
- .search-input-wrapper > div {
- margin: 0; }
- .search-input-wrapper > form {
- display: none; } }
+.simplesearchform .withclear {
+ padding-right: 2rem; }
+
+.simplesearchform .searchinput {
+ display: flex;
+ flex: 1 1 auto; }
+
+.simplesearchform .collapsing {
+ height: inherit;
+ transition: none;
+ width: inherit; }
+
+@media (max-width: 991.98px) {
+ .simplesearchform .collapse.show,
+ .simplesearchform .collapsing {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ display: flex;
+ background-color: #fff;
+ z-index: 1060;
+ height: 50px; }
+ .simplesearchform .collapse.show .form-inline,
+ .simplesearchform .collapsing .form-inline {
+ width: auto;
+ margin-left: auto;
+ margin-right: auto; } }
+
+.navbar.navbar-light .simplesearchform .btn-open {
+ color: rgba(0, 0, 0, 0.5); }
+ .navbar.navbar-light .simplesearchform .btn-open:hover {
+ color: rgba(0, 0, 0, 0.9); }
.search-areas-actions {
margin-bottom: 1rem; }
@@ -18926,18 +18953,12 @@ body {
.popover-region-content-container.loading .empty-message {
display: none; }
-.navbar .popover-region {
- float: left;
- margin-right: 10px; }
- .navbar .popover-region.collapsed .popover-region-container {
- opacity: 0;
- visibility: hidden;
- height: 0;
- overflow: hidden;
- transition: height 0.25s, opacity 101ms 0.25s, visibility 101ms 0.25s; }
-
-.navbar .popover-region-toggle {
- width: 25px; }
+.navbar .popover-region.collapsed .popover-region-container {
+ opacity: 0;
+ visibility: hidden;
+ height: 0;
+ overflow: hidden;
+ transition: height 0.25s, opacity 101ms 0.25s, visibility 101ms 0.25s; }
.navbar .count-container {
padding: 2px;
diff --git a/theme/classic/templates/navbar.mustache b/theme/classic/templates/navbar.mustache
index 5966aabb5f7b2..d2bbf79c9a2bc 100644
--- a/theme/classic/templates/navbar.mustache
+++ b/theme/classic/templates/navbar.mustache
@@ -57,16 +57,16 @@
{{{ output.page_heading_menu }}}
-