From 08997c7e6938d260411a4a11c7a3896f829eeb87 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Fri, 17 Apr 2020 18:29:53 +0200
Subject: [PATCH] Beautify search page - Use chips instead of checkboxes - Show
message if no search term is given
---
aleksis/core/static/style.scss | 43 ++++++-
aleksis/core/static/theme.scss | 2 +-
aleksis/core/templates/search/search.html | 145 ++++++++++++++--------
3 files changed, 133 insertions(+), 57 deletions(-)
diff --git a/aleksis/core/static/style.scss b/aleksis/core/static/style.scss
index 7fc8ee732..a312014a4 100644
--- a/aleksis/core/static/style.scss
+++ b/aleksis/core/static/style.scss
@@ -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);
}
diff --git a/aleksis/core/static/theme.scss b/aleksis/core/static/theme.scss
index 36d3e3f55..907c444f5 100644
--- a/aleksis/core/static/theme.scss
+++ b/aleksis/core/static/theme.scss
@@ -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;
diff --git a/aleksis/core/templates/search/search.html b/aleksis/core/templates/search/search.html
index 873ffffdd..babbd70d9 100644
--- a/aleksis/core/templates/search/search.html
+++ b/aleksis/core/templates/search/search.html
@@ -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 }}&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 }}&page={{ page_num }}">{{ page_num }}</a></li>
+ {% endif %}
+ {% endfor %}
+
+ {% if page.has_next %}
+ <li class="waves-effect">
+ <a href="?q={{ query }}&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 }}&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 }}&page={{ page_num }}">{{ page_num }}</a></li>
- {% endif %}
- {% endfor %}
-
- {% if page.has_next %}
- <li class="waves-effect">
- <a href="?q={{ query }}&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 %}
--
GitLab