UI: improve category display

3 files changed, 47 insertions, 18 deletions

diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css
index ab27470..54fa7ab 100644
--- a/chimere/static/chimere/css/styles.css
+++ b/chimere/static/chimere/css/styles.css
@@ -61,7 +61,8 @@ div.warning, .errorlist{
 div.warning,
 #content,
 .action li.selected,
-#panel, #map-footer{
+#panel, #map-footer,
+#utils-div{
     border:1px solid #327e04;
 }
 
@@ -234,19 +235,6 @@ ul#action-2 {
     padding:2px;
 }
 
-#panel{
-    padding:0;
-    position:absolute;
-    z-index:5;
-    top:50px;
-    right:18px;
-    width:300px;
-}
-
-.simple #panel{
-    top:5px;
-}
-
 #utils-div{
     position:absolute;
     z-index:5;
@@ -404,15 +392,53 @@ ul#share li{
     margin:0;
 }
 
-#panel #categories{
+#frm_categories{
+    padding:0;
     margin:0;
+}
+
+#panel{
+    position:absolute;
+    z-index:5;
+    top:50px;
+    right:18px;
+    width:300px;
+    bottom:44px;
+    overflow:auto;
+    padding:0.5em;
+    padding-top:0;
+}
+
+.simple #panel{
+    top:5px;
+}
+
+
+#panel #categories{
     padding:0;
     width:290px;
+    z-index:5;
+}
+
+/*.panel-minified {*/
+#panel{
+    bottom:None;
+}
+
+#panel.panel-minified #categories > ul{
     height:160px;
     overflow:auto;
-    z-index:5;
+    /*width:285px;*/
 }
 
+#panel.panel-minified{
+    height:200px;
+    bottom:auto;
+    overflow:visible;
+}
+
+
+
 .simple #panel #categories{
     display:None;
 }
@@ -426,8 +452,6 @@ ul#share li{
 #categories > ul{
     margin:0;
     padding:0 10px;
-    overflow:auto;
-    height:160px;
     width:270px;
 }
 
diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index 565ad27..5c5fbec 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -361,6 +361,7 @@ See the file COPYING for details.
                         if (settings.current_popup == feature.popup) {
                             feature.popup.hide();
                             if (!settings.simple){
+                                $('#panel').removeClass('panel-minified');
                                 $('#detail').hide();
                             }
                         } else {
@@ -436,6 +437,7 @@ See the file COPYING for details.
                             }
                             else {
                                 if (!settings.simple) {
+                                    $('#panel').addClass('panel-minified');
                                     $('#detail').html(data).show();
                                 }
                                 else {
@@ -602,6 +604,7 @@ See the file COPYING for details.
                 {
                     settings.current_popup.hide();
                     if (!settings.simple){
+                        $('#panel').removeClass('panel-minified');
                         $('#detail').hide();
                     }
                 }
diff --git a/chimere/templates/chimere/detail.html b/chimere/templates/chimere/detail.html
index faf6db4..a5ede4d 100644
--- a/chimere/templates/chimere/detail.html
+++ b/chimere/templates/chimere/detail.html
@@ -1,6 +1,7 @@
 {% load i18n sanitize chimere_tags %}
 <h2 class='ui-widget ui-state-default ui-corner-all ui-widget-header'>{{ marker.name }}</h2>
 <div id='detail_content'>
+    {% if marker.default_pictures or marker.default_pictures%}
     <div class='small-gallery'>
     {% for picture in marker.default_pictures %}
         {% multimedia_render picture %}
@@ -9,6 +10,7 @@
         {% multimedia_render multimedia_item %}
     {%endfor%}
     </div>
+    {%endif%}
 <div>
     {% if dated %}
     <p id='detail_start_date'><label>{% trans "Date:" %}</label> <span>{{marker.start_date|date:"D d M Y"}}