Responsive design adaptation

14 files changed, 407 insertions, 77 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(){
diff --git a/chimere/templates/base.html b/chimere/templates/base.html
index b80c42f..9ce000c 100644
--- a/chimere/templates/base.html
+++ b/chimere/templates/base.html
@@ -2,8 +2,8 @@
 <html lang="fr">
 <head>
     <title>{% block title %}{{PROJECT_NAME}}{% endblock %}</title>
-    {% if MOBILE %}<meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">{% endif %}
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 
     {% block og %}
     <meta property="og:title"
@@ -66,6 +66,11 @@
     {% block footer %}
     {% endblock %}
 </div>
+<a href='#' id='mobile-footer-open-img'>+</a>
+<div id="mobile-footer">
+    {% block mobilefooter %}
+    {% endblock %}
+</div>
 {% endblock %}
 </body>
 </html>
diff --git a/chimere/templates/chimere/blocks/actions.html b/chimere/templates/chimere/blocks/actions.html
index 49a8fd4..2ce5c29 100644
--- a/chimere/templates/chimere/blocks/actions.html
+++ b/chimere/templates/chimere/blocks/actions.html
@@ -10,23 +10,23 @@
             </a>
         </div>
         <div id="top-menu" class="row">
-            <div class="col-xs-2 action">
+            <div class="col-xs-3 col-sm-2 action">
                 <a href="{% url 'index' area_name %}">
                     {% trans "Map" %}
                 </a>
             </div>
             {% if area.show_directory %}
-            <div class="col-xs-2 action">
+            <div class="col-xs-3 col-sm-2 action">
                 <a href="{% url 'chimere:category-directory' area_name %}">
                     {% trans "Directory" %}
                 </a>
             </div>
             {% endif %}
-            <div class="col-xs-{%if not extra_pages %}6{% elif extra_pages|length < 3 %}4{% else %}6{% endif %}">
+            <div class="search-box-col col-sm-{%if not extra_pages %}6{% elif extra_pages|length < 3 %}4{% else %}6{% endif %}">
                 <div id='search-box'></div>
             </div>
             {% for page in extra_pages %}
-            <div class="col-xs-{% if page.image %}1{% else%}2{% endif %} action"
+            <div class="col-xs-{% if page.image %}1{% else%}3{% endif %} col-sm-{% if page.image %}1{% else%}2{% endif %} action"
                   id="btn-{{page.mnemonic}}">
                 {% if page.url %}
                 <a href='{{page.url}}' target="_blank">
diff --git a/chimere/templates/chimere/blocks/areas.html b/chimere/templates/chimere/blocks/areas.html
index c8d04f6..c6d675c 100644
--- a/chimere/templates/chimere/blocks/areas.html
+++ b/chimere/templates/chimere/blocks/areas.html
@@ -1,17 +1,17 @@
 {% load i18n %}
 {% if areas and areas.count > 1 %}
-<div id='maps-lnk' class="input-group mb-2 mr-sm-2 mb-sm-0">
+<div id='maps-lnk{{suffix}}' class="input-group mb-2 mr-sm-2 mb-sm-0">
       <div class="input-group-addon" title="{% trans 'Map' %}">
           <span class='fa fa-chimere-action fa-chimere-maps'></span>
       </div>
-      <select id='areas-select' class="form-control" title="{% trans 'Map' %}">
+      <select id='areas-select{{suffix}}' class="form-control" title="{% trans 'Map' %}">
         {% if not has_default_area %}<option value=''>--</option>{% endif %}
         {% for area in areas %}
         <option value='{{area.urn}}'{% if area_name and area.urn == area_name %} selected='selected'{% endif %}{% if not area_name and area.default %} selected='selected'{% endif %}>{{area.name}}</option>{% endfor %}
       </select>
 </div>
 <script language='javascript' type='text/javascript'>
-    jQuery('#areas-select').change(
+    jQuery('#areas-select{{suffix}}').change(
         function (){
             val = jQuery(this).val();
             if(val){
diff --git a/chimere/templates/chimere/blocks/categories.html b/chimere/templates/chimere/blocks/categories.html
index 9573643..cf13404 100644
--- a/chimere/templates/chimere/blocks/categories.html
+++ b/chimere/templates/chimere/blocks/categories.html
@@ -60,9 +60,13 @@ $(function() {
     }
 
     $(".subcategory").mouseenter(function() {
-        $(this).find(".description_icon").show();
+        if ($("#switch-menu").not(':visible').length){
+            $(this).find(".description_icon").show();
+        }
     }).mouseleave(function() {
-        $(this).find(".description_icon").hide();
+        if ($("#switch-menu").not(':visible').length){
+            $(this).find(".description_icon").hide();
+        }
     });
 
 });
diff --git a/chimere/templates/chimere/blocks/footer-mobile.html b/chimere/templates/chimere/blocks/footer-mobile.html
new file mode 100644
index 0000000..212b4e0
--- /dev/null
+++ b/chimere/templates/chimere/blocks/footer-mobile.html
@@ -0,0 +1,6 @@
+{% load i18n chimere_tags %}
+
+<a href='#' class='close-img'>X</a>
+
+{% display_areas '-footer' %}
+<h2>Chimère</h2>
\ No newline at end of file
diff --git a/chimere/templates/chimere/blocks/inline_formset.html b/chimere/templates/chimere/blocks/inline_formset.html
index 7cc0f04..c25e469 100644
--- a/chimere/templates/chimere/blocks/inline_formset.html
+++ b/chimere/templates/chimere/blocks/inline_formset.html
@@ -5,10 +5,13 @@
 <table class='inline-table' id='table_{{formset.prefix}}'>
     {% for frm in formset%}{%if forloop.first %}
     <tr>{% for field in frm%}{% if field.label %}
-        <th>{{field.label}}</th>{% endif %}{%endfor%}
+        <th{% if field.name == 'name'%} class="hidden-sm hidden-xs"{% endif %}>
+        {{field.label}}
+        </th>{% endif %}{%endfor%}
     </tr>{%endif%}
     <tr id='tr_{{formset.prefix}}_{{forloop.counter0}}'>{% for field in frm.visible_fields %}
-        <td>{# Include the hidden fields in the form #}
+        <td{% if field.name == 'name'%} class="hidden-sm hidden-xs"{% endif %}>
+            {# Include the hidden fields in the form #}
             {% if forloop.first %}
             {% for hidden in frm.hidden_fields %}
             {{ hidden }}
diff --git a/chimere/templates/chimere/category_directory.html b/chimere/templates/chimere/category_directory.html
index f448f64..981c9d9 100644
--- a/chimere/templates/chimere/category_directory.html
+++ b/chimere/templates/chimere/category_directory.html
@@ -26,7 +26,7 @@
 {% endif %}
 </style>
 <div class="row" id="category-directory-content">
-    <div class="col-md-3 col-xs-4">
+    <div class="col-md-3{% if current_marker %} hidden-sm{% else %} col-sm-5{% endif %}{% if items %} hidden-xs{% endif %}">
         {% if not object_list.count %}
             <p>{% trans "No category defined!" %}</p>
         {% else %}
@@ -70,8 +70,23 @@
         {% endif %}
     </div>
     {% if items %}
-    <div class="col-md-3 col-xs-4">
-        <ul id="category-directory">{% for marker in items %}
+    <div class="col-md-3 col-sm-5{% if current_marker %} hidden-xs{% endif %}">
+        <ul id="category-directory">
+            <li class="visible-xs visible-sm text-center">
+                <a href="{% url 'chimere:category-directory' area_name %}">
+                    &larr;
+                    {% trans "Categories" %}
+                </a>
+            </li>
+            <li class="hidden-md hidden-lg">
+            <span>
+                <label style="color: {{category.category.color}}">
+                    {% trans category.category.name %} /
+                    {% trans category.name %}
+                </label>
+            </span>
+            </li>
+            {% for marker in items %}
             <li class='{% if marker.pk == current_marker.pk %} selected{% endif %}'>
                 <a {% if marker.pk == current_marker.pk %}style="color: {{category.category.color}}"{% endif %}
                    href="{% url 'chimere:category-directory-item-detail' area_name category.slug marker.pk %}">
@@ -83,7 +98,14 @@
     </div>
     {% endif %}
     {% if current_marker %}
-    <div class="col-md-3 col-xs-4" id="directory-marker">
+    <div class="col-md-3" id="directory-marker">
+        <p class="visible-xs text-center">
+        <a href="{% url 'chimere:category-directory-detail' area_name category.slug %}">
+            &larr;
+            {% trans category.category.name %} /
+            {% trans category.name %}
+        </a>
+        </p>
         {% include "chimere/category_item_detail.html" %}
     </div>
     {% endif %}
diff --git a/chimere/templates/chimere/edit.html b/chimere/templates/chimere/edit.html
index 9337489..080f95b 100644
--- a/chimere/templates/chimere/edit.html
+++ b/chimere/templates/chimere/edit.html
@@ -25,25 +25,25 @@
 
         <div class="container" style="width: 100%;">
             <div class="row">
-                <div class="col-xs-6">
+                <div class="col-sm-12 col-md-6">
                     <label for="id_name">{% trans "Name"%} *</label>
                     {% if form.name.errors %}<div class='errors'>{{ form.name.errors }}</div>{% endif %}
                     {{ form.name }}
                 </div>
-                <div class="col-xs-6">
+                <div class="col-sm-12 col-md-6">
                     <label for="id_subcategory">{% if form.categories.label %}{{ form.categories.label }}{% else %}{% trans "Categories" %} *{% endif %}</label>
                     {% if form.categories.errors %}<div class='errors'>{{ form.categories.errors }}</div>{% endif %}
                     {{ form.categories }}
                 </div>
             </div>
             <div class="row">
-                <div class="col-xs-12">
+                <div class="col-sm-12">
                     {% block geometry %}
                     {% endblock %}
                 </div>
             </div>
             <div class="row">
-                <div class="col-xs-12 full">
+                <div class="col-md-12 full">
                     <label for="id_description">{% trans "Description" %}</label>
                     {{ form.description.errors }}
                     {{ form.description }}
@@ -52,7 +52,7 @@
             </div>
             {% if form.keywords %}
             <div class="row">
-                <div class="col-xs-6">
+                <div class="col-sm-12 col-md-6">
                     <label for="id_keywords">{% trans "Keywords" %}</label>
                     {{ form.keywords.errors }}
                     {{ form.keywords }}
@@ -61,13 +61,13 @@
             </div>{% endif %}
             {% if dated %}
             <div class="row">
-                <div class="col-xs-6">
+                <div class="col-sm-12 col-md-6">
                     <label for="id_start_date">{% trans "Start date" %}</label>
                     {{ form.start_date.errors }}
                     {{ form.start_date }}
                     <p class="help">{{ form.start_date.help_text }}</p>
                 </div>
-                <div class="col-xs-6">
+                <div class="col-sm-12 col-md-6">
                     <label for="id_end_date">{% trans "End date" %}</label>
                     {{ form.end_date.errors }}
                     {{ form.end_date }}
@@ -77,7 +77,7 @@
             <div class="row">
             {% for field in form %}{% if field.name|startswith:'property_' %}
             {% for property in properties %}{% ifequal field.name property.getNamedId %}
-                <div class="col-xs-12 col-md-6 col-xl-4">
+                <div class="col-sm-12 col-md-6 col-xl-4">
                     <label for="id_{{field.name}}">{% trans field.label %}{% if property.mandatory %} *{% endif %}</label>
                     {% if field.errors %}<div class='errors'>{{ field.errors }}</div>{% endif %}
                     {{ field }}
@@ -125,19 +125,19 @@
             </div>
             <div class="container">
                 <div class="row">
-                    <div class="col-xs-6">
+                    <div class="col-sm-12 col-md-6">
                         <label for="id_submiter_name">{% trans "Your name or nickname"%}</label>
                         {% if form.submiter_name.errors %}<div class='errors'>{{ form.submiter_name.errors }}</div>{% endif %}
                         {{ form.submiter_name }}
                     </div>
-                    <div class="col-xs-6">
+                    <div class="col-sm-12 col-md-6">
                         <label for="id_submiter_email">{% trans "Your email"%}</label>
                         {% if form.submiter_email.errors %}<div class='errors'>{{ form.submiter_email.errors }}</div>{% endif %}
                         {{ form.submiter_email }}
                     </div>
                 </div>
                 <div class="row">
-                    <div class="col-xs-12 full">
+                    <div class="col-sm-12 full">
                         <label for="id_submiter_comment">{% trans "Comments about your submission"%}</label>
                         {% if form.submiter_comment.errors %}<div class='errors'>{{ form.submiter_comment.errors }}</div>{% endif %}
                         {{ form.submiter_comment }}
diff --git a/chimere/templates/chimere/main_map.html b/chimere/templates/chimere/main_map.html
index 3bf1d95..e81153b 100644
--- a/chimere/templates/chimere/main_map.html
+++ b/chimere/templates/chimere/main_map.html
@@ -27,9 +27,15 @@
 {% block message_edit %}{% endblock %}
 {% block sidebar %}
 <div id="switch-menu" class="row">
-    <div class="col-xs-4"><a href="#">{% trans "Map" %}</a></div>
-    <div class="col-xs-4"><a href="#">{% trans "Search result" %}</a></div>
-    <div class="col-xs-4 selected"><a href="#">{% trans "Categories" %}</a></div>
+    <div class="col-xs-6 selected" id="switch-map">
+        <a href="#">{% trans "Map" %}</a>
+    </div>
+    <div class="col-xs-6" id="switch-categories">
+        <a href="#">{% trans "Categories" %}</a>
+    </div>
+    <div class="col-xs-6 disabled" id="switch-search-result">
+        <a href="#">{% trans "Search result" %}</a>
+    </div>
 </div>
   <div id="sidebar-container">
     <div class='sidebar-handler' id='sidebar-handler-hide'></div>
@@ -38,15 +44,18 @@
         <div id='map-panel'>
             <div id='search-result'></div>
             <form action='.' method='post' name='frm_categories' id='frm_categories'>
+                <div id="categories-help" class="bg-info help-text">
+                    {% trans "Select categories you would like to see before going back to map." %}
+                </div>
                 <div id='categories'>{# dynamic content #}
                 </div>
             </form>
             {% routing %}
+            <div id='back-categories'>
+                <i class="fa fa-arrow-circle-left" aria-hidden="true"></i> <p>REVENIR AUX CATÉGORIES</p>
+            </div>
         </div>
     </div>
-    <div id='back-categories'>
-        <i class="fa fa-arrow-circle-left" aria-hidden="true"></i> <p>REVENIR AUX CATÉGORIES</p>
-    </div>
     <div class='footer' id='footer-panel'>
         {% include "chimere/blocks/panel_footer.html" %}
     </div>
@@ -111,3 +120,6 @@
 {% block footer %}
     <p class='map-footer'>{% include "chimere/blocks/footer.html" %}</p>
 {% endblock %}
+{% block mobilefooter %}
+    {% include "chimere/blocks/footer-mobile.html" %}
+{% endblock %}
diff --git a/chimere/templatetags/chimere_tags.py b/chimere/templatetags/chimere_tags.py
index 89ced3f..f850244 100644
--- a/chimere/templatetags/chimere_tags.py
+++ b/chimere/templatetags/chimere_tags.py
@@ -26,13 +26,15 @@ register = template.Library()
 
 
 @register.inclusion_tag('chimere/blocks/areas.html', takes_context=True)
-def display_areas(context):
+def display_areas(context, suffix=""):
     """
     Display available areas.
     """
-    context_data = {"areas": Area.getAvailable(),
-                    "base_url": reverse(settings.MAIN_INDEX)
-                    }
+    context_data = {
+        "areas": Area.getAvailable(),
+        "base_url": reverse(settings.MAIN_INDEX),
+        "suffix": suffix
+    }
     if "area_name" in context:
         context_data['area_name'] = context["area_name"]
     return context_data