Manage icon display on categories

3 files changed, 33 insertions, 2 deletions

diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css
index d1036a8..92da25e 100644
--- a/chimere/static/chimere/css/styles.css
+++ b/chimere/static/chimere/css/styles.css
@@ -2240,10 +2240,13 @@ span#permalink, .navbar-nav .lbl, #areas-div label, #permalink, #simple_button,
     display: none;
 }
 
-.description_icon{
+.subcategory-icon, .description_icon{
     position: absolute;
     right: 5px;
     padding: 3px;
+}
+
+.description_icon{
     background-color: white;
     border: 1px solid #999;
     border-radius: 5px;
@@ -2251,6 +2254,24 @@ span#permalink, .navbar-nav .lbl, #areas-div label, #permalink, #simple_button,
     display: none;
 }
 
+.subcategory-icon{
+    margin-top: 2px;
+}
+
+.subcategory-icon img{
+    max-height: 20px;
+}
+
+.subcategory .category-icon-off,
+.subcategory > .selected .category-icon-on{
+    display: block;
+}
+
+.subcategory .category-icon-on,
+.subcategory > .selected .category-icon-off{
+     display: none;
+}
+
 .rslides {
     position: relative;
     list-style: none;
diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index 15adbe3..319e93a 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -1821,7 +1821,7 @@ function transformCoordToLonLat(coord) {
                 $('.subcategories li input').bind("click", function (e) {
                     $('#search-result').html('');
                     var c_name = $(this).attr('name');
-                    c_name = c_name.substr(c_name.lastIndexOf("_")+1);
+                    c_name = c_name.substr(c_name.lastIndexOf("_") + 1);
                     var par = $(this).parent();
                     if ($(this).prop('checked')){
                         par.addClass('selected');
diff --git a/chimere/templates/chimere/blocks/categories.html b/chimere/templates/chimere/blocks/categories.html
index 0b2ac9b..3f2a3f8 100644
--- a/chimere/templates/chimere/blocks/categories.html
+++ b/chimere/templates/chimere/blocks/categories.html
@@ -21,6 +21,16 @@
                 <li id='li_sub_{{sub_category.id}}' class='subcategory'
                     data-subcategory="{{sub_category.id}}">
                     <span>
+                    <div class="subcategory-icon">
+                    {% if sub_category.menu_icon.image and sub_category.menu_icon_off.image%}
+                        <img src="{{sub_category.menu_icon_off.image.url}}"
+                             class="category-icon-off">
+                        <img src="{{sub_category.menu_icon.image.url}}"
+                             class="category-icon-on">
+                    {% else %}
+                        <img src="{{sub_category.icon.image.url}}">
+                    {% endif %}
+                    </div>
                     {% if sub_category.description %}
                     <a href="#"><i class="description_icon fa fa-info-circle"
                        aria-hidden="true"