From e769354e7314e4db2998f4a282ddf4cfd4030a59 Mon Sep 17 00:00:00 2001 From: pezholio Date: Wed, 1 Mar 2017 13:12:01 +0000 Subject: Add buttons to resize maps on report pages This improves usability on mobile devices, allowing users to pan around the problem and see the area in more detail. I've also changed the CSS around a bit, so we can use the `map-fullscreen` class in other places. --- templates/web/base/common_header_tags.html | 2 +- templates/web/base/js/translation_strings.html | 3 ++ web/cobrands/fixmystreet/fixmystreet.js | 17 +++++++- web/cobrands/fixmystreet/header.js | 2 +- web/cobrands/fixmystreet/images/compress.png | Bin 0 -> 762 bytes web/cobrands/fixmystreet/images/compress.svg | 1 + web/cobrands/fixmystreet/images/compress@2x.png | Bin 0 -> 1227 bytes web/cobrands/fixmystreet/images/expand.png | Bin 0 -> 726 bytes web/cobrands/fixmystreet/images/expand.svg | 1 + web/cobrands/fixmystreet/images/expand@2x.png | Bin 0 -> 1112 bytes web/cobrands/sass/_base.scss | 53 ++++++++++++++++++++---- 11 files changed, 67 insertions(+), 12 deletions(-) create mode 100644 web/cobrands/fixmystreet/images/compress.png create mode 100644 web/cobrands/fixmystreet/images/compress.svg create mode 100644 web/cobrands/fixmystreet/images/compress@2x.png create mode 100644 web/cobrands/fixmystreet/images/expand.png create mode 100644 web/cobrands/fixmystreet/images/expand.svg create mode 100644 web/cobrands/fixmystreet/images/expand@2x.png diff --git a/templates/web/base/common_header_tags.html b/templates/web/base/common_header_tags.html index 7c0ac4973..e64722f01 100644 --- a/templates/web/base/common_header_tags.html +++ b/templates/web/base/common_header_tags.html @@ -12,7 +12,7 @@ [% IF admin %] diff --git a/templates/web/base/js/translation_strings.html b/templates/web/base/js/translation_strings.html index d6aca9ccb..c09609411 100644 --- a/templates/web/base/js/translation_strings.html +++ b/templates/web/base/js/translation_strings.html @@ -46,6 +46,9 @@ map_map: '[% loc('Map') | replace("'", "\\'") %]', map_satellite: '[% loc('Satellite') | replace("'", "\\'") %]', + expand_map: '[% loc('Expand map') | replace("'", "\\'") %]', + collapse_map: '[% loc('Collapse map') | replace("'", "\\'") %]', + permalink: '[% loc('Permalink') | replace("'", "\\'") %]', upload_max_files_exceeded: '[% loc ('Whoa there Testino! Three photos are enough.') | replace("'", "\\'") %]', diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js index 313d790c9..8e8941421 100644 --- a/web/cobrands/fixmystreet/fixmystreet.js +++ b/web/cobrands/fixmystreet/fixmystreet.js @@ -118,7 +118,7 @@ fixmystreet.mobile_reporting = { apply_ui: function() { // Creates the "app-like" mobile reporting UI with full screen map // and special "OK/Cancel" buttons etc. - $('html').addClass('mobile-reporting-map only-map'); + $('html').addClass('map-fullscreen only-map map-reporting'); $('.mobile-map-banner span').text(translation_strings.place_pin_on_map); $('html, body').scrollTop(0); }, @@ -126,7 +126,7 @@ fixmystreet.mobile_reporting = { remove_ui: function() { // Removes the "app-like" mobile reporting UI, reverting all the // changes made by fixmystreet.mobile_reporting.apply_ui(). - $('html').removeClass('mobile-reporting-map only-map'); + $('html').removeClass('map-fullscreen only-map map-reporting'); $('#map_box').css({ width: "", height: "", position: "" }); $('#mob_sub_map_links').remove(); } @@ -869,6 +869,9 @@ $.extend(fixmystreet.set_up, { } $('#key-tools li:empty').remove(); $('#report-updates-data').insertAfter($('#map_box')); + if (fixmystreet.page === 'report' || fixmystreet.page === 'reports') { + $('#sub_map_links').append(''+ translation_strings.expand_map +''); + } } // Show/hide depending on whether it has any children to show @@ -897,6 +900,16 @@ $.extend(fixmystreet.set_up, { }) .prependTo('#sub_map_links'); } + + $('#toggle-fullscreen').click(function() { + var btnClass = $('html').hasClass('map-fullscreen') ? 'expand' : 'compress'; + var text = $(this).data(btnClass + '-text'); + + $('html').toggleClass('map-fullscreen only-map'); + $(this).html(text).attr('class', btnClass); + + fixmystreet.map.updateSize(); + }); }, map_sidebar_key_tools: function() { diff --git a/web/cobrands/fixmystreet/header.js b/web/cobrands/fixmystreet/header.js index c4c3de1b6..e4b0a9a91 100644 --- a/web/cobrands/fixmystreet/header.js +++ b/web/cobrands/fixmystreet/header.js @@ -13,7 +13,7 @@ var fixmystreet = fixmystreet || {}; if (type == 'mobile') { E.className += ' mobile'; if (fixmystreet.page == 'around') { - E.className += ' mobile-reporting-map only-map'; + E.className += ' map-fullscreen only-map map-reporting'; } } })(document); diff --git a/web/cobrands/fixmystreet/images/compress.png b/web/cobrands/fixmystreet/images/compress.png new file mode 100644 index 000000000..500673956 Binary files /dev/null and b/web/cobrands/fixmystreet/images/compress.png differ diff --git a/web/cobrands/fixmystreet/images/compress.svg b/web/cobrands/fixmystreet/images/compress.svg new file mode 100644 index 000000000..68efd6b31 --- /dev/null +++ b/web/cobrands/fixmystreet/images/compress.svg @@ -0,0 +1 @@ + diff --git a/web/cobrands/fixmystreet/images/compress@2x.png b/web/cobrands/fixmystreet/images/compress@2x.png new file mode 100644 index 000000000..8acf34850 Binary files /dev/null and b/web/cobrands/fixmystreet/images/compress@2x.png differ diff --git a/web/cobrands/fixmystreet/images/expand.png b/web/cobrands/fixmystreet/images/expand.png new file mode 100644 index 000000000..c0c129fb7 Binary files /dev/null and b/web/cobrands/fixmystreet/images/expand.png differ diff --git a/web/cobrands/fixmystreet/images/expand.svg b/web/cobrands/fixmystreet/images/expand.svg new file mode 100644 index 000000000..1f063b4b7 --- /dev/null +++ b/web/cobrands/fixmystreet/images/expand.svg @@ -0,0 +1 @@ + diff --git a/web/cobrands/fixmystreet/images/expand@2x.png b/web/cobrands/fixmystreet/images/expand@2x.png new file mode 100644 index 000000000..6abc9c1a4 Binary files /dev/null and b/web/cobrands/fixmystreet/images/expand@2x.png differ diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index 179168aae..366939d4c 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -620,6 +620,7 @@ body.mappage .wrapper { background-image: url($image-sprite); background-position: center -2563px; } + &.share { background-image: url('/cobrands/fixmystreet/images/share.png'); background-position: center 25%; @@ -1496,6 +1497,40 @@ html.js #map .noscript { background-image:url($image-sprite); background-position: flip(right, -341px) -3936px; } + &#toggle-fullscreen { + padding: 0.6em 1em 0.5em 1em; + &:after { + content: ""; + display: inline-block; + width: 16px; + height: 16px; + background-size: 16px 16px; + vertical-align: middle; + margin-#{$left}: 8px; + } + &.expand:after { + background-image: url(/cobrands/fixmystreet/images/expand.png); + + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + background-image: url(/cobrands/fixmystreet/images/expand@2x.png); + } + + @media all { + background-image: url(/cobrands/fixmystreet/images/expand.svg), none; + } + } + &.compress:after { + background-image: url(/cobrands/fixmystreet/images/compress.png); + + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + background-image: url(/cobrands/fixmystreet/images/compress@2x.png); + } + + @media all { + background-image: url(/cobrands/fixmystreet/images/compress.svg), none; + } + } + } &:hover { background-color:#000; text-decoration:none; @@ -1559,14 +1594,14 @@ html.js #map .noscript { text-transform: uppercase; text-align: center; font-size: 0.875em; - .mobile-reporting-map & { + .map-fullscreen & { display: none; } } .mobile-map-banner { display: none; - .mobile-reporting-map & { + .map-fullscreen & { display: block; } text-transform: uppercase; @@ -1656,7 +1691,7 @@ a:hover.rap-notes-trigger { // and make the map full screen to reduce distractions. JavaScript also // tweaks the text content of some of the map-related elements, to make // it more "app-like". -.mobile-reporting-map { +.map-fullscreen { #site-header { display: none; } @@ -1672,10 +1707,6 @@ a:hover.rap-notes-trigger { z-index: 1; // stack above positioned elements later on the page (eg: .report-list-filters) } - #fms_pan_zoom { - top: 2.75em; // make space for the semi-transparent "Place pin on map" bar - } - .container { padding: 0; // map_box needs to be full width, so remove page gutter } @@ -1685,7 +1716,13 @@ a:hover.rap-notes-trigger { } } -.mobile-reporting-map.only-map { +.map-reporting { + #fms_pan_zoom { + top: 2.75em; // make space for the semi-transparent "Place pin on map" bar + } +} + +.only-map { height: 100%; body { height: 100%; -- cgit v1.2.3