Merge branch 'bugfix/global-search' into 'master'

Design fixes for global search

See merge request AlekSIS!225

aleksis/core/static/js/main.js

@@ -66,7 +66,7 @@ $(document).ready( function () {
     });
 
     // Initialise auto-completion for search bar
-    window.autocomplete = new Autocomplete({});
+    window.autocomplete = new Autocomplete({minimum_length: 2});
     window.autocomplete.setup();
 
     // Initialize text collapsibles [MAT, own work]

aleksis/core/static/js/search.js

@@ -35,9 +35,20 @@ Autocomplete.prototype.setup = function () {
         self.query_box.trigger("keydown");
     });
 
+    this.query_box.keyup(function () {
+        var query = self.query_box.val();
+
+        if (query.length < self.minimum_length) {
+            $("#search-results").remove();
+            return true;
+        }
+
+        self.fetch(query);
+        return true;
+    });
+
     // Watch the input box.
     this.query_box.keydown(function (e) {
-        var query = self.query_box.val();
 
         if (e.which === 38) { // Keypress Up
             if (!self.selected_element) {
@@ -69,14 +80,6 @@ Autocomplete.prototype.setup = function () {
             e.preventDefault();
             window.location.href = self.selected_element.attr("href");
         }
-
-        if (query.length < self.minimum_length) {
-            $("#search-results").remove();
-            return true;
-        }
-
-        self.fetch(query);
-        return true;
     });
 
     // // On selecting a result, remove result box

aleksis/core/static/style.scss

@@ -189,6 +189,7 @@ a.collection-item.search-item {
 
 div#search-results {
   position: absolute;
+  margin-top: -10px;
   width: 100%;
 }
 

aleksis/core/templates/search/search.html

@@ -14,7 +14,6 @@
     <input type="text" name="{{ form.q.name }}" id="{{ form.q.id }}" value="{% firstof form.q.value "" %}"
            placeholder="{% trans "Search Term" %}">
 
-    <h6>{{ form.models.label }}</h6>
     <div>
       {% for group, items in form.models|select_options %}
         {% for choice, value, selected in items %}
@@ -28,10 +27,12 @@
       {% endfor %}
     </div>
 
-    <button type="submit" class="btn waves-effect waves-light green">
-      <i class="material-icons left">search</i>
-      {% blocktrans %}Search{% endblocktrans %}
-    </button>
+    <p>
+      <button type="submit" class="btn waves-effect waves-light green">
+        <i class="material-icons left">search</i>
+        {% blocktrans %}Search{% endblocktrans %}
+      </button>
+    </p>
 
     <h5>{% trans "Results" %}</h5>
 
@@ -44,7 +45,9 @@
           </a>
         {% empty %}
           <li class="collection-item">
-            {% trans "No search results could be found to your search" %}
+            <p class="flow-text">
+              {% trans "No search results could be found to your search." %}
+            </p>
           </li>
         {% endfor %}
       </div>
@@ -81,11 +84,13 @@
         </ul>
       {% endif %}
     {% else %}
-      <div class="collection">
+      <ul class="collection">
         <li class="collection-item">
-          {% trans "Please enter a search term above" %}
+          <p class="flow-text">
+            {% trans "Please enter a search term above." %}
+          </p>
         </li>
-      </div>
+      </ul>
     {% endif %}