Make search form nice with bootstrap.

Author: ksuess

docs/_templates/search.html

@@ -40,24 +40,40 @@ <h1 id="search-documentation">{{ _('Search') }}</h1>
     </p>
   {% endblock %}
   {% block searchbox %}
-    <form action="" method="get" id="search-form">
-      <label for="q" class="visuallyhidden">Search string</label>
-      <input type="text" name="q" id="q" aria-labelledby="search-documentation" value="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"/>
-      
-      <input type="submit" value="{{ _('search') }}" />
+    <form
+      action=""
+      method="get"
+      id="search-form"
+      class="form-inline"
+      >
+      <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="input-group-append">
+            <button type="submit" class="btn btn-primary">{{ _('search') }}</button>
+          </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>
+          {% for id, title in
+            [
+              ["backend","Backend"],
+              ["classic-ui","Classic UI"],
+              ["volto","Frontend"],
+              ["contributing","Contributing"],
+            ] %}
+            <option value="{{id}}">{{ title }}</option>
+          {% endfor %}
+        </select>
+      </div>
 
-      <label for="doc_section" class="visuallyhidden">Filter by section</label>
-      <select name="doc_section" id="doc_section">
-        <option value="all">All Documentation</option>
-        {% for id, title in 
-          [
-            ["backend","Backend"],
-            ["classic-ui","Classic UI"],
-            ["contributing","Contributing"],
-          ] %}
-          <option value="{{id}}">{{ title }}</option>
-        {% endfor %}
-      </select>
       <span id="search-progress" style="padding-left: 10px"></span>
     </form>
   {% endblock %}