Amélioration du rendu des pictos de catégories

Fix #391

src/agenda_culturel/static/style.scss

@@ -71,6 +71,21 @@ body>footer {
     font-size: 80%;
 }
 
+.cat.picto {
+    height: 1.6em;
+    width: 1.6em;
+    padding: 0 0.2em;
+    border-radius: .8em;
+    img {
+        margin-top: 0.1em;
+    }
+}
+.cat img {
+    @media only screen and (prefers-color-scheme: light) {
+        filter: invert(1);
+    }
+}
+
 .cat[data-tooltip]:not(a, button, input),
 .recurrent span[data-tooltip] {
     border: 0;

src/agenda_culturel/templates/agenda_culturel/page-month.html

@@ -155,7 +155,7 @@
                     <ul>
                       {% for category_group, events in day.events_by_category_ordered %}
                         <li>
-                          {{ events.0.category | circle_cat }}
+                          {{ events.0.category | circle_cat_picto }}
                           <a href="{{ day.date | url_day:category }}?{{ filter.get_url|add_url_category:events.0.category }}"
                              data-target="{{ daytag }}-category-{{ events.0.category.pk }}"
                              onClick="toggleModal(event)">{{ events | length }} {{ category_group }}</a>

src/agenda_culturel/templates/agenda_culturel/page-upcoming.html

@@ -191,7 +191,7 @@
                     </li>
                   {% endif %}
                   <li>
-                    {{ event.category | circle_cat:event.has_recurrences }}
+                    {{ event.category | circle_cat_picto:event.has_recurrences }}
                     {% if event.start_time %}{{ event.start_time }}{% endif %}
                     {{ event|picto_status }} <a href="#event-{{ event.id }}">{{ event.title|no_emoji }}</a> {{ event|tw_badge }}
                   </li>

src/agenda_culturel/templates/agenda_culturel/page-week.html

@@ -144,7 +144,7 @@
                             </li>
                           {% endif %}
                           <li>
-                            {{ event.category | circle_cat:event.has_recurrences }}
+                            {{ event.category | circle_cat_picto:event.has_recurrences }}
                             {% if event.start_day == day.date and event.start_time %}{{ event.start_time }}{% endif %}
                             {{ event|picto_status }} <a href="{{ event.get_absolute_url }}"
     data-target="event-{{ event.id }}"

src/agenda_culturel/templatetags/cat_extra.py

@@ -219,6 +219,40 @@ def circle_cat(category, recurrence=False):
         )
 
 
+@register.filter
+def circle_cat_picto(category, recurrence=False):
+    if category is None:
+        category = Category.get_default_category()
+    c = category.css_class()
+    n = category.name
+
+    picto = (
+        '<span class="cat '
+        + c
+        + ' circ-cat picto" data-tooltip="'
+        + n
+        + '">'
+        + '<img src="'
+        + (
+            category.pictogram.url + '" alt="' + category.name + '" />'
+            if category.pictogram
+            else ""
+        )
+        + "</span>"
+    )
+    if recurrence:
+        return mark_safe(
+            picto
+            + '<span class="cat recurrent '
+            + c
+            + ' circ-cat">'
+            + picto_from_name("repeat", n + " [récurrent]")
+            + "</span>"
+        )
+    else:
+        return mark_safe(picto)
+
+
 def legend_cat(category, url, selected=True, first=False, with_title=False):
     c = category.css_class()
     n = category.name