Hide update form for inspectors in HTML.

This prevents the form scroll going to the wrong place when the
form was being hidden later on.

6 files changed, 18 insertions, 11 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1d68459a5..d3611cb72 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -28,6 +28,7 @@
         - Fix pin size when JavaScript unavailable.
         - Fix display of text only body contacts #1895
         - Prevent text overflow bug on homepage stats #1722
+        - Stop page jumping too far down on inspect form. #1863
     - Admin improvements:
       - Character length limit can be placed on report detailed information #1848
       - Inspector panel shows nearest address if available #1850
diff --git a/templates/web/base/report/display.html b/templates/web/base/report/display.html
index d5e3bdcfa..f9c42b35d 100644
--- a/templates/web/base/report/display.html
+++ b/templates/web/base/report/display.html
@@ -53,11 +53,18 @@
 [% TRY %][% INCLUDE 'report/sharing.html' %][% CATCH file %][% END %]
 [% INCLUDE 'report/updates.html' %]
 
+[% IF two_column_sidebar %]
+<button class="btn btn--provide-update js-provide-update hidden-nojs">[% loc('Provide an update') %]</button>
+<div class="hidden-js">
+[% END %]
 [% IF problem.duplicate_of %]
     [% INCLUDE 'report/duplicate-no-updates.html' %]
 [% ELSIF NOT shown_form %]
     [% INCLUDE 'report/update-form.html' %]
 [% END %]
+[% IF two_column_sidebar %]
+</div>
+[% END %]
 
   </div>
 
diff --git a/templates/web/base/report/duplicate-no-updates.html b/templates/web/base/report/duplicate-no-updates.html
index c8020a107..7de2ae042 100644
--- a/templates/web/base/report/duplicate-no-updates.html
+++ b/templates/web/base/report/duplicate-no-updates.html
@@ -1,5 +1,7 @@
 <div>
-    [% UNLESS hide_header %]<h2 class="update-form-heading">[% loc( 'Provide an update') %]</h2>[% END %]
+  [% UNLESS hide_header %]
+    <h2[% IF two_column_sidebar %] class="hidden-js"[% END %]>[% loc('Provide an update') %]</h2>
+  [% END %]
     <p>[% loc("This report is a duplicate. Please leave updates on the original report:") %]</p>
     <ul class="item-list">
       [% INCLUDE 'report/_item.html' item_extra_class = 'item-list__item--with-pin item-list--reports__item--selected' problem = problem.duplicate_of %]
diff --git a/templates/web/base/report/update-form.html b/templates/web/base/report/update-form.html
index ea7b14970..912aae2b4 100644
--- a/templates/web/base/report/update-form.html
+++ b/templates/web/base/report/update-form.html
@@ -3,7 +3,7 @@
 
 <div id="update_form">
   [% IF NOT login_success AND NOT oauth_need_email %]
-    <h2 class="update-form-heading">[% loc( 'Provide an update') %]</h2>
+    <h2[% IF two_column_sidebar %] class="hidden-js"[% END %]>[% loc( 'Provide an update') %]</h2>
 
     [% IF c.cobrand.moniker != 'stevenage' %]
     <div class="general-notes">
diff --git a/templates/web/bromley/report/update-form.html b/templates/web/bromley/report/update-form.html
index e6d0e1bc0..45d7aed5e 100644
--- a/templates/web/bromley/report/update-form.html
+++ b/templates/web/bromley/report/update-form.html
@@ -1,5 +1,7 @@
 <div id="update_form">
-    <h2 class="update-form-heading">[% loc( 'Provide an update') %]</h2>
+  [% UNLESS hide_header %]
+    <h2[% IF two_column_sidebar %] class="hidden-js"[% END %]>[% loc('Provide an update') %]</h2>
+  [% END %]
 
     [% INCLUDE 'errors.html' %]
 
diff --git a/web/cobrands/fixmystreet/staff.js b/web/cobrands/fixmystreet/staff.js
index f1e07ed6b..2b7c5b010 100644
--- a/web/cobrands/fixmystreet/staff.js
+++ b/web/cobrands/fixmystreet/staff.js
@@ -330,16 +330,11 @@ $.extend(fixmystreet.set_up, {
         });
     }
 
-    // Make the "Provide an update" form toggleable, and hide it by default.
+    // Make the "Provide an update" form toggleable, hidden by default.
     // (Inspectors will normally just use the #public_update box instead).
-    var $updateFormH2 = $('.update-form-heading');
-    var $updateFormBtn = $('<button>').insertBefore( $updateFormH2 );
-    $updateFormH2.hide().nextAll().hide();
-    $updateFormBtn.addClass('btn btn--provide-update');
-    $updateFormBtn.text( $updateFormH2.text() );
-    $updateFormBtn.on('click', function(e) {
+    $('.js-provide-update').on('click', function(e) {
         e.preventDefault();
-        $updateFormH2.nextAll().toggle();
+        $(this).next().toggleClass('hidden-js');
     });
   },