Improve category layout

2 files changed, 31 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 {