Merge remote-tracking branch 'origin/2667-improve-mobile-try-again'

10 files changed, 118 insertions, 83 deletions

diff --git a/.cypress/cypress/integration/regressions.js b/.cypress/cypress/integration/regressions.js
index f9fedc3eb..f1f557219 100644
--- a/.cypress/cypress/integration/regressions.js
+++ b/.cypress/cypress/integration/regressions.js
@@ -10,7 +10,7 @@ describe('Regression tests', function() {
         cy.viewport(480, 800);
         cy.visit('/around?pc=' + Cypress.env('postcode') + '&js=1');
         cy.get('#map_box').click(200, 200);
-        cy.get('#try_again').click();
+        cy.get('#problems_nearby').click();
         cy.get('#sub_map_links').should('be.visible');
         cy.cleanUpXHR();
     });
diff --git a/.cypress/cypress/integration/responsive.js b/.cypress/cypress/integration/responsive.js
index 1a5540590..250ec49b7 100644
--- a/.cypress/cypress/integration/responsive.js
+++ b/.cypress/cypress/integration/responsive.js
@@ -34,7 +34,7 @@ describe('Around page responsive design tests', function() {
         cy.get('#map_links_toggle').should('not.be.visible');
         cy.get('#map_box').click(200, 200);
         cy.get('#sub_map_links').should('not.be.visible');
-        cy.get('#try_again').should('be.visible');
+        cy.get('#problems_nearby').should('be.visible');
         cy.get('#mob_ok').click();
         cy.cleanUpXHR();
     });
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 727c2b8e3..12ae1e0d1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -27,6 +27,7 @@
         - Remove pan control from mobile widths. #2865
         - Use category groups whenever category lists are shown. #2702
         - Display map inline with duplicate suggestions on mobile. #2668
+        - Improved try again process on mobile. #2863
     - Admin improvements:
         - Add new roles system, to group permissions and apply to users. #2483
         - Contact form emails now include user admin links.
diff --git a/perllib/FixMyStreet/Template.pm b/perllib/FixMyStreet/Template.pm
index ffebb00cf..fb63071c3 100644
--- a/perllib/FixMyStreet/Template.pm
+++ b/perllib/FixMyStreet/Template.pm
@@ -70,6 +70,18 @@ sub loc : Fn {
     return FixMyStreet::Template::SafeString->new($s);
 }
 
+=head2 loc_js
+
+Same as loc() but escapes single quotes (for use in JavaScript).
+
+=cut
+
+sub loc_js : Fn {
+    my $s = _(@_);
+    $s =~ s/'/\\'/g;
+    return FixMyStreet::Template::SafeString->new($s);
+}
+
 =head2 nget
 
     [% nget( 'singular', 'plural', $number ) %]
diff --git a/templates/web/base/js/translation_strings.html b/templates/web/base/js/translation_strings.html
index d6e7051b5..7deaf3e05 100644
--- a/templates/web/base/js/translation_strings.html
+++ b/templates/web/base/js/translation_strings.html
@@ -3,108 +3,108 @@ var fixmystreet = fixmystreet || {};
 fixmystreet.password_minimum_length = [% c.cobrand.password_minimum_length %];
 
     translation_strings = {
-        update: '[% loc('Please enter a message') | replace("'", "\\'") %]',
-        error: '[% loc('Error') | replace("'", "\\'") %]',
+        update: '[% loc_js('Please enter a message') %]',
+        error: '[% loc_js('Error') %]',
         title: {
-            required: '[% loc('Please enter a subject') | replace("'", "\\'") %]',
-            maxlength: '[% loc('Summaries are limited to {0} characters in length. Please shorten your summary') | replace("'", "\\'") %]',
-            notEmail: '[% loc('Please make sure you are not including an email address') %]'
+            required: '[% loc_js('Please enter a subject') %]',
+            maxlength: '[% loc_js('Summaries are limited to {0} characters in length. Please shorten your summary') %]',
+            notEmail: '[% loc_js('Please make sure you are not including an email address') %]'
         },
         detail: {
-            required: '[% loc('Please enter some details') | replace("'", "\\'") %]',
-            maxlength: '[% loc('Reports are limited to {0} characters in length. Please shorten your report') | replace("'", "\\'") %]',
+            required: '[% loc_js('Please enter some details') %]',
+            maxlength: '[% loc_js('Reports are limited to {0} characters in length. Please shorten your report') %]',
         },
         name: {
-            required: '[% loc('Please enter your name') | replace("'", "\\'") %]',
-            validName: '[% loc('Please enter your full name, councils need this information – if you do not wish your name to be shown on the site, untick the box below') | replace("'", "\\'") %]'
+            required: '[% loc_js('Please enter your name') %]',
+            validName: '[% loc_js('Please enter your full name, councils need this information – if you do not wish your name to be shown on the site, untick the box below') %]'
         },
-        category: '[% loc('Please choose a category') | replace("'", "\\'") %]',
+        category: '[% loc_js('Please choose a category') %]',
         rznvy: {
-            required: '[% loc('Please enter your email') | replace("'", "\\'") %]',
-            email: '[% loc('Please enter a valid email') | replace("'", "\\'") %]'
+            required: '[% loc_js('Please enter your email') %]',
+            email: '[% loc_js('Please enter a valid email') %]'
         },
         email: {
-            required: '[% loc('Please enter your email') | replace("'", "\\'") %]',
-            email: '[% loc('Please enter a valid email') | replace("'", "\\'") %]'
+            required: '[% loc_js('Please enter your email') %]',
+            email: '[% loc_js('Please enter a valid email') %]'
         },
         password_sign_in: {
-            required: '[% loc('Please enter a password') | replace("'", "\\'") %]'
+            required: '[% loc_js('Please enter a password') %]'
         },
         password_register: {
-            short: '[% tprintf(loc('Please make sure your password is at least %d characters long'), c.cobrand.password_minimum_length) | replace("'", "\\'") %]',
+            short: '[% tprintf(loc_js('Please make sure your password is at least %d characters long'), c.cobrand.password_minimum_length) %]',
         },
         phone: {
-            required: '[% loc('Please enter your phone number') | replace("'", "\\'") %]'
+            required: '[% loc_js('Please enter your phone number') %]'
         },
-        fms_extra_title: '[% loc('Please enter your title') | replace("'", "\\'") %]',
-        first_name: '[% loc('Please enter your first name') | replace("'", "\\'") %]',
-        last_name: '[% loc('Please enter your second name') | replace("'", "\\'") %]',
-        right_place: '[% loc('Right place?') | replace("'", "\\'") %]',
-        try_again: '[% loc('Try again') | replace("'", "\\'") %]',
-        place_pin_on_map: '[% loc('Place pin on map') | replace("'", "\\'") %]',
-        back: '[% loc('Back') | replace("'", "\\'") %]',
-        how_to_send: '[% loc('How to send successful reports') | replace("'", "\\'") %]',
-        more_details: '[% loc('Details') | replace("'", "\\'") %]',
+        fms_extra_title: '[% loc_js('Please enter your title') %]',
+        first_name: '[% loc_js('Please enter your first name') %]',
+        last_name: '[% loc_js('Please enter your second name') %]',
+        right_place: '[% loc_js('Reposition if needed, then hit Continue') %]',
+        try_again: '[% loc_js('Try again') %]',
+        place_pin_on_map: '[% loc_js('Place pin on map') %]',
+        back: '[% loc_js('Back') %]',
+        how_to_send: '[% loc_js('How to send successful reports') %]',
+        more_details: '[% loc_js('Details') %]',
 
-        this_report: '[% loc('This report') | replace("'", "\\'") %]',
-        this_is_the_problem: '[% loc('This is the problem') | replace("'", "\\'") %]',
+        this_report: '[% loc_js('This report') %]',
+        this_is_the_problem: '[% loc_js('This is the problem') %]',
 
-        or: '[% loc(' or ') | replace("'", "\\'") %]',
+        or: '[% loc_js(' or ') %]',
 
-        geolocation_declined: '[% loc('You declined; please fill in the box above') | replace("'", "\\'") %]',
-        geolocation_no_position: '[% loc('Could not look up location') | replace("'", "\\'") %]',
-        geolocation_no_result: '[% loc('No result returned') | replace("'", "\\'") %]',
-        geolocation_unknown: '[% loc('Unknown error') | replace("'", "\\'") %]',
+        geolocation_declined: '[% loc_js('You declined; please fill in the box above') %]',
+        geolocation_no_position: '[% loc_js('Could not look up location') %]',
+        geolocation_no_result: '[% loc_js('No result returned') %]',
+        geolocation_unknown: '[% loc_js('Unknown error') %]',
 
-        correct_position: '[% loc('Right place?') | replace("'", "\\'") %]',
+        correct_position: '[% loc_js('Right place?') %]',
 
-        reporting_a_problem: '[% loc('Reporting a problem') | replace("'", "\\'") %]',
-        ok: '[% loc('OK') | replace("'", "\\'") %]',
-        map: '[% loc('MAP') | replace("'", "\\'") %]',
+        reporting_a_problem: '[% loc_js('Reporting a problem') %]',
+        ok: '[% loc_js('Continue') %]',
+        map: '[% loc_js('MAP') %]',
 
-        map_map: '[% loc('Map') | replace("'", "\\'") %]',
-        map_satellite: '[% loc('Satellite') | replace("'", "\\'") %]',
+        map_map: '[% loc_js('Map') %]',
+        map_satellite: '[% loc_js('Satellite') %]',
 
-        expand_map: '[% loc('Expand map') | replace("'", "\\'") %]',
-        collapse_map: '[% loc('Collapse map') | replace("'", "\\'") %]',
+        expand_map: '[% loc_js('Expand map') %]',
+        collapse_map: '[% loc_js('Collapse map') %]',
 
-        filter: '[% loc('Filter') | replace("'", "\\'") %]',
+        filter: '[% loc_js('Filter') %]',
 
-        show_pins: '[% loc('Show pins') | replace("'", "\\'") %]',
-        hide_pins: '[% loc('Hide pins') | replace("'", "\\'") %]',
+        show_pins: '[% loc_js('Show pins') %]',
+        hide_pins: '[% loc_js('Hide pins') %]',
 
-        upload_max_files_exceeded: '[% loc ('Sorry! You’ve hit the limit of images that can be attached to one report.') | replace("'", "\\'") %]',
-        upload_default_message: '[% loc('Drag photos here or <u>browse photos</u>') | replace("'", "\\'") %]',
-        upload_default_message_mobile: '[% loc('<u>Take or choose existing photo</u>') | replace("'", "\\'") %]',
-        upload_cancel_confirmation: '[% loc ('Are you sure you want to cancel this upload?') | replace("'", "\\'") %]',
-        upload_invalid_file_type: '[% loc ('Please upload an image only') | replace("'", "\\'") %]',
+        upload_max_files_exceeded: '[% loc_js('Sorry! You’ve hit the limit of images that can be attached to one report.') %]',
+        upload_default_message: '[% loc_js('Drag photos here or <u>browse photos</u>') %]',
+        upload_default_message_mobile: '[% loc_js('<u>Take or choose existing photo</u>') %]',
+        upload_cancel_confirmation: '[% loc_js('Are you sure you want to cancel this upload?') %]',
+        upload_invalid_file_type: '[% loc_js('Please upload an image only') %]',
 
         [% IF c.config.SMS_AUTHENTICATION ~%]
-        login_with_email: '[% loc('Log in with email/text') | replace("'", "\\'") %]',
+        login_with_email: '[% loc_js('Log in with email/text') %]',
         [% ELSE ~%]
-        login_with_email: '[% loc('Log in with email') | replace("'", "\\'") %]',
+        login_with_email: '[% loc_js('Log in with email') %]',
         [% END ~%]
 
         report_a_problem_btn: {
-            default: '[% loc('Report a problem') | replace("'", "\\'") %]',
-            here: '[% loc('Report a problem here') | replace("'", "\\'") %]',
-            another: '[% loc('Report another problem here') | replace("'", "\\'") %]'
+            default: '[% loc_js('Report a problem') %]',
+            here: '[% loc_js('Report a problem here') %]',
+            another: '[% loc_js('Report another problem here') %]'
         },
 
         offline: {
-            your_reports: '[% loc('Your offline reports') | replace("'", "\\'") %]',
-            update_saved: '[% loc('Your update has been saved offline for submission when back online.') | replace("'", "\\'") %]',
-            update_data_saved: '[% loc('Offline update data saved') | replace("'", "\\'") %]',
-            clear_data: '[% loc('Clear offline data') | replace("'", "\\'") %]',
-            are_you_sure: '[% loc('Are you sure?') | replace("'", "\\'") %]',
-            data_cleared: '[% loc('Offline data cleared') | replace("'", "\\'") %]',
-            reports_saved: '[% loc('Reports saved offline.') | replace("'", "\\'") %]',
-            saving_reports: '[% loc('Saving reports offline', "This is followed by a progress count, e.g. 3/5") | replace("'", "\\'") %]',
-            you_are_offline: '[% loc('You are offline') | replace("'", "\\'") %]',
-            N_saved: '[% loc('<span>%s</span> saved.') | replace("'", "\\'") %]',
-            saved_to_submit: '[% loc('You have <a id="oFN" href=""><span>%s</span> saved to submit</a>.') | replace("'", "\\'") %]',
-            update_single: '[% loc('update') | replace("'", "\\'") %]',
-            update_plural: '[% loc('updates') | replace("'", "\\'") %]'
+            your_reports: '[% loc_js('Your offline reports') %]',
+            update_saved: '[% loc_js('Your update has been saved offline for submission when back online.') %]',
+            update_data_saved: '[% loc_js('Offline update data saved') %]',
+            clear_data: '[% loc_js('Clear offline data') %]',
+            are_you_sure: '[% loc_js('Are you sure?') %]',
+            data_cleared: '[% loc_js('Offline data cleared') %]',
+            reports_saved: '[% loc_js('Reports saved offline.') %]',
+            saving_reports: '[% loc_js('Saving reports offline', "This is followed by a progress count, e.g. 3/5") %]',
+            you_are_offline: '[% loc_js('You are offline') %]',
+            N_saved: '[% loc_js('<span>%s</span> saved.') %]',
+            saved_to_submit: '[% loc_js('You have <a id="oFN" href=""><span>%s</span> saved to submit</a>.') %]',
+            update_single: '[% loc_js('update') %]',
+            update_plural: '[% loc_js('updates') %]'
         }
     };
 [% END %]
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 48ae83103..adb935708 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -1285,9 +1285,13 @@ fixmystreet.update_pin = function(lonlat, savePushState) {
     if (savePushState !== false) {
         if ('pushState' in history) {
             var newReportUrl = '/report/new?longitude=' + lonlats.url.lon + '&latitude=' + lonlats.url.lat;
-            history.pushState({
-                newReportAtLonlat: lonlats.state
-            }, null, newReportUrl);
+            var newState = { newReportAtLonlat: lonlats.state };
+            // If we're already in the reporting place, we want to replace state, it's a pin move
+            if (fixmystreet.page === 'new') {
+                history.replaceState(newState, null, newReportUrl);
+            } else {
+                history.pushState(newState, null, newReportUrl);
+            }
         }
     }
 
@@ -1455,6 +1459,9 @@ fixmystreet.display = {
             height = $map_box.height();
         $map_box.append(
             '<p class="sub-map-links" id="mob_sub_map_links">' +
+            '<a href="#" id="problems_nearby">' +
+                translation_strings.back +
+            '</a>' +
             '<a href="#" id="try_again">' +
                 translation_strings.try_again +
             '</a>' +
@@ -1467,25 +1474,32 @@ fixmystreet.display = {
             width: width,
             height: height
         });
-        $('#try_again').click(function(e){
+
+        $('.mobile-map-banner span').text(translation_strings.right_place);
+
+        $('#problems_nearby').click(function(e){
             e.preventDefault();
             history.back();
         });
 
-        $('.mobile-map-banner span').text(translation_strings.right_place);
+        $('#try_again').click(function(e) {
+            e.preventDefault();
+            $('#mob_ok').click();
+        });
 
         // mobile user clicks 'ok' on map
         $('#mob_ok').toggle(function(){
             //scroll the height of the map box instead of the offset
             //of the #side-form or whatever as we will probably want
             //to do this on other pages where #side-form might not be
-            $('html, body').animate({ scrollTop: height-60 }, 1000, function(){
+            $('html, body').animate({ scrollTop: height-60 }, 500, function(){
                 $('html').removeClass('only-map');
                 $('#mob_sub_map_links').addClass('map_complete');
                 $('#mob_ok').text(translation_strings.map);
             });
         }, function(){
-            $('html, body').animate({ scrollTop: 0 }, 1000, function(){
+            var current = $('html, body').scrollTop();
+            $('html, body').animate({ scrollTop: 0 }, 500/height*current, function(){
                 $('html').addClass('only-map');
                 $('#mob_sub_map_links').removeClass('map_complete');
                 $('#mob_ok').text(translation_strings.ok);
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index bdd292e06..b52b75f43 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1816,11 +1816,16 @@ html.js #map .noscript {
         }
     }
 
+    #problems_nearby,
     #try_again,
     #mob_ok {
         width: 50%;
     }
 
+    #try_again {
+        display: none;
+    }
+
     .feed:after {
         @extend %sub-map-link-icon;
         background-position: -12px 0;
@@ -1876,6 +1881,10 @@ html.js #map .noscript {
     top: 30px;
     background-color: rgba(#000, 0.3);
 
+    #problems_nearby {
+        display: none;
+    }
+
     #try_again,
     #mob_ok {
         position: absolute;
@@ -1935,7 +1944,6 @@ html.js #map .noscript {
   .map-fullscreen & {
     display: block;
   }
-  text-transform: uppercase;
   text-align: center;
   font-family: $heading-font;
   line-height: 1em;
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index a8aa7f096..6142b3e23 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -132,8 +132,8 @@ $.extend(fixmystreet.utils, {
             new OpenLayers.Projection("EPSG:4326")
         );
 
-        var lat = transformedLonlat.lat;
-        var lon = transformedLonlat.lon;
+        var lat = transformedLonlat.lat.toFixed(6);
+        var lon = transformedLonlat.lon.toFixed(6);
 
         document.getElementById('fixmystreet.latitude').value = lat;
         document.getElementById('fixmystreet.longitude').value = lon;
diff --git a/web/js/map-google.js b/web/js/map-google.js
index bf9909f02..fc515b9dd 100644
--- a/web/js/map-google.js
+++ b/web/js/map-google.js
@@ -11,8 +11,8 @@ fixmystreet.maps = {};
 (function() {
 
     fixmystreet.maps.update_pin = function(lonlat) {
-        var lat = lonlat.lat();
-        var lon = lonlat.lng();
+        var lat = lonlat.lat().toFixed(6);
+        var lon = lonlat.lng().toFixed(6);
         document.getElementById('fixmystreet.latitude').value = lat;
         document.getElementById('fixmystreet.longitude').value = lon;
         return {
diff --git a/web/js/map-wmts-zurich.js b/web/js/map-wmts-zurich.js
index 436dca6ff..7ed7bbbc3 100644
--- a/web/js/map-wmts-zurich.js
+++ b/web/js/map-wmts-zurich.js
@@ -102,8 +102,8 @@ fixmystreet.maps.matrix_ids = [
 
 (function() {
     function pin_dragged(lonlat) {
-        document.getElementById('fixmystreet.latitude').value = lonlat.y;
-        document.getElementById('fixmystreet.longitude').value = lonlat.x;
+        document.getElementById('fixmystreet.latitude').value = lonlat.y.toFixed(6);
+        document.getElementById('fixmystreet.longitude').value = lonlat.x.toFixed(6);
     }
 
     $(function(){