diff options
| -rw-r--r-- | static/saclay/css/saclay.css | 166 | ||||
| -rw-r--r-- | templates/chimere/blocks/categories.html | 7 |
2 files changed, 96 insertions, 77 deletions
diff --git a/static/saclay/css/saclay.css b/static/saclay/css/saclay.css index 00e1a43..c00ae5c 100644 --- a/static/saclay/css/saclay.css +++ b/static/saclay/css/saclay.css @@ -46,16 +46,37 @@ ol-attribution ul { #ul_categories li.main_category > span{ color:transparent; - font-size:0; + font-weight: bold; } #ul_categories .subcategories li label { padding: 3px 1em; } +.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, @@ -81,108 +102,97 @@ ol-attribution ul { background-color:transparent; } -#main_category_1{ - background-image:url('../images/categories/cat_culture.png'); - background-repeat:no-repeat; +#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; } -#main_category_1.category-selected{ - background-image:url('../images/categories/cat_culture_on.png'); +#main_category_1 .triangle{ + border-color: transparent transparent transparent #c6595c; } -#maincategory_1 label{ - color:#cd5a5a; +.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_2{ - background-image:url('../images/categories/cat_event.png'); - background-repeat:no-repeat; +#main_category_2 .triangle{ + border-color: transparent transparent transparent #976695; } -#main_category_2.category-selected{ - background-image:url('../images/categories/cat_event_on.png'); +.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; } -#maincategory_2 label{ - color:#996998; +#main_category_3 .triangle{ + border-color: transparent transparent transparent #c49c86; } -#main_category_3{ - background-image:url('../images/categories/cat_patrimoine.png'); - background-repeat:no-repeat; +.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; } -#main_category_3.category-selected{ - background-image:url('../images/categories/cat_patrimoine_on.png'); +#main_category_4 .triangle{ + border-color: transparent transparent transparent #85ae7a; } -#maincategory_3 label{ - color:#c49c86; +.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_4{ - background-image:url('../images/categories/cat_sport.png'); - background-repeat:no-repeat; +#main_category_5 .triangle{ + border-color: transparent transparent transparent #a8adad; } -#main_category_4.category-selected{ - background-image:url('../images/categories/cat_sport_on.png'); +.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; } -#maincategory_4 label{ - color:#85ae7a; +#main_category_6 .triangle{ + border-color: transparent transparent transparent #697c92; } -#main_category_5{ - background-image:url('../images/categories/cat_pratique.png'); - background-repeat:no-repeat; +.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; } -#main_category_5.category-selected{ - background-image:url('../images/categories/cat_pratique_on.png'); +#main_category_7 .triangle{ + border-color: transparent transparent transparent #eba44a; } -#maincategory_5 label{ - color:#a8adad; +.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; } -#main_category_6{ - background-image:url('../images/categories/cat_mobilites.png'); - background-repeat:no-repeat; +#main_category_8 .triangle{ + border-color: transparent transparent transparent #d38fac; } -#main_category_6.category-selected{ - background-image:url('../images/categories/cat_mobilites_on.png'); -} - -#maincategory_6 label{ - color:#697c92; -} - -#main_category_7{ - background-image:url('../images/categories/cat_agri.png'); - background-repeat:no-repeat; -} - -#main_category_7.category-selected{ - background-image:url('../images/categories/cat_agri_on.png'); -} - -#maincategory_7 label{ - color:#eba44a; -} - -#main_category_8{ - background-image:url('../images/categories/cat_balade.png'); - background-repeat:no-repeat; -} - -#main_category_8.category-selected{ - background-image:url('../images/categories/cat_balade_on.png'); -} - -#maincategory_8 label{ - color:#d38fac; +.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{ @@ -190,8 +200,8 @@ ol-attribution ul { background-repeat:no-repeat; } -#main_category_12.category-selected{ - background-image:url('../images/categories/cat_restau_on.png'); +#main_category_12 .triangle{ + border-color: transparent transparent transparent #e9d66c; } #ul_categories #maincategory_12.subcategories li label, @@ -199,6 +209,12 @@ ol-attribution ul { 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; +} + #ul_categories #maincategory_12.subcategories li .selected label{ color:#fff; background-color:#e9d66c; diff --git a/templates/chimere/blocks/categories.html b/templates/chimere/blocks/categories.html index 05115ef..0fe73df 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'> |