jmtrivial/agenda_culturel
4
4
Fork 0
Code Issues 61 Pull Requests 1 Projects 1 Releases Wiki Activity

Simplification de l'affichage du choix des catégories

Browse Source
This commit is contained in:
Jean-Marie Favreau 2024-09-14 14:56:00 +02:00
parent 9a0b62aa16
commit 9fdd3edd0e
2 changed files with 33 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/agenda_culturel/static/style.scss
View File

@ -165,6 +165,20 @@ details[role="list"] summary + ul li.selected>a:hover {
padding: 0.15em 0.4em 0.3em 0.4em;
}
.circ-cat.circ-large {
height: 3em;
width: 3em;
border-radius: 1.5em;
}
.reduced {
opacity: .3;
}
.reduced:hover {
opacity: 1;
}
ul {
margin-left: 1em;
}
@ -176,10 +190,14 @@ span.small-cat {
.simple-button {
@extend .small-cat;
border-radius: 1em;
font-size: 80%;
margin-left: .5em;
padding: .1em .5em;
}
.button-bar {
display: flex;
align-items: center;
column-gap: .3em;
}
svg {
vertical-align: -0.125em;
@ -405,7 +423,7 @@ header .title {
}
body > main {
padding-top: 0;
padding-top: 0.2em;
}
article {

18
src/agenda_culturel/templatetags/cat_extra.py
View File

@ -214,6 +214,14 @@ def circle_cat(category, recurrence=False):
'<span class="cat ' + c + ' circ-cat" data-tooltip="' + n + '"></span>'
)
def large_circle_cat(category, url, selected=True):
c = category.css_class()
n = category.name
class_reduced = '' if selected else 'reduced'
return mark_safe(
'<a href="' + url + '"<span class="cat ' + class_reduced + ' ' + c + ' circ-cat circ-large" data-tooltip="' + n + '"></span></a>'
)
@register.simple_tag
@ -221,23 +229,23 @@ def show_legend(filter):
filter.form.full_clean()
cats = Category.objects.all()
if filter.is_active(only_categories=True):
return mark_safe("<div>" +
return mark_safe('<div class="button-bar">' +
" ".join(
[
small_cat(
large_circle_cat(
c,
filter.get_url_add_categories([c.pk])
if not filter.is_selected(c)
else filter.get_url_remove_categories([c.pk]),
contrast=filter.is_selected(c),
selected=filter.is_selected(c),
)
for c in cats
]
) + ' <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>'
) + ' <a class="simple-button contrast" data-tooltip="Toutes les catégories" href="' + filter.get_url_without_filters() + '" role="button">' + picto_from_name('x-circle') + ' toutes</a></div>'
)
else:
return mark_safe("<div>" +
" ".join(
[small_cat(c, filter.get_url_add_categories([c.pk])) for c in cats]
[large_circle_cat(c, filter.get_url_add_categories([c.pk])) for c in cats]
) + "</div>"
)