MDL-69454 core_search: consistent navbar search
authorBas Brands <bas@moodle.com>
Mon, 31 Aug 2020 08:11:30 +0000 (08:11 +0000)
committerEloy Lafuente (stronk7) <stronk7@moodle.org>
Wed, 23 Sep 2020 15:36:14 +0000 (17:36 +0200)
13 files changed:
lang/en/moodle.php
lib/outputrenderers.php
lib/templates/popover_region.mustache
lib/templates/search_input_navbar.mustache [new file with mode: 0644]
message/templates/message_popover.mustache
search/tests/behat/behat_search.php
theme/boost/scss/moodle/core.scss
theme/boost/scss/moodle/popover-region.scss
theme/boost/scss/moodle/search.scss
theme/boost/style/moodle.css
theme/boost/templates/navbar.mustache
theme/classic/style/moodle.css
theme/classic/templates/navbar.mustache

index 2d8bd72..602f1ba 100644 (file)
@@ -2096,6 +2096,7 @@ $string['today'] = 'Today';
 $string['todaylogs'] = 'Today\'s logs';
 $string['toeveryone'] = 'to everyone';
 $string['toggleemojipicker'] = 'Toggle emoji picker';
 $string['todaylogs'] = 'Today\'s logs';
 $string['toeveryone'] = 'to everyone';
 $string['toggleemojipicker'] = 'Toggle emoji picker';
+$string['togglesearch'] = 'Toggle search input';
 $string['toomanybounces'] = 'That email address has had too many bounces. You <b>must</b> change it to continue.';
 $string['toomanytags'] = 'This search included too many tags; some will have been ignored.';
 $string['toomanytoshow'] = 'There are too many users to show.';
 $string['toomanybounces'] = 'That email address has had too many bounces. You <b>must</b> change it to continue.';
 $string['toomanytags'] = 'This search included too many tags; some will have been ignored.';
 $string['toomanytoshow'] = 'There are too many users to show.';
index ba5366f..dd9bd24 100644 (file)
@@ -3222,31 +3222,13 @@ EOD;
             return '';
         }
 
             return '';
         }
 
-        if ($id == false) {
-            $id = uniqid();
-        } else {
-            // Needs to be cleaned, we use it for the input id.
-            $id = clean_param($id, PARAM_ALPHANUMEXT);
-        }
-
-        // JS to animate the form.
-        $this->page->requires->js_call_amd('core/search-input', 'init', array($id));
-
-        $searchicon = html_writer::tag('div', $this->pix_icon('a/search', get_string('search', 'search'), 'moodle'),
-            array('role' => 'button', 'tabindex' => 0));
-        $formattrs = array('class' => 'search-input-form', 'action' => $CFG->wwwroot . '/search/index.php');
-        $inputattrs = array('type' => 'text', 'name' => 'q', 'placeholder' => get_string('search', 'search'),
-            'size' => 13, 'tabindex' => -1, 'id' => 'id_q_' . $id, 'class' => 'form-control');
-
-        $contents = html_writer::tag('label', get_string('enteryoursearchquery', 'search'),
-            array('for' => 'id_q_' . $id, 'class' => 'accesshide')) . html_writer::empty_tag('input', $inputattrs);
-        if ($this->page->context && $this->page->context->contextlevel !== CONTEXT_SYSTEM) {
-            $contents .= html_writer::empty_tag('input', ['type' => 'hidden',
-                    'name' => 'context', 'value' => $this->page->context->id]);
-        }
-        $searchinput = html_writer::tag('form', $contents, $formattrs);
-
-        return html_writer::tag('div', $searchicon . $searchinput, array('class' => 'search-input-wrapper nav-link', 'id' => $id));
+        $data = [
+            'action' => new moodle_url('/search/index.php'),
+            'hiddenfields' => (object) ['name' => 'context', 'value' => $this->page->context->id],
+            'inputname' => 'q',
+            'searchstring' => get_string('search'),
+            ];
+        return $this->render_from_template('core/search_input_navbar', $data);
     }
 
     /**
     }
 
     /**
index 2047541..610681e 100644 (file)
@@ -36,7 +36,7 @@
 <div class="popover-region collapsed {{$classes}}{{/classes}}"
     {{$attributes}}{{/attributes}}
     data-region="popover-region">
 <div class="popover-region collapsed {{$classes}}{{/classes}}"
     {{$attributes}}{{/attributes}}
     data-region="popover-region">
-    <div class="popover-region-toggle nav-link"
+    <div class="popover-region-toggle nav-link icon-no-margin"
         data-region="popover-region-toggle"
         role="button"
         aria-controls="popover-region-container-{{uniqid}}"
         data-region="popover-region-toggle"
         role="button"
         aria-controls="popover-region-container-{{uniqid}}"
diff --git a/lib/templates/search_input_navbar.mustache b/lib/templates/search_input_navbar.mustache
new file mode 100644 (file)
index 0000000..4f07bc4
--- /dev/null
@@ -0,0 +1,116 @@
+{{!
+    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/>.
+}}
+{{!
+    @template core/search_input_navbar
+
+    Navbar search input template.
+
+    Example context (json):
+    {
+        "action": "https://moodle.local/admin/search.php",
+        "inputname": "search",
+        "searchstring": "Search",
+        "hiddenfields": [
+            {
+                "name": "cmid",
+                "value": "11"
+            }
+        ]
+    }
+}}
+<div id="searchinput-navbar-{{uniqid}}" class="simplesearchform">
+    <div class="collapse" id="searchform-navbar">
+        <form autocomplete="off" action="{{{ action }}}" method="get" accept-charset="utf-8" class="mform form-inline searchform-navbar">
+            {{#hiddenfields}}
+                <input type="hidden" name="{{ name }}" value="{{ value }}">
+            {{/hiddenfields}}
+            <div class="input-group">
+                <label for="searchinput-{{uniqid}}">
+                    <span class="sr-only">{{{ searchstring }}}</span>
+                </label>
+                    <input type="text"
+                       id="searchinput-{{uniqid}}"
+                       class="form-control withclear"
+                       placeholder="{{{ searchstring }}}"
+                       aria-label="{{{ searchstring }}}"
+                       name="{{{ inputname }}}"
+                       data-region="input"
+                       autocomplete="off"
+                    >
+                    <a class="btn btn-close"
+                        data-action="closesearch"
+                        data-toggle="collapse"
+                        href="#searchform-navbar"
+                        role="button"
+                    >
+                        {{#pix}} e/cancel, core {{/pix}}
+                        <span class="sr-only">{{#str}} closebuttontitle {{/str}}</span>
+                    </a>
+                <div class="input-group-append">
+                    <button type="submit" class="btn btn-submit" data-action="submit">
+                        {{#pix}} a/search, core {{/pix}}
+                        <span class="sr-only">{{{ searchstring }}}</span>
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+    <a
+        class="btn btn-open"
+        data-toggle="collapse"
+        data-action="opensearch"
+        href="#searchform-navbar"
+        role="button"
+        aria-expanded="false"
+        aria-controls="searchform-navbar"
+    >
+        <i class="icon fa fa-search fa-fw " aria-hidden="true"></i>
+        <span class="sr-only">{{#str}} togglesearch {{/str}}</span>
+    </a>
+</div>
+
+{{#js}}
+require(
+[
+    'jquery',
+],
+function(
+    $
+) {
+    var uniqid = "{{uniqid}}";
+    var container = $('#searchinput-navbar-' + uniqid);
+    var opensearch = container.find('[data-action="opensearch"]');
+    var input = container.find('[data-region="input"]');
+    var submit = container.find('[data-action="submit"');
+
+    submit.on('click', function(e) {
+        if (input.val() === '') {
+            e.preventDefault();
+        }
+    });
+    container.on('hidden.bs.collapse', function() {
+        opensearch.removeClass('d-none');
+        input.val('');
+    });
+    container.on('show.bs.collapse', function() {
+        opensearch.addClass('d-none');
+    });
+    container.on('shown.bs.collapse', function() {
+        input.focus();
+    });
+});
+{{/js}}
\ No newline at end of file
index bbebb96..73c7a85 100644 (file)
@@ -36,7 +36,7 @@
 
 }}
 <div class="popover-region collapsed" data-region="popover-region-messages">
 
 }}
 <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" href="#"
+    <a id="message-drawer-toggle-{{uniqid}}" class="nav-link d-inline-block 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"
             role="button">
         {{#pix}} t/message, core, {{#str}} togglemessagemenu, message {{/str}} {{/pix}}
         <div class="count-container {{^unreadcount}}hidden{{/unreadcount}}" data-region="count-container"
index ac11c88..a96536a 100644 (file)
@@ -44,14 +44,14 @@ class behat_search extends behat_base {
      * @param string $query Query to search for
      */
     public function i_search_for_using_the_header_global_search_box($query) {
      * @param string $query Query to search for
      */
     public function i_search_for_using_the_header_global_search_box($query) {
-        // Hover over the search icon.
-        $this->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.
 
         // 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();');
     }
 
     /**
     }
 
     /**
index 2ddbc8b..c3c8ab2 100644 (file)
@@ -2042,6 +2042,15 @@ nav.navbar .logo img {
     max-height: 35px;
 }
 
     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.
 /** Header-bar styles **/
 .page-context-header {
     // We need to be explicit about the height of the header.
index 2acb9c6..8bf151b 100644 (file)
@@ -1,4 +1,3 @@
-$toggle-width: 25px;
 $standard-border: 1px solid #ddd;
 $region-container-height: 500px;
 $region-container-width: 380px;
 $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 {
 
 .navbar {
     .popover-region {
-        float: left;
-        margin-right: 10px;
-
         &.collapsed {
             .popover-region-container {
                 @include invisible();
         &.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;
     .count-container {
         padding: 2px;
         border-radius: 2px;
index 8946418..0512d27 100644 (file)
     font-style: italic;
 }
 
     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;
     }
 }
 
     }
 }
 
index 5819e8b..f545b2c 100644 (file)
@@ -11308,6 +11308,12 @@ img#persona_signin {
 nav.navbar .logo img {
   max-height: 35px; }
 
 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;
 /** 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-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; }
   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; }
 
 .search-areas-actions {
   margin-bottom: 1rem; }
@@ -18745,18 +18772,12 @@ body {
   .popover-region-content-container.loading .empty-message {
     display: none; }
 
   .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;
 
 .navbar .count-container {
   padding: 2px;
index c93e68f..e38b64a 100644 (file)
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
     along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 }}
 {{!
-    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": "<li>..</li>",
+            "page_heading_menu": "<li>..</li>",
+            "search_box": "<div><input type='text'></div>",
+            "navbar_plugin_output": "<div class='dropdown'>Messaging</div>",
+            "user_menu": "<div class='dropdown'>John Doe</div>"
+        },
+        "config": {
+            "wwwroot": "#"
+        },
+        "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="fixed-top navbar navbar-light bg-white navbar-expand moodle-has-zindex" aria-label="{{#str}}sitemenubar, admin{{/str}}">
 
             <!-- page_heading_menu -->
             {{{ output.page_heading_menu }}}
         </ul>
             <!-- page_heading_menu -->
             {{{ output.page_heading_menu }}}
         </ul>
-        <ul class="nav navbar-nav ml-auto">
-            <li class="d-none d-lg-block">
-                {{{ output.search_box }}}
-            </li>
+        <div class="ml-auto">
+            {{{ output.search_box }}}
+        </div>
+        <ul class="nav navbar-nav usernav">
             <!-- navbar_plugin_output -->
             <li class="nav-item">
                 {{{ output.navbar_plugin_output }}}
             </li>
             <!-- user_menu -->
             <!-- navbar_plugin_output -->
             <li class="nav-item">
                 {{{ output.navbar_plugin_output }}}
             </li>
             <!-- user_menu -->
-            <li class="nav-item d-flex align-items-center">
+            <li class="nav-item align-items-center pl-2">
                 {{{ output.user_menu }}}
             </li>
         </ul>
         <!-- search_box -->
 </nav>
                 {{{ output.user_menu }}}
             </li>
         </ul>
         <!-- search_box -->
 </nav>
-
index 99d591e..9c588a8 100644 (file)
@@ -11518,6 +11518,12 @@ img#persona_signin {
 nav.navbar .logo img {
   max-height: 35px; }
 
 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;
 /** 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-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; }
   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; }
 
 .search-areas-actions {
   margin-bottom: 1rem; }
@@ -18926,18 +18953,12 @@ body {
   .popover-region-content-container.loading .empty-message {
     display: none; }
 
   .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;
 
 .navbar .count-container {
   padding: 2px;
index 5966aab..d2bbf79 100644 (file)
             <!-- page_heading_menu -->
             {{{ output.page_heading_menu }}}
         </ul>
             <!-- page_heading_menu -->
             {{{ output.page_heading_menu }}}
         </ul>
-        <ul class="nav navbar-nav ml-auto">
-            <li class="d-none d-lg-block">
-                {{{ output.search_box }}}
-            </li>
+        <div class="ml-auto">
+            {{{ output.search_box }}}
+        </div>
+        <ul class="nav navbar-nav usernav">
             <!-- navbar_plugin_output -->
             <li class="nav-item">
                 {{{ output.navbar_plugin_output }}}
             </li>
             <!-- user_menu -->
             <!-- navbar_plugin_output -->
             <li class="nav-item">
                 {{{ output.navbar_plugin_output }}}
             </li>
             <!-- user_menu -->
-            <li class="nav-item d-flex align-items-center">
+            <li class="nav-item align-items-center">
                 {{{ output.user_menu }}}
             </li>
         </ul>
                 {{{ output.user_menu }}}
             </li>
         </ul>