UI improvments

2 files changed, 20 insertions, 5 deletions

diff --git a/chimere_example_static/chimere/css/extra-styles.css b/chimere_example_static/chimere/css/extra-styles.css
index ab994dc..f95f6e9 100644
--- a/chimere_example_static/chimere/css/extra-styles.css
+++ b/chimere_example_static/chimere/css/extra-styles.css
@@ -135,8 +135,8 @@ label.labelSpan.olButton{
 #detail-wrapper{
     position:absolute;
     z-index:5;
-    right:auto;
-    left:0;
+    left:auto;
+    right:0;
     bottom:0;
     top:0;
     width:400px;
@@ -150,9 +150,19 @@ label.labelSpan.olButton{
     display:None;
 }
 
+.category_name{
+    font-weight:bold;
+}
+
+
+li.main_category > span.category_name:hover{
+    cursor:auto;
+}
+
 .subcategory label{
-    padding: 0.2em 0.5em;
+    padding: 0 0.5em;
     border-radius:5px;
+    font-weight:normal;
 }
 
 .subcategory.selected label{
@@ -168,6 +178,11 @@ label.labelSpan.olButton{
     display:none;
 }
 
+.cat_image{
+    display:inline-block;
+    width:30px;
+}
+
 #main-map {
     height: auto;
     bottom: 0px;
diff --git a/templates/chimere/blocks/categories.html b/templates/chimere/blocks/categories.html
index 4e65f1e..9ef4e29 100644
--- a/templates/chimere/blocks/categories.html
+++ b/templates/chimere/blocks/categories.html
@@ -4,14 +4,14 @@
     <li class='main_category'>
         <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}}'>
-        {% trans category.name %}
+        <span class='category_name'>{% trans category.name %}</span>
         <span class="glyphicon glyphicon-zoom-in zoom_image zoom_to_category" id="zoom_to_category_{{category.id}}"></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'>
                 <input type='checkbox' name='category_{{sub_category.id}}' id='category_{{sub_category.id}}'{% if sub_category.selected %} checked='checked'{% endif %}/>
                 <label for='category_{{sub_category.id}}'>
-                    <img alt='{{ sub_category.name }}' src='{{ MEDIA_URL }}{{sub_category.icon.image}}'/>
+                    <span class='cat_image'><img alt='{{ sub_category.name }}' src='{{ MEDIA_URL }}{{sub_category.icon.image}}'/></span>
                     {% trans sub_category.name %}
                 </label>
                 <span class="glyphicon glyphicon-zoom-in zoom_image zoom_to_subcategory" id="zoom_to_subcategory_{{sub_category.id}}"></span>