CSS (especially for small screens) and JS fixes

2 files changed, 158 insertions, 12 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();