From 79679c105a48abba5188e701dd548cc5c3b7265b Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Sun, 8 Dec 2019 16:12:55 +0100
Subject: [PATCH] refactor search ui

---
 .idea/jsLibraryMappings.xml   |  2 +-
 cookbook/templates/base.html  | 17 +++++++++--
 cookbook/templates/index.html | 56 ++++++++++++++++++++++-------------
 3 files changed, 52 insertions(+), 23 deletions(-)

diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml
index e5cbec694..e27c444b4 100644
--- a/.idea/jsLibraryMappings.xml
+++ b/.idea/jsLibraryMappings.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="JavaScriptLibraryMappings">
-    <file url="file://$PROJECT_DIR$" libraries="{jquery-3.4.1.slim, tabulator_bootstrap4}" />
+    <file url="file://$PROJECT_DIR$" libraries="{jquery-3.4.1.slim, select2-bootstrap, tabulator_bootstrap4}" />
   </component>
 </project>
\ No newline at end of file
diff --git a/cookbook/templates/base.html b/cookbook/templates/base.html
index 5596777db..008940d8c 100644
--- a/cookbook/templates/base.html
+++ b/cookbook/templates/base.html
@@ -8,6 +8,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
+    <!-- Bootstrap 4 -->
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
           integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
     <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
@@ -20,11 +21,23 @@
             integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
             crossorigin="anonymous"></script>
 
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
+    <!-- Select2 for use with django autocomplete light -->
+    <link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet"/>
+    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
 
+    <!-- Bootstrap theme for select2 -->
+    <link rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.css"
+          integrity="sha256-zFnNbsU+u3l0K+MaY92RvJI6AdAVAxK3/QrBApHvlH8=" crossorigin="anonymous"/>
+    <script type="text/javascript">
+        $.fn.select2.defaults.set("theme", "bootstrap");
+    </script>
+
+    <!-- Fontawesome icons -->
     <link rel="stylesheet" href="{% static "fontawesome/fontawesome_all.min.css" %}">
 
+    <!-- Emojiara stuff for emoji select -->
+    <!--TODO refactor and look for better solution -->
     <link rel="stylesheet" href="{% static "emojionearea/emojionearea.min.css" %}">
     <script type="text/javascript" src="{% static "emojionearea/emojionearea.min.js" %}"></script>
 
diff --git a/cookbook/templates/index.html b/cookbook/templates/index.html
index 0b8711914..c358a8af0 100644
--- a/cookbook/templates/index.html
+++ b/cookbook/templates/index.html
@@ -11,29 +11,45 @@
 {% endblock %}
 
 {% block content %}
-    <div class="row">
-        <div class="col md-12">
-            {% if filter %}
-                <div class="card">
-                    <div class="card-header">
-                        <i class="fas fa-search"></i> {% trans "Search" %}
-                    </div>
-                    <div class="card-body">
-                        <form action="" method="get" id="search_form">
-                            {{ filter.form|crispy }}
-                            <button class="btn btn-primary" value="1"><i class="fas fa-search"></i> {% trans 'Search' %}</button>
-                            <a href="#" onclick="window.location = window.location.pathname;"
-                               class="btn btn-warning"><i class="fas fa-backspace"></i> {% trans 'Reset' %}</a>
-                            <a href="{% url 'new_recipe' %}" class="btn btn-success"><i class="fas fa-plus-circle"></i> {% trans 'New' %}</a>
-                            <a href="" class="btn btn-info"><i class="fas fa-dice"></i> {% trans 'Random' %}</a>
-                        </form>
+    {% if filter %}
+        <form action="" method="get" id="search_form">
+            {% csrf_token %}
+            {{ form.non_field_errors }}
+            <div class="row">
+                <div class="col md-12">
+                    <div class="input-group">
+                        <input type="text" class="form-control" placeholder="{% trans 'Search recipe ...' %}"
+                               id="{{ filter.form.name.id_for_label }}" name="{{ filter.form.name.name }}"
+                               aria-describedby="button-addon4">
+                        <div class="input-group-append" id="button-addon4">
+                            <button class="btn btn-primary" type="submit"><i class="fas fa-search"></i></button>
+                            <button class="btn btn-warning" type="button" onclick="window.location = window.location.pathname;"><i class="fas fa-backspace"></i></button>
+                            <button class="btn btn-success" type="button" onclick="location.href='{% url 'new_recipe' %}'"><i class="fas fa-plus-circle"></i></button>
 
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+
+            <div class="row ">
+                <div class="col-md-2 offset-md-10" style="text-align: right">
+                    <a class="" data-toggle="collapse" href="#collapse_adv_search" role="button"
+                       aria-expanded="false"
+                       aria-controls="collapse_adv_search"><i
+                            class="fas fa-search"></i> {% trans 'Advanced Search' %}</a>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="collapse col-md-12" id="collapse_adv_search">
+                    <div>
+                        {{ filter.form.keywords | as_crispy_field }}
                     </div>
                 </div>
-            {% endif %}
-        </div>
-    </div>
-
+            </div>
+        </form>
+    {% endif %}
     <br/>
 
     {% if user.is_authenticated and recipes %}