Triangles et couleur de fond des catégories maintenant en JS

2 files changed, 96 insertions, 96 deletions

diff --git a/static/saclay/css/saclay.css b/static/saclay/css/saclay.css
index 40b83d1..e1a286d 100644
--- a/static/saclay/css/saclay.css
+++ b/static/saclay/css/saclay.css
@@ -19,12 +19,33 @@
 
 #ul_categories li.main_category > span{
     color:transparent;
-    font-size:0;
-}
-
+    font-weight: bold;
+}
+
+.triangle{
+    display: block;
+    float: left;
+    margin-top: 8px;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 11px 0 10px 10px;
+    border-style: solid inset solid solid;
+}
+
+#ul_categories .subcategories#maincategory_1 li label,
+#ul_categories .subcategories#maincategory_1 label,
+#ul_categories .subcategories#maincategory_2 label,
+#ul_categories .subcategories#maincategory_3 label,
+#ul_categories .subcategories#maincategory_4 label,
+#ul_categories .subcategories#maincategory_5 label,
+#ul_categories .subcategories#maincategory_6 label,
+#ul_categories .subcategories#maincategory_7 label,
+#ul_categories .subcategories#maincategory_8 label,
+#ul_categories .subcategories#maincategory_9 label,
+#ul_categories .subcategories#maincategory_12 label,
 .main_category > span > label{
-    color:transparent;
-    font-size:0;
+    color: #644e38;
 }
 
 .main_category.toggle_plus > span#main_category_1 > label,
@@ -50,131 +71,107 @@
     background-color:transparent;
 }
 
-#main_category_1{
-    background-image:url('../images/categories/cat_culture.png');
-    background-repeat:no-repeat;
-}
-
-#main_category_1.category-selected{
-    background-image:url('../images/categories/cat_culture_on.png');
-}
-
-#maincategory_1 label{
-    color:#cd5a5a;
-}
-
-#main_category_2{
-    background-image:url('../images/categories/cat_event.png');
-    background-repeat:no-repeat;
-}
-
-#main_category_2.category-selected{
-    background-image:url('../images/categories/cat_event_on.png');
-}
-
-#maincategory_2 label{
-    color:#996998;
-}
-
-#main_category_3{
-    background-image:url('../images/categories/cat_patrimoine.png');
-    background-repeat:no-repeat;
-}
-
-#main_category_3.category-selected{
-    background-image:url('../images/categories/cat_patrimoine_on.png');
-}
-
-#maincategory_3 label{
-    color:#c49c86;
-}
-
-#main_category_4{
-    background-image:url('../images/categories/cat_sport.png');
-    background-repeat:no-repeat;
-}
-
-#main_category_4.category-selected{
-    background-image:url('../images/categories/cat_sport_on.png');
+#main_category_1.category-selected .triangle,
+#main_category_2.category-selected .triangle,
+#main_category_3.category-selected .triangle,
+#main_category_4.category-selected .triangle,
+#main_category_5.category-selected .triangle,
+#main_category_6.category-selected .triangle,
+#main_category_7.category-selected .triangle,
+#main_category_8.category-selected .triangle,
+#main_category_9.category-selected .triangle,
+#main_category_12.category-selected .triangle{
+    border-color: transparent transparent transparent #fff;
 }
 
-#maincategory_4 label{
-    color:#85ae7a;
+#main_category_1 .triangle{
+    border-color: transparent transparent transparent #c6595c;
 }
 
-#main_category_5{
-    background-image:url('../images/categories/cat_pratique.png');
-    background-repeat:no-repeat;
+.main_category.toggle_plus > span#main_category_1.category-selected > label,
+.main_category.toggle_minus > span#main_category_1.category-selected > label{
+    background-color: #c6595c;
+    color: #fff;
 }
 
-#main_category_5.category-selected{
-    background-image:url('../images/categories/cat_pratique_on.png');
+#main_category_2 .triangle{
+    border-color: transparent transparent transparent #976695;
 }
 
-#maincategory_5 label{
-    color:#a8adad;
+.main_category.toggle_plus > span#main_category_2.category-selected > label,
+.main_category.toggle_minus > span#main_category_2.category-selected > label{
+    background-color: #976695;
+    color: #fff;
 }
 
-#main_category_6{
-    background-image:url('../images/categories/cat_mobilites.png');
-    background-repeat:no-repeat;
+#main_category_3 .triangle{
+    border-color: transparent transparent transparent #c49c86;
 }
 
-#main_category_6.category-selected{
-    background-image:url('../images/categories/cat_mobilites_on.png');
+.main_category.toggle_plus > span#main_category_3.category-selected > label,
+.main_category.toggle_minus > span#main_category_3.category-selected > label{
+    background-color: #c49c86;
+    color: #fff;
 }
 
-#maincategory_6 label{
-    color:#697c92;
+#main_category_4 .triangle{
+    border-color: transparent transparent transparent #85ae7a;
 }
 
-#main_category_7{
-    background-image:url('../images/categories/cat_agri.png');
-    background-repeat:no-repeat;
+.main_category.toggle_plus > span#main_category_4.category-selected > label,
+.main_category.toggle_minus > span#main_category_4.category-selected > label{
+    background-color: #85ae7a;
+    color: #fff;
 }
 
-#main_category_7.category-selected{
-    background-image:url('../images/categories/cat_agri_on.png');
+#main_category_5 .triangle{
+    border-color: transparent transparent transparent #a8adad;
 }
 
-#maincategory_7 label{
-    color:#eba44a;
+.main_category.toggle_plus > span#main_category_5.category-selected > label,
+.main_category.toggle_minus > span#main_category_5.category-selected > label{
+    background-color: #a8adad;
+    color: #fff;
 }
 
-#main_category_8{
-    background-image:url('../images/categories/cat_balade.png');
-    background-repeat:no-repeat;
+#main_category_6 .triangle{
+    border-color: transparent transparent transparent #697c92;
 }
 
-#main_category_8.category-selected{
-    background-image:url('../images/categories/cat_balade_on.png');
+.main_category.toggle_plus > span#main_category_6.category-selected > label,
+.main_category.toggle_minus > span#main_category_6.category-selected > label{
+    background-color: #697c92;
+    color: #fff;
 }
 
-#maincategory_8 label{
-    color:#d38fac;
+#main_category_7 .triangle{
+    border-color: transparent transparent transparent #eba44a;
 }
 
-#ul_categories #maincategory_12.subcategories li label,
-#maincategory_12 label{
-     color:#e9d66c;
+.main_category.toggle_plus > span#main_category_7.category-selected > label,
+.main_category.toggle_minus > span#main_category_7.category-selected > label{
+    background-color: #eba44a;
+    color: #fff;
 }
 
-#ul_categories #maincategory_12.subcategories li .selected label{
-    color:#fff;
-    background-color:#e9d66c;
+#main_category_8 .triangle{
+    border-color: transparent transparent transparent #d38fac;
 }
 
-#main_category_12{
-    background-image:url('../images/categories/cat_restau.png');
-    background-repeat:no-repeat;
+.main_category.toggle_plus > span#main_category_8.category-selected > label,
+.main_category.toggle_minus > span#main_category_8.category-selected > label{
+    background-color: #d38fac;
+    color: #fff;
 }
 
-#main_category_12.category-selected{
-    background-image:url('../images/categories/cat_restau_on.png');
+#main_category_12 .triangle{
+    border-color: transparent transparent transparent #e9d66c;
 }
 
-#maincategory_12 label{
-    color:#e9d66c;
+.main_category.toggle_plus > span#main_category_12.category-selected > label,
+.main_category.toggle_minus > span#main_category_12.category-selected > label{
+    background-color: #e9d66c;
+    color: #fff;
 }
 
 /*7 - Cultures - Cinéma*/
diff --git a/templates/chimere/blocks/categories.html b/templates/chimere/blocks/categories.html
index d5242e0..43f48ba 100644
--- a/templates/chimere/blocks/categories.html
+++ b/templates/chimere/blocks/categories.html
@@ -2,8 +2,11 @@
     <ul id='ul_categories'>
         {% for category, lst_sub_categories in sub_categories %}
         <li class='main_category {% if category.selected %}toggle_minus{%else%}toggle_plus{%endif%}'>
-            <span id='main_category_{{category.pk}}'><label>{% trans category.name %}</label>
-            <img class="control_image toggle_category" id="maincategory_img_{{category.id}}" alt="control" src="{{ STATIC_URL }}saclay/images/{% if category.selected %}minus.png{% else %}plus.png{% endif %}" /></span>
+            <span id='main_category_{{category.pk}}'>
+                <i class="triangle"></i>
+                <label>{% trans category.name %}</label>
+                <img class="control_image toggle_category" id="maincategory_img_{{category.id}}" alt="control" src="{{ STATIC_URL }}saclay/images/{% if category.selected %}minus.png{% else %}plus.png{% endif %}" />
+            </span>
             <ul class='subcategories' id='maincategory_{{category.id}}'{% if not category.selected %} style='display:None'{% endif %}>
                 {% for sub_category in lst_sub_categories %}
                 <li id='li_sub_{{sub_category.id}}' class='subcategory'>