refactor search ui

This commit is contained in:
vabene1111
2019-12-08 16:12:55 +01:00
parent a0a9a93888
commit 79679c105a
3 changed files with 52 additions and 23 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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 %}