CSS (especially for small screens) and JS fixes

4 files changed, 167 insertions, 17 deletions

diff --git a/chimere_example_static/chimere/css/extra-styles.css b/chimere_example_static/chimere/css/extra-styles.css
index 29a1c30..f5d4c3c 100644
--- a/chimere_example_static/chimere/css/extra-styles.css
+++ b/chimere_example_static/chimere/css/extra-styles.css
@@ -38,6 +38,7 @@ a:hover, a:focus {
 
 .container{
     max-width:none;
+    padding-right: 0;
 }
 
 #utils-div{
@@ -76,12 +77,15 @@ a:hover, a:focus {
     background-image:url('../img/logo.jpg');
     background-position:bottom center;
     background-repeat:no-repeat;
+    z-index:12;
 }
 
 #detail {
     right:auto;
     left:0;
     bottom:0;
+    top:0;
+    padding-top:100px;
     border:0 transparent;
     border-right:1px solid #E7E7E7;
     border-top:1px solid #E7E7E7;
@@ -116,7 +120,7 @@ a:hover, a:focus {
 
 #footer .map-footer {
     bottom: 0;
-    right: 400px;
+    right: 420px;
     margin:0;
     background-color:#fff;
     opacity:0.8;
@@ -127,11 +131,11 @@ a:hover, a:focus {
 }
 
 .olControlPanPanel {
-    top: 30px;
+    top: 60px;
 }
 
 .olControlZoomPanel {
-    top: 95px;
+    top: 125px;
 }
 
 span#permalink, .navbar-nav .lbl, #areas-div label, #permalink, #simple_button,
@@ -165,6 +169,10 @@ span#permalink, .navbar-nav .lbl, #areas-div label, #permalink, #simple_button,
     padding: 10px 15px;
 }
 
+#areas-div{
+    line-height:42px;
+}
+
 .nav-pills > li#simple_button-lnk > a > .fa{
     color:#777;
 }
@@ -178,7 +186,7 @@ span#permalink, .navbar-nav .lbl, #areas-div label, #permalink, #simple_button,
 }
 
 .navbar-default .navbar-brand{
-    color:#327E04;
+    color:#54C200;
     font-size:1em;
 }
 
@@ -206,3 +214,100 @@ span#permalink, .navbar-nav .lbl, #areas-div label, #permalink, #simple_button,
     content:"\f14e";
 }
 
+#maps-lnk label, #contact-lnk .lbl, #simple_button-lnk .lbl, #rss-lnk .lbl{
+    display:none;
+}
+
+#permalink,
+#simple_button-lnk lbl{
+    padding: 0 0.8em;
+}
+
+@media (min-width: 1552px) {
+    #maps-lnk label,
+    #contact-lnk .lbl,
+    #rss-lnk .lbl{
+        display:inline;
+    }
+}
+
+@media (min-width: 1200px) {
+    #simple_button-lnk .lbl{
+        display:inline;
+    }
+}
+
+@media (min-width: 1100px) {
+    #panel{
+        padding-top:16px;
+    }
+    #detail{
+        padding-top:50px;
+    }
+}
+
+@media (max-width: 767px) {
+    #simple_button-lnk .lbl, #maps-lnk label, #contact-lnk .lbl, #rss-lnk .lbl{
+        display:inline-block;
+    }
+    .selection-sep{
+        width: 80%;
+        border-bottom: 1px solid #CCC;
+        margin: 0 0 0.5em 0;
+    }
+
+    #permalink-lnk,
+    #simple_button{
+        line-height: 50px;
+    }
+    #panel{
+        padding-top:16px;
+    }
+    #detail{
+        padding-top:50px;
+    }
+}
+
+.show-hide-panel{
+    position:absolute;
+    right: 400px;
+    top: 0;
+    bottom: 0;
+    background-color:#eee;
+    width:20px;
+    z-index:10;
+    color:#666;
+}
+
+.show-hide-panel:hover{
+    cursor:pointer;
+}
+
+.show-hide-panel span {
+    position:absolute;
+    left:2px;
+    top:200px;
+}
+
+#show-panel{
+    right:0;
+    display:none;
+}
+
+@media (max-width: 767px) {
+    #show-panel{
+        display:block;
+    }
+    #panel, #hide-panel{
+        display:none;
+    }
+    #footer .map-footer {
+        right:20px;
+    }
+}
+
+@media (min-height: 400px) {
+    .show-hide-panel span {
+        top:300px;
+    }
+}
diff --git a/chimere_example_static/chimere/js/interface.js b/chimere_example_static/chimere/js/interface.js
index c4fa536..c0c00bf 100644
--- a/chimere_example_static/chimere/js/interface.js
+++ b/chimere_example_static/chimere/js/interface.js
@@ -1,16 +1,11 @@
 $(function(){
+
     if (has_search){
         $('a[href=#categories]').click(function(){
-            $(this).parent().parent().children().removeClass('active');
-            $(this).parent().addClass('active');
-            $("#search-box").fadeOut(400,
-                    function(){ $("#categories").fadeIn() });
+            show_panel(display_categories);
         });
         $('a[href=#search-box]').click(function(){
-            $(this).parent().parent().children().removeClass('active');
-            $(this).parent().addClass('active');
-            $("#categories").fadeOut(400,
-                    function(){ $("#search-box").fadeIn() });
+            show_panel(display_search);
         });
         $('a[href=#search-box]').click();
     } else {
@@ -18,8 +13,54 @@ $(function(){
     }
     highlight_selected_categories();
     $('.subcategory label').click(highlight_selected_categories);
+    $('#categories-lnk, #search-lnk').click(function(){
+        if($('.navbar-toggle').css('display') !='none'){
+            $(".navbar-toggle").click();
+        }
+    });
+    $('#hide-panel').click(hide_panel);
+    $('#show-panel').click(show_panel);
+    $('#close-detail').click(function(){
+        $('#detail').fadeOut();
+    });
 });
 
+function display_categories(){
+    $('a[href=#categories]').parent().parent().children().removeClass('active');
+    $('a[href=#categories]').parent().addClass('active');
+    $("#search-box").fadeOut(400,
+            function(){ $("#categories").fadeIn(); });
+}
+
+function display_search(){
+    $('a[href=#search-box]').parent().parent().children().removeClass('active');
+    $('a[href=#search-box]').parent().addClass('active');
+    $("#categories").fadeOut(400,
+            function(){ $("#search-box").fadeIn(); $('#id_q').focus(); });
+}
+
+function show_panel(fct){
+    if(!fct) fct = function(){};
+    if($('#panel').css('display') == 'none'){
+        $('#show-panel').fadeOut(200, function(){
+            $('#hide-panel').fadeIn(500);
+            $("#panel").fadeIn(500);
+            $("#panel").fadeIn(500, fct);
+        });
+    } else {
+        fct();
+    }
+}
+
+function hide_panel(){
+    if($('#panel').css('display') != 'none'){
+        $('#hide-panel').fadeOut(500);
+        $("#panel").fadeOut(500, function(){
+            $('#show-panel').fadeIn();
+        });
+    }
+}
+
 function highlight_selected_categories(){
     $('.subcategory input').each(function(){
         var lbl = $(this).parent();
diff --git a/templates/chimere/blocks/actions.html b/templates/chimere/blocks/actions.html
index 4c4865f..1aaf5c2 100644
--- a/templates/chimere/blocks/actions.html
+++ b/templates/chimere/blocks/actions.html
@@ -6,12 +6,12 @@
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
-      <a class="navbar-brand" href="#"><span class='fa fa-globe'></span></a>
+      <a class="navbar-brand" href="."><span class='fa fa-globe'></span></a>
     </div>
     <div class="navbar-collapse collapse">
       <ul class="nav navbar-nav">
     {% for action, subactions in actions %}
-        <li{% ifequal action.id action_selected.0 %} class="active"{% endifequal %}>
+        <li id='{{action.id}}-lnk'{% ifequal action.id action_selected.0 %} class="active"{% endifequal %}>
           <a href='{{ action.url }}' onclick='jQuery("#map").chimere("saveExtent");'>
             <span class='fa fa-chimere-action fa-chimere-{{action.id}}'></span>
             <span class='lbl'>{{ action.label }}</span>
@@ -22,14 +22,16 @@
       <div class='tabbable navbar-right'>
       <ul class="nav nav-pills">
         {% if is_map %}
+        <li class='selection-sep'> </li>
         {% if areas_visible %}
-        <li><span class='fa fa-chimere-action fa-chimere-maps'></span>{% display_areas %}</li>
+        <li id='maps-lnk'><span class='fa fa-chimere-action fa-chimere-maps'></span>{% display_areas %}</li>
         <li id='permalink-lnk'><span class='fa fa-chimere-action fa-bookmark'></span><span id='permalink'></span></li>
         <li>{% routing %}</li>
         <li>{% display_welcome %}</li>
         <li>{% display_news news_visible %}</li>
-        <li id="simple_button-lnk"><a id='simple_button' href='{% url chimere:simple_index area_name_slash %}'><span class='fa fa-chimere-action fa-simplybuilt'></span> {% trans "Simple map" %}</a></li>
+        <li id="simple_button-lnk"><a id='simple_button' href='{% url chimere:simple_index area_name_slash %}'><span class='fa fa-chimere-action fa-simplybuilt'></span><span class='lbl'> {% trans "Simple map" %}</span></a></li>
         {% endif %}
+        <li class='selection-sep'> </li>
         <li id='categories-lnk'{% if not has_search %} class='active'{%endif%}><a href='#categories' data-toggle='panel'><span class='fa fa-chimere-action fa-check-circle-o'></span> {% trans "Categories "%}</a></li>
         {% if has_search %}
         <li id='search-lnk' class='active'><a href='#search-box' data-toggle='panel'><span class="glyphicon glyphicon-search"></span> {% trans "Search" %}</a></li>
diff --git a/templates/chimere/main_map.html b/templates/chimere/main_map.html
index 9d99c05..caad4b4 100644
--- a/templates/chimere/main_map.html
+++ b/templates/chimere/main_map.html
@@ -12,7 +12,9 @@
 {% endblock %}
 {% block message_edit %}{% endblock %}
 {% block sidebar %}
-    <div id='panel'class='navbar-default'>
+    <div class='show-hide-panel' id='hide-panel'><span class='fa fa-arrow-circle-right'></span></div>
+    <div class='show-hide-panel' id='show-panel'><span class='fa fa-arrow-circle-left'></span></div>
+    <div id='panel' class='navbar-default'>
       <form id="frm_categories"><div id='categories'></div></form>
       <div id='search-box' class='ui-widget ui-corner-all'></div>
     </div>