Amélioration de la zone des filtres

This commit is contained in:
Jean-Marie Favreau 2024-09-14 11:59:34 +02:00
parent 8666f51e76
commit 0c6ea62671
7 changed files with 137 additions and 58 deletions

View File

@ -106,6 +106,9 @@ details {
} }
details summary[role="button"] { details summary[role="button"] {
color: var(--primary-inverse); color: var(--primary-inverse);
[role="button"] {
margin: -0.2em 0;
}
} }
details[role="list"] summary + ul li.selected>a{ details[role="list"] summary + ul li.selected>a{
@ -118,6 +121,36 @@ details[role="list"] summary + ul li.selected>a:hover {
color: var(--primary-inverse); color: var(--primary-inverse);
} }
@media (min-width: 992px) {
#filters .categories {
width: 75%;
float: left;
}
#filters details {
width: 25%;
float: right;
summary {
padding: 0.2em 0.4em;
}
}
}
#filters details[open=""] {
width: 100%;
transition: width 0.1s ease-in-out;
display: block;
summary {
padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
margin-top: 0.5em;
}
}
#filters .clear {
clear: both;
}
#main-nav { #main-nav {
box-shadow: 0 1px 0 rgba(115, 130, 140, 0.2); box-shadow: 0 1px 0 rgba(115, 130, 140, 0.2);
} }
@ -136,6 +169,14 @@ span.small-cat {
cursor: default; cursor: default;
} }
.simple-button {
@extend .small-cat;
border-radius: 1em;
font-size: 80%;
margin-left: .5em;
padding: .1em .5em;
}
svg { svg {
vertical-align: -0.125em; vertical-align: -0.125em;
} }

View File

@ -2,14 +2,17 @@
{% load tag_extra %} {% load tag_extra %}
{% load utils_extra %} {% load utils_extra %}
<article id="filters"> <article id="filters">
<div>
<div class="categories">
{% show_legend filter=filter %}
</div>
<details> <details>
<summary role="button" class="outline secondary"> <summary role="button" class="outline secondary">
{% if filter.is_active %} {% if filter.is_active %}
Filtre&nbsp;: Autres filtres&nbsp;:
{% for c in filter.get_categories %}
{{ c | small_cat }}
{% endfor %}
{% for t in filter.get_tags %} {% for t in filter.get_tags %}
{{ t | tag_button }} {{ t | tag_button }}
{% endfor %} {% endfor %}
@ -24,16 +27,20 @@
{% endfor %} {% endfor %}
{{ filter.get_recurrence_filtering }} {{ filter.get_recurrence_filtering }}
{% else %} {% else %}
Filtrer Autres filtres
{% endif %} {% endif %}
{% if filter.is_resetable %}
<a class="secondary" href="{{ filter.get_url_without_filters_only_cats }}" data-tooltip="Supprimer les filtres">{% picto_from_name "x-circle" %}</a>
{% endif %}
</summary> </summary>
<form method="get" class="form django-form main-filter"> <form method="get" class="form django-form main-filter">
{{ filter.form.as_p }}<br /> {{ filter.form.as_p }}
<button type="submit">Appliquer le filtre</button> <button type="submit">Appliquer le filtre</button>
</form> </form>
</details> </details>
{% if filter.is_resetable %} <div class="clear"></div>
<a href="{{ filter.get_url_without_filters }}" role="button">{% picto_from_name "x-circle" %} Supprimer le filtre</a> </div>
{% endif %}
</article> </article>

View File

@ -28,6 +28,7 @@
{% cache cache_timeout day user.is_authenticated day filter.to_str LANGUAGE_CODE %} {% cache cache_timeout day user.is_authenticated day filter.to_str LANGUAGE_CODE %}
{% include "agenda_culturel/filter-inc.html" with filter=filter %} {% include "agenda_culturel/filter-inc.html" with filter=filter %}
@ -89,10 +90,10 @@
<nav> <nav>
<ul> <ul>
{% for category in categories %} {% for category in categories %}
{% with category.0.name as idcat %} {% with category.0.pk|stringformat:"i" as idcat %}
{% with filter.get_url_without_filters|add:"?category="|add:idcat as cat_url %} {% with filter.get_url_without_filters|add:"?category="|add:idcat as cat_url %}
<li> <li>
<a class="small-cat contrast selected" role="button" href="{{ cat_url }}"><span class="cat {{ category.0.css_class }}"></span>{{ idcat }}&nbsp;: {{ category.1 }}</a> <a class="small-cat contrast selected" role="button" href="{{ cat_url }}"><span class="cat {{ category.0.css_class }}"></span>{{ category.0.name }}&nbsp;: {{ category.1 }}</a>
</li> </li>
{% endwith %} {% endwith %}
{% endwith %} {% endwith %}

View File

@ -66,9 +66,6 @@
</div> </div>
<div class="slider-button button-right hidden">{% picto_from_name "arrow-right" %}</div> <div class="slider-button button-right hidden">{% picto_from_name "arrow-right" %}</div>
</div> </div>
<div>
Légende&nbsp;: {% show_legend filter=filter %}
</div>
<footer> <footer>

View File

@ -63,10 +63,6 @@
</div> </div>
<div class="slider-button button-right hidden">{% picto_from_name "arrow-right" %}</div> <div class="slider-button button-right hidden">{% picto_from_name "arrow-right" %}</div>
</div> </div>
<div>
Légende&nbsp;: {% show_legend filter=filter %}
</div>
<footer> <footer>

View File

@ -211,9 +211,10 @@ def circle_cat(category, recurrence=False):
) )
@register.simple_tag @register.simple_tag
def show_legend(filter): def show_legend(filter):
current_url = filter.get_url_without_filters() filter.form.full_clean()
cats = Category.objects.all() cats = Category.objects.all()
if filter.is_active(only_categories=True): if filter.is_active(only_categories=True):
return mark_safe("<div>" + return mark_safe("<div>" +
@ -221,18 +222,18 @@ def show_legend(filter):
[ [
small_cat( small_cat(
c, c,
current_url + "?category=" + str(c.pk) filter.get_url_add_categories([c.pk])
if not filter.is_selected(c) if not filter.is_selected(c)
else None, else filter.get_url_remove_categories([c.pk]),
contrast=filter.is_selected(c), contrast=filter.is_selected(c),
) )
for c in cats for c in cats
] ]
) + "</div>" ) + ' <a class="simple-button secondary" data-tooltip="Toutes les catégories" href="' + filter.get_url_without_filters() + '" role="button">' + picto_from_name('x-circle') + ' toutes</a></div>'
) )
else: else:
return mark_safe("<div>" + return mark_safe("<div>" +
" ".join( " ".join(
[small_cat(c, current_url + "?category=" + str(c.pk)) for c in cats] [small_cat(c, filter.get_url_add_categories([c.pk])) for c in cats]
) + "</div>" ) + "</div>"
) )

View File

@ -31,6 +31,7 @@ from .forms import (
CategorisationForm, CategorisationForm,
EventAddPlaceForm, EventAddPlaceForm,
PlaceForm, PlaceForm,
MultipleHiddenInput
) )
from .models import ( from .models import (
@ -195,7 +196,7 @@ class EventFilter(django_filters.FilterSet):
field_name="category__id", field_name="category__id",
to_field_name="id", to_field_name="id",
queryset=Category.objects.all(), queryset=Category.objects.all(),
widget=CategoryCheckboxSelectMultiple, widget=MultipleHiddenInput,
) )
city = django_filters.MultipleChoiceFilter( city = django_filters.MultipleChoiceFilter(
@ -230,11 +231,47 @@ class EventFilter(django_filters.FilterSet):
if isinstance(self.form.data, QueryDict): if isinstance(self.form.data, QueryDict):
return self.form.data.urlencode() return self.form.data.urlencode()
else: else:
print(self.form.data)
return "" return ""
def get_url_without_filters(self): def get_full_url(self):
return self.request.get_full_path().split("?")[0] return self.request.get_full_path()
def get_url_remove_categories(self, catpks, full_path = None):
if full_path is None:
full_path = self.request.get_full_path()
result = full_path
for catpk in catpks:
result = result.replace('category=' + str(catpk), '')
result = result.replace('?&', '?')
result = result.replace('&&', '&')
return result
def get_url_add_categories(self, catpks, full_path = None):
if full_path is None:
full_path = self.request.get_full_path()
result = full_path
for catpk in catpks:
result = result + ('&' if '?' in full_path else '?') + 'category=' + str(catpk)
return result
def get_url_without_filters_only_cats(self):
return self.get_url_without_filters(True)
def get_url_without_filters(self, only_categories=False):
if only_categories:
# on repart d'une url sans option
result = self.request.get_full_path().split("?")[0]
# on ajoute toutes les catégories
result = self.get_url_add_categories([c.pk for c in self.get_categories()], result)
else:
# on supprime toutes les catégories
result = self.get_url_remove_categories([c.pk for c in self.get_categories()])
return result
def get_cleaned_data(self, name): def get_cleaned_data(self, name):
@ -249,7 +286,7 @@ class EventFilter(django_filters.FilterSet):
return self.get_cleaned_data("category") return self.get_cleaned_data("category")
def get_tags(self): def get_tags(self):
return self.get_cleaned_data("cleaned_data") return self.get_cleaned_data("tags")
def get_exclude_tags(self): def get_exclude_tags(self):
return self.get_cleaned_data("exclude_tags") return self.get_cleaned_data("exclude_tags")
@ -303,8 +340,7 @@ class EventFilter(django_filters.FilterSet):
): ):
return True return True
return ( return (
len(self.get_cleaned_data("category")) != 0 len(self.get_cleaned_data("tags")) != 0
or len(self.get_cleaned_data("tags")) != 0
or len(self.get_cleaned_data("exclude_tags")) != 0 or len(self.get_cleaned_data("exclude_tags")) != 0
or len(self.get_cleaned_data("recurrences")) != 0 or len(self.get_cleaned_data("recurrences")) != 0
or len(self.get_cleaned_data("city")) != 0 or len(self.get_cleaned_data("city")) != 0
@ -319,8 +355,7 @@ class EventFilter(django_filters.FilterSet):
): ):
return True return True
return ( return (
len(self.get_cleaned_data("category")) != 0 len(self.get_cleaned_data("tags")) != 0
or len(self.get_cleaned_data("tags")) != 0
or len(self.get_cleaned_data("exclude_tags")) != 0 or len(self.get_cleaned_data("exclude_tags")) != 0
or len(self.get_cleaned_data("recurrences")) != 0 or len(self.get_cleaned_data("recurrences")) != 0
or len(self.get_cleaned_data("city")) != 0 or len(self.get_cleaned_data("city")) != 0
@ -371,7 +406,8 @@ def month_view(request, year=None, month=None):
if month is None: if month is None:
month = now.month month = now.month
filter = EventFilter(request.GET, queryset=get_event_qs(request), request=request) request = EventFilter.set_default_values(request)
filter = EventFilter(request.GET, get_event_qs(request), request=request)
cmonth = CalendarMonth(year, month, filter) cmonth = CalendarMonth(year, month, filter)
context = { context = {
@ -392,7 +428,7 @@ def week_view(request, year=None, week=None, home=False):
request = EventFilter.set_default_values(request) request = EventFilter.set_default_values(request)
filter = EventFilter(request.GET, queryset=get_event_qs(request), request=request) filter = EventFilter(request.GET, get_event_qs(request), request=request)
cweek = CalendarWeek(year, week, filter) cweek = CalendarWeek(year, week, filter)
context = {"year": year, "week": week, "calendar": cweek, "filter": filter} context = {"year": year, "week": week, "calendar": cweek, "filter": filter}