implement suggestions from plone#1421

Author: MAX-786

docs/_static/custom.css

@@ -177,25 +177,23 @@ div.admonition.admonition-todo>.admonition-title::before {
 
 /* Search */
 
-#search-shortcut-page {
-  position: absolute;
-  right: 156px;
-  top: 0.375rem;
-  border-radius: 0.25em;
-  background: #d9eef9;
-  padding: 0.1787rem 0.2813rem;
-  color: #4a4a4a;
-  font-weight: 600;
-  line-height: 1.25rem;
-}
-
 /* Show search form. It is hidden by default. */
 #search-documentation,
 #search-documentation~form,
 #search-documentation~p {
   display: block;
 }
 
+#shortcut.input-group-text {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.form-control:focus {
+  box-shadow: none;
+  border-width: 2px;
+}
+
 ul.search {
   margin-left: 0;
 }
@@ -246,6 +244,27 @@ ul.search li p.context {
   margin-left: 0;
 }
 
+/* Search form sidebar */
+
+.bd-search .input-group {
+  flex-direction: row-reverse;
+}
+
+.bd-search {
+  font-size: .8rem;
+}
+
+.bd-search input,
+.bd-search .input-group-text {
+  font-size: .8rem;
+  padding-left: .5em;
+}
+
+.input-group-text kbd {
+  padding: 0rem 0.4rem;
+  font-size: 135%;
+}
+
 .pathseparator {
   padding: 0 0.7rem;
 }
@@ -317,6 +336,7 @@ div.sidebar:not(.margin) .admonition {
   margin-right: .5em;
   background-color: #ffffff;
 }
+
 #search-shortcut-sidebar {
   position: absolute;
   right: 1.25rem;

docs/_static/search_shortcut.js

@@ -2,37 +2,27 @@
  * Add shortcut `ctrl+k` to focus on search field
  */
 
-$(document).ready(() => {
-    $(document).keydown(function(event) {
-        if ((event.ctrlKey || event.metaKey) && event.key == "k") {
-            event.preventDefault();
-            $('#search-input').focus();
-        }
-    });
-    if (navigator.platform.indexOf('Mac') === -1) {
-        $('#search-shortcut-sidebar').html("^K"); // if OS isn't Mac change Visual indication of search field
-    }
-    
-    // Show & hide seach input when focusin & focusout
-    $('#search-input').focus(() => {
-        $('#search-shortcut-sidebar').hide();
-    });
-    $('#search-input').focusout(() => {
-        $('#search-shortcut-sidebar').show();
-    });
-
-    // For Search page
-            
+ $(document).ready(() => {
     if (window.location.pathname === '/search.html') {
         $('form.bd-search').css('visibility','hidden'); // Hide Sidebar Search field
+
+        $(document).keydown(function(event) {
+            if ((event.ctrlKey || event.metaKey) && event.key == "k") {
+                event.preventDefault();
+                $('#q').focus();
+            }
+        });
+    } else {
+        $(document).keydown(function(event) {
+            if ((event.ctrlKey || event.metaKey) && event.key == "k") {
+                event.preventDefault();
+                $('#search-input').focus();
+            }
+        });
     }
+
     if (navigator.platform.indexOf('Mac') === -1) {
-        $('#search-shortcut-page').html("^K"); // if OS isn't Mac change Visual indication of search field
+        $('#search-shortcut').html("^"); // if OS isn't Mac change visual indication of search field
     }
-    $(document).keydown(function(event) {
-        if ((event.ctrlKey || event.metaKey) && event.key == "k") {
-          event.preventDefault();
-          $('#q').focus();
-        }
-    });
+
 });

docs/_templates/search-field.html

@@ -1,5 +1,18 @@
 <form class="bd-search d-flex align-items-center" action="{{ pathto('search') }}" method="get">
-    <i class="icon fas fa-search"></i>
-    <input type="search" class="form-control" name="q" id="search-input" placeholder="{{ _(theme_search_bar_text) }}" aria-label="{{ theme_search_bar_text }}" autocomplete="off" >
-    <span id="search-shortcut-sidebar">⌘K</span>
-  </form>
+  <div class="input-group">
+    <label for="q" class="sr-only">Search string
+    </label>
+    <div class="input-group-prepend">
+      <span class="input-group-text" id="shortcut">
+        <kbd id="search-shortcut">⌘</kbd>&nbsp;<kbd>K</kbd>
+      </span>
+    </div>
+    <input
+      type="search" name="q" id="search-input"
+      class="form-control"
+      placeholder="{{ _(theme_search_bar_text) }}"
+      aria-labelledby="{{ _(theme_search_bar_text) }}"
+      value="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+    />
+  </div>
+</form>

docs/_templates/search.html

@@ -48,22 +48,29 @@ <h1 id="search-documentation">{{ _('Search') }}</h1>
       >
       <div class="row">
         <div class="input-group col-xl-8 mb-2">
+          <label for="q" class="sr-only">Search string
+          </label>
+          <div class="input-group-prepend">
+            <span class="input-group-text" id="shortcut">
+              <kbd id="search-shortcut">⌘</kbd>&nbsp;<kbd>K</kbd>
+            </span>
+          </div>
           <input
             type="search" name="q" id="q"
             class="form-control"
-            placeholder="Search the docs…"
-            aria-labelledby="search-documentation" value="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"/>
-            <span id="search-shortcut-page">⌘K</span>
-          <label for="q" class="sr-only">Search string</label>
+            placeholder="{{ _(theme_search_bar_text) }}"
+            aria-labelledby="{{ _(theme_search_bar_text) }}"
+            value="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+          />
           <div class="input-group-append">
             <button type="submit" class="btn btn-primary">{{ _('search') }}</button>
           </div>
-          <div class="input-group-append">
+          <!-- <div class="input-group-append">
             <button
               type="button"
               class="clear_search btn btn-secondary"
             >{{ _('reset') }}</button>
-          </div>
+          </div> -->
         </div>
       </div>
 

docs/conf.py

@@ -129,10 +129,7 @@
     "volto/developer-guidelines/branch-policy.md",
 ]
 
-html_js_files = [
-    "patch_scrollToActive.js",
-    "search_shortcut.js"
-]
+html_js_files = ["patch_scrollToActive.js", "search_shortcut.js"]
 
 html_extra_path = [
     "robots.txt",
@@ -250,7 +247,7 @@
     "use_repository_button": True,
     "use_issues_button": True,
     "use_edit_page_button": True,
-    "search_bar_text": "Search the docs…",
+    "search_bar_text": "Search",
     "switcher": {
         "json_url": "/_static/switcher.json",
         "version_match": version,