From 839e4293e37b7f5c601dfaae2529e02300a433a6 Mon Sep 17 00:00:00 2001 From: Étienne Loks Date: Fri, 18 May 2018 10:25:34 +0200 Subject: Responsive design adaptation --- chimere/static/chimere/css/styles.css | 222 +++++++++++++++++++-- chimere/static/chimere/js/jquery.chimere.js | 54 +++-- chimere/static/chimere/js/search.js | 20 +- chimere/static/saclay/js/interface.js | 58 ++++++ chimere/templates/base.html | 9 +- chimere/templates/chimere/blocks/actions.html | 8 +- chimere/templates/chimere/blocks/areas.html | 6 +- chimere/templates/chimere/blocks/categories.html | 8 +- .../templates/chimere/blocks/footer-mobile.html | 6 + .../templates/chimere/blocks/inline_formset.html | 7 +- chimere/templates/chimere/category_directory.html | 30 ++- chimere/templates/chimere/edit.html | 22 +- chimere/templates/chimere/main_map.html | 24 ++- chimere/templatetags/chimere_tags.py | 10 +- 14 files changed, 407 insertions(+), 77 deletions(-) create mode 100644 chimere/templates/chimere/blocks/footer-mobile.html 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 @@ {% block title %}{{PROJECT_NAME}}{% endblock %} - {% if MOBILE %} - {% endif %} + + {% block og %} ++ + {% endblock %} 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 @@
-
+
{% trans "Map" %}
{% if area.show_directory %} -
+
{% trans "Directory" %}
{% endif %} -
+
{% for page in extra_pages %} -
{% if page.url %} 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 %} -
+
- {% if not has_default_area %}{% endif %} {% for area in areas %} {% endfor %}