amélioration de la navigation

src/agenda_culturel/static/css/style.css

@@ -19,7 +19,7 @@ body {
     color: #000;
 }
 
-.cat.selected, .mode.selected {
+span.cat, span.mode {
     cursor: default;
 }
 
@@ -36,3 +36,21 @@ a.mode:hover {
     background-color: #444;
     color: #fff;
 }
+
+.cat a.close {
+    text-decoration: none;
+    height: 1.6em;
+    width: 1.6em;
+    display: inline-block;
+    line-height: 1.6em;
+    background: #eee;
+    color: #000;
+    border-radius: 0.8em;
+    text-align: center;
+    font-weight: bold;
+    margin-left: 0.4em;
+    margin-right: -0.8em;
+}
+.cat a.close:hover {
+    background: #fff;
+}

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

@@ -24,9 +24,9 @@
         <div id="categories" class="nav-buttons">
             {% for cat in categories %}
                 {% if category == cat %}
-                <span class="cat {{ cat.css_class }} selected">{{ cat }}</span>
+                <span class="cat {{ cat.css_class }} selected">{{ cat }} <a href="{% url 'view_mode' selected_mode %}" class="close">✕</a></span>
                 {% else %}
-                    <a href="{% url 'view_mode_cat' selected_mode cat.pk %}" class="cat {{ cat.css_class }}">{{ cat }}</a>
+                    <a href="{% url 'view_mode_cat' selected_mode cat.pk %}" class="cat {{ cat.css_class }} {% if category == None %}selected{% endif %}">{{ cat }}</a>
                 {% endif %}
             {% endfor %}
         </div>

src/agenda_culturel/templatetags/cat_extra.py

@@ -68,13 +68,17 @@ def css_categories():
         result += "}"
 
         result += "a." + c.css_class() + ":hover {"
-        result += background_color_adjust_color(adjust_lightness_saturation(c.color, 0.1, 1.2))
+        result += background_color_adjust_color(adjust_lightness_saturation(c.color, 0.2, 1.2))
         result += "}"
 
         result += "." + c.css_class() + ".selected {"
         result += background_color_adjust_color(c.color)
         result += "}"
 
+        result += "span." + c.css_class() + ".selected:hover {"
+        result += background_color_adjust_color(adjust_lightness_saturation(c.color, 0.02, 1.0))
+        result += "}"
+
 
     result += '</style>'
     return mark_safe(result)