Improve category layout

3 files changed, 35 insertions, 21 deletions

diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css
index ecb74f4..1084ae5 100644
--- a/chimere/static/chimere/css/styles.css
+++ b/chimere/static/chimere/css/styles.css
@@ -694,11 +694,12 @@ span.icon{
 #categories li{
     font-variant:small-caps;
     list-style:none;
+    padding: 0.1em 1em;
 }
 
 #categories li li{
     font-variant:normal;
-    margin-left:20px;
+    padding: 0;
 }
 
 ul#categories li li a{
@@ -709,19 +710,46 @@ ul#categories li li a{
 
 #categories ul ul{
     margin:0;
-    padding:0;
+    padding:0.5em 0;
 }
 
 ul.subcategories label img{
     height:20px;
 }
 
+#categories li.main_category:hover{
+    background-color: #eee;
+    cursor:pointer;
+}
+
 li.main_category .category_name:hover,
 li.main_category > span:hover,
 li.main_category label:hover{
     cursor:pointer;
 }
 
+#categories input{
+    display:None;
+}
+
+.category_name{
+    font-weight:bold;
+    padding: 0 0.5em;
+    border-radius:5px;
+}
+
+.subcategory label{
+    padding: 0 0.5em;
+    border-radius:5px;
+    font-weight:normal;
+}
+
+.category-selected .category_name,
+.subcategory label:hover,
+.subcategory.selected label{
+    background-color:rgb(175, 231, 175);
+}
+
 #categories li#display_submited{
     font-variant:normal;
 }
@@ -1526,24 +1554,6 @@ label.labelSpan.olButton{
     max-width: 350px;
 }
 
-#categories input{
-    display:None;
-}
-
-.category_name{
-    font-weight:bold;
-}
-
-.subcategory label{
-    padding: 0 0.5em;
-    border-radius:5px;
-    font-weight:normal;
-}
-
-.subcategory.selected label{
-    background-color:rgb(175, 231, 175);
-}
-
 #panel #categories,
 #categories > ul {
     width:auto;
diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index e573225..df5dea5 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -1478,7 +1478,7 @@ jQuery.expr[":"].hovering = function(elem) {
             }
             var _toggle_categories = function (subcategory_element) {
                 var parent = subcategory_element.closest('ul');
-                var parent_label = parent.parent().find("> span");
+                var parent_label = parent.parent();
                 if (parent.find('input[type=checkbox]:checked').length){
                     parent_label.addClass('category-selected');
                 } else {
diff --git a/chimere/templates/chimere/blocks/categories.html b/chimere/templates/chimere/blocks/categories.html
index b674e12..282d008 100644
--- a/chimere/templates/chimere/blocks/categories.html
+++ b/chimere/templates/chimere/blocks/categories.html
@@ -5,7 +5,9 @@
         <img class="control_image toggle_category" id="maincategory_img_{{category.id}}" alt="control" src="{{ STATIC_URL }}chimere/img/{% if category.selected %}minus.png{% else %}plus.png{% endif %}" />
         <input type="checkbox" id='checkall_{{category.id}}'>
         <span class='category_name'>{% trans category.name %}</span>
+        {% comment %}
         <span class="glyphicon glyphicon-zoom-in zoom_image zoom_to_category" id="zoom_to_category_{{category.id}}"></span>
+        {% endcomment %}
         <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'>
@@ -14,7 +16,9 @@
                     <span class='cat_image'><img alt='{{ sub_category.name }}' src='{{ MEDIA_URL }}{{sub_category.icon.image}}'/></span>
                     {% trans sub_category.name %}
                 </label>
+                {% comment %}
                 <span class="glyphicon glyphicon-zoom-in zoom_image zoom_to_subcategory" id="zoom_to_subcategory_{{sub_category.id}}"></span>
+                {% endcomment %}
             </li>
             {% endfor %}
             {% if category.description %}