Responsive design adaptation

4 files changed, 315 insertions, 39 deletions

diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css
index f272cc6..1a1bcf9 100644
--- a/chimere/static/chimere/css/styles.css
+++ b/chimere/static/chimere/css/styles.css
@@ -1079,8 +1079,8 @@ div#action-panel{
 }
 
 #panel{
-    bottom:None;
-    height:auto;
+    bottom: auto;
+    height: auto;
 }
 
 #panel.panel-minified #categories > ul{
@@ -2332,21 +2332,21 @@ span#permalink, .navbar-nav .lbl, #areas-div label, #permalink, #simple_button,
 
 .subcategory-icon, .description_icon{
     position: absolute;
-    right: 5px;
     padding: 3px;
     width: 30px;
     text-align: center;
 }
 
 .description_icon{
+    right: 34px;
     background-color: white;
     border: 1px solid #999;
     border-radius: 5px;
-    margin-top: 3px;
     display: none;
 }
 
 .subcategory-icon{
+    right: 5px;
     margin-top: 2px;
 }
 
@@ -2667,10 +2667,6 @@ a#ui-active-menuitem.ui-state-hover{
     margin-bottom:11px;
 }
 
-#marker_hover{
-    background-image:url("../images/bottom-arrow.png");
-}
-
 #map_menu_from{
     background-image:url("../images/menu/icon_from.png");
 }
@@ -3909,13 +3905,22 @@ li.main_category li.subcategory > span > label{
     border: 1px solid #eee;
 }
 
+.help-text{
+    padding: 0.5em 1em;
+}
+
+#categories-help{
+    display: none;
+}
+
 #switch-menu{
     display: none;
+    position: fixed;
     text-align: center;
-    font-size: 1.2em;
+    text-transform: uppercase;
+    font-size: 1.6em;
     padding: 0;
-    position: absolute;
-    top: 98px;
+    top: 78px;
     z-index: 200;
     right: 0;
     left: 0;
@@ -3930,6 +3935,55 @@ li.main_category li.subcategory > span > label{
     background-color: #d5d5d4;
 }
 
+#switch-menu div.disabled{
+    display: none;
+}
+
+#mobile-footer{
+    display: none;
+    position: absolute;
+    bottom: 0;
+    background-color: #f5f5f5;
+    width: 100%;
+    height: 110px;
+    background-image:url('../img/logo.jpg');
+    background-repeat:no-repeat;
+    background-position:left 15px;
+}
+
+#mobile-footer h2{
+    font-size: 3em;
+    padding: 0 0.5em;
+    text-align: right;
+}
+
+#mobile-footer-open-img,
+#mobile-footer .close-img {
+    position: absolute;
+    height: auto;
+    width: 38px;
+    text-align: center;
+    bottom: 105px;
+    left: 0;
+    font-family: arial;
+    font-size: 2em;
+    background-color: #f5f5f5;
+}
+
+#mobile-footer-open-img {
+    display: none;
+    bottom: 0;
+}
+
+.mobile-footer-hidden #mobile-footer{
+    display: none !important;
+}
+
+.mobile-footer-hidden #mobile-footer-open-img {
+    display: block !important;
+}
+
+
 @media (min-width: 1552px) {
     #maps-lnk label,
     #contact-lnk .lbl{
@@ -3962,7 +4016,36 @@ li.main_category li.subcategory > span > label{
     }
 }
 
-@media screen and (max-width: 640px) {
+@media screen and (max-width: 750px) {
+    html, body{
+        overflow: auto;
+    }
+    .modal-dialog.modal-xl {
+        width: auto;
+    }
+    #topbar{
+        position: fixed;
+    }
+    .map-footer, #footer-panel, #panel, #hide-panel, #maps-lnk{
+        display: none;
+    }
+
+    #categories-help{
+        display: block;
+    }
+    .search-box-col, #topbar, #switch-menu{
+        border-bottom: 1px solid;
+        border-color: #60543A;;
+    }
+    
+    #switch-menu > div{
+        border-left: 1px solid;
+    }
+    
+    #switch-menu > div:first{
+        border-left: 0;
+    }
+    
     #news-lnk .lbl, #simple_button-lnk .lbl, #maps-lnk label, #contact-lnk .lbl{
         display:inline-block;
     }
@@ -3987,9 +4070,6 @@ li.main_category li.subcategory > span > label{
     #show-panel{
         display:block;
     }
-    #panel, #hide-panel{
-        display:none;
-    }
     #footer .map-footer {
         right:20px;
     }
@@ -3998,24 +4078,36 @@ li.main_category li.subcategory > span > label{
         display: block;
     }
     .ol-zoom, .layer-switcher{
-        top: 140px;
+        top: 10px;
     }
     .ol-full-screen{
         display:none;
     }
-    #search-listing{
-        padding-top: 25px;
+    #content{
+        margin-top: 0;
     }
     div#sidebar,
     div#panel{
         width: 100%;
         bottom: auto;
+        margin-top: 78px;
+        position: relative;
+    }
+    div#sidebar{
+        height: auto;
+        top: 0;
+        padding: 0;
     }
     div#panel{
         background-size: auto 80px;
         background-repeat: no-repeat;
-        padding-top: 5px;
-        display: block;
+        padding-top: 10px;
+        display: none;
+        margin-top: 0;
+        padding-top: 46px;
+    }
+    #main-map{
+        top: 123px;
     }
     #map-shadow{
         display: none;
@@ -4047,11 +4139,41 @@ li.main_category li.subcategory > span > label{
         right: 50px;
     }
     #edit-button {
+        z-index: 5;
         top: auto;
-        bottom: 60px;
         right: 20px;
         left: auto;
     }
+    .ol-scale-line {
+        right: auto;
+        left: 50px;
+    }
+    #edit-button, .ol-scale-line {
+        bottom: 120px;
+    }
+    .edit .ol-scale-line{
+        left: 8px;
+    }
+    .edit .ol-scale-line,
+    .mobile-footer-hidden #edit-button,
+    .mobile-footer-hidden .ol-scale-line {
+        bottom: 6px;
+    }
+    #detail{
+        z-index: 12;
+        width: 100%;
+        padding-left: 0;
+    }
+    #detail-header{
+        box-shadow: none;
+        width: 100%;
+    }
+    #detail-content{
+        width: 100%;
+    }
+    #detail .share-icon {
+        margin-top: 20px;
+    }
     #footer .map-footer {
         right: 0;
         left: 0;
@@ -4060,4 +4182,62 @@ li.main_category li.subcategory > span > label{
         right: 1.5em;
         left: auto;
     }
+    .search-box-col{
+        display: block;
+        position: absolute;
+        width: 100%;
+        top: 35px;
+        background-color: #fff;
+        padding: 8px;
+    }
+    #topbar{
+        box-shadow: none;
+    }
+    .control_image{
+        right: 20px;
+        left: auto;
+        font-size: 1.2em;
+    }
+    #ul_categories{
+        font-size: 1.4em;
+    }
+    #categories label{
+        width: 100%;
+    }
+    .description_icon{
+        display: block;
+        font-size: 1em;
+    }
+    #back-categories{
+        position: static;
+        text-align: center;
+        width: 100%;
+    }
+    #search-listing {
+        height: auto;
+        margin-bottom: 0;
+        font-size: 1.2em;
+    }
+    #search-listing > ul {
+        padding-bottom: 0;
+    }
+    ul.pager{
+        padding-bottom: 10px;
+        margin-bottom: 0;
+    }
+    .pager li a {
+        font-size: 1.1em;
+    }
+    div#sidebar-container {
+        background-image: none;
+    }
+    #mobile-footer{
+        display: block;
+    }
+    #detail .close-img {
+        right: 0;
+    }
+    #directory #category-directory-content{
+        margin-bottom: 110px;
+    }
 }
\ No newline at end of file
diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index 063cfa8..53eadc1 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -1249,7 +1249,8 @@ function transformCoordToLonLat(coord) {
 
             methods._set_animation(map_id, duration);
             // center
-            if ($("#panel").is(":visible")){
+            if ($("#panel").is(":visible") &&
+                !$("#switch-menu").is(":visible")){
                 var delta_x = $("#panel").width() / 2;
                 // paning before zoom base delta divided by 2
                 if (zoom_level < settings[map_id].maxZoom){
@@ -1278,7 +1279,8 @@ function transformCoordToLonLat(coord) {
                 function(){
                     // our cluster must be at the center (if it exists after zoom)
                     var pixel = settings[map_id].map.getPixelFromCoordinate(v.getCenter());
-                    if ($("#panel").is(":visible")){
+                    if ($("#panel").is(":visible") &&
+                        !$("#switch-menu").is(":visible")){
                         pixel[0] = pixel[0] + $("#panel").width() / 2;
                     }
                     var new_feature;
@@ -1525,7 +1527,8 @@ function transformCoordToLonLat(coord) {
         _getMapCenter: function(map_id){
             mapCenter = function(obj){
                 methods._set_animation(map_id);
-                if ($("#panel").is(":visible")){
+                if ($("#panel").is(":visible") &&
+                    !$("#switch-menu").is(":visible")){
                     var delta_x = $("#panel").width() / 2;
                     settings[map_id].view.centerOn(
                         obj.coordinate,
@@ -2859,7 +2862,8 @@ function transformCoordToLonLat(coord) {
                         var v = settings[map_id].map.getView();
                         methods._set_animation(map_id);
                         options = {};
-                        if ($("#panel").is(":visible")){
+                        if ($("#panel").is(":visible") &&
+                            !$("#switch-menu").is(":visible")){
                             options = {"padding": [0, 0, 0, $("#panel").width()]};
                         }
                         v.fit(settings[map_id].sourceRoutingFeatures.getExtent(),
@@ -3025,7 +3029,9 @@ function transformCoordToLonLat(coord) {
                             }
                             methods._set_animation(map_id);
 
-                            if ($("#panel").is(":visible")){
+                            // panel not hidden and not responsive mode
+                            if ($("#panel").is(":visible") &&
+                                !$("#switch-menu").is(":visible")){
                                 var delta_x = $("#panel").width() / 2;
                                 settings[map_id].view.centerOn(
                                     center_position,
@@ -3175,7 +3181,8 @@ function transformCoordToLonLat(coord) {
             }
             methods._set_animation(map_id);
             options = {};
-            if ($("#panel").is(":visible")){
+            if ($("#panel").is(":visible") &&
+                !$("#switch-menu").is(":visible")){
                 options = {"padding": [0, 0, 0, $("#panel").width()]};
             }
             settings[map_id].map.getView().fit(
@@ -3351,7 +3358,7 @@ function transformCoordToLonLat(coord) {
             var bounds = settings[map_id].layerVectors.getDataExtent();
             if (bounds) settings[map_id].map.zoomToExtent(bounds);
         },
-        _showPopupForFeature: function (map_id, feature){
+        _showPopupForFeature: function (map_id, feature, slow){
             if (typeof feature != 'undefined'){
                 if (settings[map_id].current_feature == feature){
                     return
@@ -3368,6 +3375,8 @@ function transformCoordToLonLat(coord) {
                 $("#" + map_id + "_hover").html("");
                 $("#" + map_id + "_hover").hide();
                 if (feature) {
+                    var timeout = 200;
+                    if (slow) timeout = 2000;
                     // wait for the popover to be fully destroyed...
                     // should be better managed with BS4
                     setTimeout(function(){
@@ -3387,25 +3396,27 @@ function transformCoordToLonLat(coord) {
                         } else {
                             methods.openPopup(map_id, feature);
                         }
-                    }, 200);
+                    }, timeout);
                 }
             }
          },
-        _showPopup: function (map_id, feature_pk, zoom){
+        _showPopup: function (map_id, feature_pk, zoom, zoom_level, slow){
+            if(!zoom_level) zoom_level = 14;
+            if(!slow) slow = false;
             var feats = settings[map_id].dbFeatures.getArray();
             for (j in feats){
                 var c_marker = feats[j];
                 if (c_marker.getProperties()['key'] == feature_pk){
                     if (zoom){
                         var v = settings[map_id].map.getView();
-                        var zoom_level = 14;
 
                         duration = settings[map_id].animation_duration * 2;
                         // zoom
                         v.setZoom(zoom_level);
                         methods._set_animation(map_id, duration);
                         // center
-                        if ($("#panel").is(":visible")){
+                        if ($("#panel").is(":visible") &&
+                            !$("#switch-menu").is(":visible")){
                             var delta_x = $("#panel").width() / 2;
                             // paning before zoom base delta divided by 2
                             if (zoom_level < settings[map_id].maxZoom){
@@ -3420,7 +3431,7 @@ function transformCoordToLonLat(coord) {
                         }
                     }
 
-                    methods._showPopupForFeature(map_id, c_marker);
+                    methods._showPopupForFeature(map_id, c_marker, slow);
                     return true
                 }
             }
@@ -3431,13 +3442,28 @@ function transformCoordToLonLat(coord) {
             }
             return false;
         },
-        showPopup: function (feature_pk) {
+        showPopup: function (feature_pk, zoom, zoom_level) {
             var map_id = methods.map_id(this);
             if (!map_id){
                 alert("showPopup - Public method only");
                 return;
             }
-            return methods._showPopup(map_id, feature_pk, true);
+            slow = false;
+            // show map for responsive
+            if($("#switch-menu").is(":visible")){
+                $("#switch-map").click();
+                slow = true;
+            }
+            if(!zoom_level){
+                if($("#switch-menu").is(":visible")){
+                    // higher zoom level for responsive
+                    zoom_level = 15;
+                } else {
+                    zoom_level = 14;
+                }
+            }
+            return methods._showPopup(map_id, feature_pk, true, zoom_level,
+                                      slow);
         },
         hidePopup: function () {
             var map_id = methods.map_id(this);
diff --git a/chimere/static/chimere/js/search.js b/chimere/static/chimere/js/search.js
index 4ccc1f3..2b45a8d 100644
--- a/chimere/static/chimere/js/search.js
+++ b/chimere/static/chimere/js/search.js
@@ -5,12 +5,25 @@ function load_search_box(){
     });
 }
 
+var show_search_result = function(data){
+    $('.ac-results').remove();
+    $('#search-result').html(data).show('slow');
+
+    if(!$("#panel").is(':visible')){
+        $("#panel").fadeIn();
+    }
+    if($("#switch-search-result.disabled").length){
+        $("#switch-categories").addClass('disabled');
+        $("#switch-search-result.disabled").removeClass('disabled');
+    }
+    switch_search_result();
+}
+
 function haystack_search(evt, page){
     search_result = new Array();
     $('#categories').find('#ul_categories > li > input').prop("checked", false);
     if (!$('#id_q').val()){
-        $('.ac-results').remove();
-        $('#search-result').html('').show('slow');
+        show_search_result('');
         return false;
     }
 
@@ -23,8 +36,7 @@ function haystack_search(evt, page){
         c_url += '&page=' + page;
     }
     $.get(c_url).done(function( data ) {
-        $('.ac-results').remove();
-        $('#search-result').html(data).show('slow');
+        show_search_result(data);
     });
     return false;
 }
diff --git a/chimere/static/saclay/js/interface.js b/chimere/static/saclay/js/interface.js
index 2463b60..e978936 100644
--- a/chimere/static/saclay/js/interface.js
+++ b/chimere/static/saclay/js/interface.js
@@ -137,6 +137,17 @@ var routing_panel_open = function(){
 var category_panel_open = function(){
     action_map();
     $("#main-map").chimere('razMap');
+    if($("#switch-menu").is(':visible')){
+        if (!$("#switch-search-result.disabled").length){
+            $("#switch-search-result").addClass('disabled');
+        }
+        if ($("#switch-categories.disabled").length){
+            $("#switch-categories").removeClass('disabled');
+        }
+        if (!$("#switch-categories.selected").length){
+            $("#switch-categories").addClass('selected');
+        }
+    }
     $("#id_q").val('');
     $('#chimere_itinerary_panel').hide();
     $('#search-result').hide();
@@ -167,6 +178,43 @@ var edit_panel_open = function(){
     */
 };
 
+var switch_map = function(){
+    if(!$("#switch-menu").is(':visible')){
+        return;
+    }
+    $("#switch-menu > div").removeClass('selected');
+    $("#switch-map").addClass('selected');
+    $("#panel").fadeOut();
+};
+
+var switch_search_result = function(){
+    if(!$("#switch-menu").is(':visible')){
+        return;
+    }
+    if ($("#switch-search-result.disabled").length){
+        return false;
+    }
+    $('#frm_categories').hide();
+    $('#search-listing').show();
+    $('#search-nav').show();
+    $("#switch-menu > div").removeClass('selected');
+    $("#switch-search-result").addClass('selected');
+    $("#panel").fadeIn();
+};
+
+var switch_categories = function(){
+    if(!$("#switch-menu").is(':visible')){
+        return;
+    }
+    $('#search-listing').hide();
+    $('#search-nav').hide();
+    $('#frm_categories').show();
+    $("#switch-menu > div").removeClass('selected');
+    $("#switch-categories").addClass('selected');
+    $("#panel").fadeIn();
+    $('#frm_categories').show();
+};
+
 var init_map_edit;
 
 var map_edit_init = function(){
@@ -255,6 +303,16 @@ $(function(){
     $('input[name="transport"]').change(change_routing_transport);
     $('input[name="speed"]').change(change_routing_speed);
     $('#id_speed').change(change_routing_speed);
+
+    $("#switch-map").click(switch_map);
+    $("#switch-search-result").click(switch_search_result);
+    $("#switch-categories").click(switch_categories);
+    $("#mobile-footer .close-img").click(function(event){
+        $("body").addClass('mobile-footer-hidden');
+    });
+    $("#mobile-footer-open-img").click(function(event){
+        $("body").removeClass('mobile-footer-hidden');
+    });
 });
 
 function change_routing_speed(){