UI: improve layout and action for search

3 files changed, 36 insertions, 23 deletions

diff --git a/ishtar_common/templates/blocks/bs_field_snippet.html b/ishtar_common/templates/blocks/bs_field_snippet.html
index a164c81d8..6a6ea5360 100644
--- a/ishtar_common/templates/blocks/bs_field_snippet.html
+++ b/ishtar_common/templates/blocks/bs_field_snippet.html
@@ -1,7 +1,7 @@
 {% load i18n %}
     <div class="form-group {% if field.field.widget.attrs.cols %}col-lg-12{% else %}col-lg-6{% endif %}{% if field.errors %} is-invalid{% endif %}{% if field.field.required %} required{% endif %}"
          data-alt-name="{{field.field.alt_name}}">
-        {{ field.label_tag }}
+        {% if field.label %}{{ field.label_tag }}{% endif %}
         {% if field.help_text %}
         <div class="input-group">
         {% endif %}
diff --git a/ishtar_common/templates/ishtar/forms/search_query.html b/ishtar_common/templates/ishtar/forms/search_query.html
index e842fd591..ff51d483d 100644
--- a/ishtar_common/templates/ishtar/forms/search_query.html
+++ b/ishtar_common/templates/ishtar/forms/search_query.html
@@ -2,7 +2,7 @@
 <div class="modal-dialog modal-sm" id="save-search-div">
     <div class="modal-content">
         <div class="modal-header">
-            <h5>{% trans "Save search" %}</h5>
+            <h5>{% trans "Bookmark search" %}</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                 <span aria-hidden="true">&times;</span>
             </button>
@@ -11,7 +11,7 @@
               action="{% url 'save-search-query' app_label model %}"
               method="post"
               id="save-search-form">
-            <div class="modal-body form-row">
+            <div class="modal-body form-row-modal">
               {% csrf_token %}
 
               <div class='form'>
@@ -29,11 +29,6 @@
                 </div>{% endif %}
                 {% endfor %}
 
-                <div class="form-row">
-                    <div class="form-group col-lg-12">
-                        {{form.query}}
-                    </div>
-                </div>
                 {% if form.search_query %}
                 <div class="form-row">
                     <input type="radio" name="create_or_update" value="create"
@@ -50,9 +45,12 @@
                         {% endwith %}
                     </div>
                     <div class="form-row">
-                        {% with form.is_alert as field %}
-                        {% include "blocks/bs_field_snippet.html" %}
-                        {% endwith %}
+                        <div class="form-group col-lg-12">
+                            <span>
+                                {{form.is_alert}}
+                                <label for="{{form.is_alert.auto_id}}">{{form.is_alert.label}}</label>
+                            </span>
+                        </div>
                     </div>
                 </div>
                 {% if form.search_query %}
diff --git a/ishtar_common/templates/widgets/search_input.html b/ishtar_common/templates/widgets/search_input.html
index ddb62969f..01e49e93b 100644
--- a/ishtar_common/templates/widgets/search_input.html
+++ b/ishtar_common/templates/widgets/search_input.html
@@ -1,28 +1,38 @@
 {% load i18n %}<div class="input-group search-widget">
-    <span class="input-group-prepend">
-      <span class="input-group-text">
-         <i class="fa fa-search" aria-hidden="true"></i>
-      </span>
-    </span>
     <input type="{{ widget.type }}" name="{{ widget.name }}"
            {% if widget.value != None %} value="{{ widget.value|stringformat:'s' }}"{% endif %}{% include "django/forms/widgets/attrs.html" %} />
     <span class="input-group-append">
-        <button type="button" class="btn btn-secondary" data-toggle="modal"
+        <span class="input-group-text input-link"
+              title="{% trans 'Search' %}"
+              id="submit-search">
+            <i class="fa fa-search" aria-hidden="true"></i>
+        </span>
+        <button type="button" class="input-group-text input-link" data-toggle="modal"
                 data-target="#modal-advanced-search"
                 title="{% trans 'Criteria' %}">
             <i class="fa fa-cogs" aria-hidden="true"></i>
         </button>
-        <a type="button" class="async-link btn btn-secondary disabled"
+        <span class="input-group-text input-link disabled"
+              id="clear-search-button"
+              title="{% trans 'Clear' %}">
+            <i class="fa fa-times" aria-hidden="true"></i>
+        </span>
+        <span class="input-group-text input-sep">
+        </span>
+        <a class="input-group-text input-link async-link disabled"
            id="save-search-button"
            data-target="#modal-dynamic-form"
            data-modal-open="#modal-dynamic-form"
-           title="{% trans 'Save search' %}"
+           title="{% trans 'Bookmark save' %}"
            href="{% url 'save-search-query' 'archaeological-operations' 'operation'%}">
-            <i class="fa fa-floppy-o" aria-hidden="true"></i>
+            <i class="fa fa-star-o" aria-hidden="true"></i>
         </a>
-        <span class="input-group-text clear-search">
-            <i class="fa fa-times" aria-hidden="true"></i>
+        <span class="input-group-text input-link disabled"
+              title="{% trans 'Load bookmark' %}"
+              id="load-bookmark">
+            <i class="fa fa-bookmark" aria-hidden="true"></i>
         </span>
+
     </span>
 </div>
 
@@ -30,10 +40,15 @@
 
 $(document).ready(function(){
     $(".search-widget input").keypress(function(e) {
-        if (e.which == 13) {
+        var key = e.key;
+        if (key === "Enter") {
             $(".search_button").click();
             $(this).focus();
         }
+        if (key === "Escape") {
+            $("#clear-search-button").click();
+            $(this).focus();
+        }
     });
     $(".search-widget input").keyup(function(e) {
         enable_save();