Search: Replace dropdown with radio buttons. Add reset button.

Author: ksuess

docs/_static/custom.css

@@ -152,10 +152,6 @@ p.search-summary {
   list-style-type: none;
   padding-left: 0;
 }
-#search-results ul li {
-  margin-bottom: 2rem;
-  padding: 2px 0 5px 2rem;
-}
 #search-results ul li h3 {
   margin: 0.75rem 0 .5rem;
   font-size: 1.5rem;
@@ -176,6 +172,17 @@ p.search-summary {
 
   text-overflow: ellipsis;
 }
+#search-results ul li,
+ul.search li {
+  margin-bottom: 2rem;
+  padding: 2px 0 5px 4rem;
+  background-image: url(file.svg);
+  background-blend-mode: hue;
+  background-color: violetred;
+  background-repeat: no-repeat;
+  background-position: 0px 8px;
+  background-size: 56px;
+}
 ul.search li p.context {
   margin-left: 0;
 }

docs/_static/searchtools.js

@@ -75,14 +75,12 @@ var Search = {
 
   init : function() {
       var params = $.getQueryParameters();
+      let doc_section = params.doc_section ? params.doc_section[0] : 'all';
+      $('input[id="doc_section_' + doc_section + '"]').prop("checked", true)
       if (params.q) {
           var query = params.q[0];
           $('input[name="q"]')[0].value = query;
           $('input[name="q"]')[1].value = query;
-          if (params.doc_section) {
-            var doc_section = params.doc_section[0];
-            $('select[name="doc_section"]')[0].value = doc_section;
-          }
           this.performSearch(query, doc_section);
       }
   },
@@ -234,7 +232,7 @@ var Search = {
 
     // Enrich item with parent doc_section title
     for (i = 0; i < results.length; i++) 
-      results[i][6] = results[i][6] || 'TODO Documentation title';
+      results[i][6] = results[i][6] || 'Plone Documentation';
 
     // now sort the results by score (in opposite order of appearance, since the
     // display function below uses pop() to retrieve items) and then
@@ -255,24 +253,21 @@ var Search = {
     });
 
     function _getBreadcrumbs(item, linkUrl) {
-      let path = item[0];
       let parentTitles = item[6];
-      let markup = path.split('/')
+      let path = item[0].split('/')
         .slice(0, -1);
-      markup = markup.map((el, index) => {
+      path = path.map((el, index) => {
         return {
-          "path": markup.slice(0, index+1).join('/'),
+          "path": path.slice(0, index+1).join('/'),
           "title": parentTitles[index]
         }
       })
-      markup = markup
-        .map((el) => {
-            let foo = `<a href="/${el.path}"> ${el.title}</a>`
-            return foo;
+      let markup = path
+        .map((el, idx) => {
+            return idx===0 ? `<a href="/${el.path}"><b>${el.title}</b></a>` : `<a href="/${el.path}">${el.title}</a>` 
           })
       markup.push(`<span class="lastbreadcrumb">${item[1]}</span>`)
-      markup = markup.join('<span class="pathseparator">&gt;</span>');
-      return markup
+      return markup.join('<span class="pathseparator">&gt;</span>');
     }
 
     // Print the results.
@@ -587,7 +582,14 @@ var Search = {
 
 $(document).ready(function() {
   Search.init();
-  $('select[name="doc_section"]').change(function() {
+  $('#q').focus();
+  $('input[name="doc_section"]').change(function() {
     this.form.submit();
   });
+  
+  function clearSearchField() {
+    $('#q').val('');
+    this.form.submit();
+  }
+  $( "button.clear_search" ).on( "click", clearSearchField );
 });

docs/_templates/search.html

@@ -44,34 +44,52 @@ <h1 id="search-documentation">{{ _('Search') }}</h1>
       action=""
       method="get"
       id="search-form"
-      class="form-inline"
+      class=""
       >
-      <div class="input-group mr-2 mb-1">
-        <input
-          type="text" name="q" id="q"
-          class="form-control"
-          placeholder="Search the docs…"
-          aria-labelledby="search-documentation" value="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"/>
-        <label for="q" class="sr-only">Search string</label>
+      <div class="row">
+        <div class="input-group col-sm-6 mb-2">
+          <input
+            type="text" name="q" id="q"
+            class="form-control"
+            placeholder="Search the docs…"
+            aria-labelledby="search-documentation" value="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"/>
+          <label for="q" class="sr-only">Search string</label>
           <div class="input-group-append">
             <button type="submit" class="btn btn-primary">{{ _('search') }}</button>
           </div>
+          <div class="input-group-append">
+            <button
+              type="button"
+              class="clear_search btn btn-primary"
+            >{{ _('clear') }}</button>
+          </div>
+        </div>
       </div>
 
-      <div class="form-group mb-1">
-        <label for="doc_section" class="sr-only">Filter by section</label>
-        <select name="doc_section" id="doc_section" class="custom-select" >
-          <option value="all">All Documentation</option>
+      <div class="form-row mb-2">
+        <label for="doc_section" class="col">Filter by section</label>
+        <div class="col-sm-10">
+          <div class="form-check">
+            <input class="form-check-input" type="radio" name="doc_section" id="doc_section_all" value="all">
+            <label class="form-check-label" for="doc_section_all">
+              All Documentation
+            </label>
+          </div>
           {% for id, title in
             [
               ["backend","Backend"],
               ["classic-ui","Classic UI"],
               ["volto","Frontend"],
               ["contributing","Contributing"],
             ] %}
-            <option value="{{id}}">{{ title }}</option>
+            <div class="form-check">
+              <input class="form-check-input" type="radio" name="doc_section" id="doc_section_{{id}}" value="{{id}}">
+              <label class="form-check-label" for="doc_section_{{id}}">
+                {{title}}
+              </label>
+            </div>
           {% endfor %}
-        </select>
+        </div>
       </div>
 
       <span id="search-progress" style="padding-left: 10px"></span>