Simplification de l'affichage du choix des catégories

src/agenda_culturel/static/style.scss

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

src/agenda_culturel/templatetags/cat_extra.py

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