Skip to content
Snippets Groups Projects
Commit 08997c7e authored by Julian's avatar Julian
Browse files

Beautify search page 

- Use chips instead of checkboxes
- Show message if no search term is given
parent 94d673fd
No related branches found
No related tags found
1 merge request!204Resolve "Global search"
Pipeline #1385 failed
Stage: test
Stage: build
Hide whitespace changes
Inline Side-by-side
aleksis/core/static/style.scss
+ 40
− 3
View file @ 08997c7e
......@@ -80,7 +80,7 @@ header, main, footer {
#sidenav-logo {
height: 70px;
width:auto;
width: auto;
}
@media only screen and (max-width: 993px) {
......@@ -150,7 +150,7 @@ li.active > a > .sidenav-badge {
color: #777;
margin-top: -1px;
border-top: 1px solid rgba(0, 0, 0, 0.14);
border-bottom: 1px solid rgba(0, 0, 0, 0.14);
border-bottom: 1px solid rgba(0, 0, 0, 0.14);
-webkit-transition: margin .25s ease;
transition: margin .25s ease;
......@@ -261,6 +261,43 @@ form .row {
margin-bottom: 0;
}
label.chips-checkbox {
&.active {
outline: none;
background-color: $chip-selected-color;
color: #fff;
}
display: inline-block;
height: 32px;
font-size: 13px;
font-weight: 500;
color: rgba(0, 0, 0, .6);
line-height: 32px;
padding: 0 12px;
border-radius: 16px;
background-color: $chip-bg-color;
margin-bottom: $chip-margin;
margin-right: $chip-margin;
> img {
float: left;
margin: 0 8px 0 -12px;
height: 32px;
width: 32px;
border-radius: 50%;
}
}
input[type="checkbox"].chips-checkbox + span {
padding-left: 0;
&:before {
display: none;
width: 0;
}
}
// Badges
span.badge.new::after {
......@@ -318,7 +355,7 @@ span.badge .material-icons {
/* Table*/
table.striped > tbody > tr:nth-child(odd), table tr.striped, table tbody.striped tr {
table.striped > tbody > tr:nth-child(odd), table tr.striped, table tbody.striped tr {
background-color: rgba(208, 208, 208, 0.5);
}
......
aleksis/core/static/theme.scss
+ 1
− 1
View file @ 08997c7e
......@@ -127,7 +127,7 @@ $collapsible-border-color: #ddd !default;
$chip-bg-color: #e4e4e4 !default;
$chip-border-color: #9e9e9e !default;
$chip-selected-color: #26a69a !default;
$chip-selected-color: $primary-color !default;
$chip-margin: 5px !default;
......
aleksis/core/templates/search/search.html
+ 92
− 53
View file @ 08997c7e
......@@ -2,68 +2,107 @@
{% extends "core/base.html" %}
{% load i18n material_form %}
{% load i18n material_form_internal %}
{% block browser_title %}{% blocktrans %}Search{% endblocktrans %}{% endblock %}
{% block page_title %}{% blocktrans %}Global Search{% endblocktrans %}{% endblock %}
{% block content %}
<form method="get">
{% form form=form %}{% endform %}
{# {% form form=form %}{% endform %}#}
<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 %}
<label class="{% if selected %} active{% endif %}">
<input type="checkbox"
{% if value == None or value == '' %}disabled{% else %}value="{{ value }}"{% endif %}
{% if selected %} checked="checked"{% endif %} name="{{ form.models.name }}">
<span> {{ choice }} </span>
</label>
{% endfor %}
{% endfor %}
</div>
<button type="submit" class="btn waves-effect waves-light green">
<i class="material-icons left">search</i>
<i class="material-icons left">search</i>
{% blocktrans %}Search{% endblocktrans %}
</button>
<h5>{% trans "Results" %}</h5>
{% if query %}
<div class="collection">
{% for result in page.object_list %}
<a href="{{ result.object.get_absolute_url|default:"#" }}" class="collection-item">
<i class="material-icons left">{{ result.object.icon_ }}</i>
{{ result.object }}
</a>
{% empty %}
<li class="collection-item">
{% trans "No search results could be found to your search" %}
</li>
{% endfor %}
</div>
{% if page.has_other_pages %}
<ul class="pagination">
{% if page.has_previous %}
<li class="waves-effect">
<a href="?q={{ query }}&amp;page={{ page.previous_page_number }}">
<i class="material-icons">chevron_left</i>
</a>
</li>
{% else %}
<li class="disabled"><a href="#"><i class="material-icons">chevron_left</i></a></li>
{% endif %}
{% for page_num in page.paginator.page_range %}
{% if page.number == page_num %}
<li class="active"><a href="#">{{ page_num }}</a></li>
{% else %}
<li class="waves-effect"><a href="?q={{ query }}&amp;page={{ page_num }}">{{ page_num }}</a></li>
{% endif %}
{% endfor %}
{% if page.has_next %}
<li class="waves-effect">
<a href="?q={{ query }}&amp;page={{ page.next_page_number }}">
<i class="material-icons">chevron_right</i>
</a>
</li>
{% else %}
<li class="disabled"><a href="#"><i class="material-icons">chevron_right</i></a></li>
{% endif %}
</ul>
{% endif %}
{% else %}
<div class="collection">
<li class="collection-item">
{% trans "Please enter a search term above" %}
</li>
</div>
{% endif %}
</form>
{% if query %}
<h3>Results</h3>
<div class="collection">
{% for result in page.object_list %}
<a href="{{ result.object.get_absolute_url|default:"#" }}" class="collection-item">
<i class="material-icons left">{{ result.object.icon_ }}</i>
{{ result.object }}
</a>
{% empty %}
<li class="collection-item">
{% trans "No search results could be found to your search" %}
</li>
{% endfor %}
</div>
{% if page.has_other_pages %}
<ul class="pagination">
{% if page.has_previous %}
<li class="waves-effect">
<a href="?q={{ query }}&amp;page={{ page.previous_page_number }}">
<i class="material-icons">chevron_left</i>
</a>
</li>
{% else %}
<li class="disabled"><a href="#"><i class="material-icons">chevron_left</i></a></li>
{% endif %}
{% for page_num in page.paginator.page_range %}
{% if page.number == page_num %}
<li class="active"><a href="#">{{ page_num }}</a></li>
{% else %}
<li class="waves-effect"><a href="?q={{ query }}&amp;page={{ page_num }}">{{ page_num }}</a></li>
{% endif %}
{% endfor %}
{% if page.has_next %}
<li class="waves-effect">
<a href="?q={{ query }}&amp;page={{ page.next_page_number }}">
<i class="material-icons">chevron_right</i>
</a>
</li>
{% else %}
<li class="disabled"><a href="#"><i class="material-icons">chevron_right</i></a></li>
{% endif %}
</ul>
{% endif %}
{% else %}
{# FIXME Add a note to show before making a query #}
{% endif %}
<script>
$(document).ready(function () {
$("input[type='checkbox']").each(function () {
$(this).addClass("chips-checkbox");
$(this).parent("label").addClass("chips-checkbox");
});
$("label.chips-checkbox > span").click(function () {
$(this).parent("label.chips-checkbox").toggleClass("active");
let input = $(this).next("input[type='checkbox']");
input.prop("checked", !input.prop("checked"));
});
});
</script>
{% endblock %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment