Better UX on mobile for inspector changing asset.

Scrolls to map and locks map full screen when change asset pressed;
collapse map to finish; displays attribute fields in map overlay.

4 files changed, 24 insertions, 1 deletions

diff --git a/web/cobrands/fixmystreet/assets.js b/web/cobrands/fixmystreet/assets.js
index 367e2d33c..ef345092b 100644
--- a/web/cobrands/fixmystreet/assets.js
+++ b/web/cobrands/fixmystreet/assets.js
@@ -134,6 +134,7 @@ OpenLayers.Layer.VectorAsset = OpenLayers.Class(OpenLayers.Layer.Vector, {
             return;
         }
         // Set the extra fields to the value of the selected feature
+        var $mobile_display = $('#change_asset_mobile').text('');
         $.each(this.fixmystreet.attributes, function(field_name, attribute_name) {
             var $field = $("#form_" + field_name);
             var $inspect_fields = $('[id^=category_][id$=form_' + field_name + ']');
@@ -145,6 +146,7 @@ OpenLayers.Layer.VectorAsset = OpenLayers.Class(OpenLayers.Layer.Vector, {
             }
             $field.val(value);
             $inspect_fields.val(value);
+            $mobile_display.append(field_name + ': ' + value + '<br>');
         });
     },
 
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index d032b652d..5485ff7c7 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -892,10 +892,16 @@ $.extend(fixmystreet.set_up, {
             .prependTo('#sub_map_links');
     }
 
-    $('#toggle-fullscreen').off('click').on('click', function() {
+    $('#toggle-fullscreen').off('click').on('click', function(e) {
+      e.preventDefault();
       var btnClass = $('html').hasClass('map-fullscreen') ? 'expand' : 'compress';
       var text = $(this).data(btnClass + '-text');
 
+      // Inspector form asset changing
+      if ($('html').hasClass('map-fullscreen') && $('.btn--change-asset').hasClass('asset-spot')) {
+          $('.btn--change-asset').click();
+      }
+
       $('html').toggleClass('map-fullscreen only-map');
       $(this).html(text).attr('class', btnClass);
 
diff --git a/web/cobrands/fixmystreet/staff.js b/web/cobrands/fixmystreet/staff.js
index 113886fda..2422d5476 100644
--- a/web/cobrands/fixmystreet/staff.js
+++ b/web/cobrands/fixmystreet/staff.js
@@ -286,9 +286,15 @@ fixmystreet.staff_set_up = {
             var v = get_value_and_group('#category');
             $('#inspect_form_category').val(v.value);
             $('#inspect_category_group').val(v.group);
+            if ($('html').hasClass('mobile')) {
+                $('#toggle-fullscreen').trigger('click');
+                $('html, body').animate({ scrollTop: 0 }, 500);
+                $('#map_box').append('<div id="change_asset_mobile"/>');
+            }
         } else {
             $('#inspect_form_category').val('');
             $('#inspect_category_group').val('');
+            $('#change_asset_mobile').remove();
         }
         $(fixmystreet).trigger('inspect_form:asset_change');
     });
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index dbd357646..2992f3f65 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1972,6 +1972,15 @@ html.js #map .noscript {
   }
 }
 
+#change_asset_mobile {
+    position: absolute;
+    bottom: 3em;
+    #{$left}: 0.25em;
+    padding: 0.25em;
+    color: #fff;
+    background-color: black;
+}
+
 .olControlAttribution {
     bottom: 3.25em !important;
     #{$right}: 0.25em !important;