Improve in-place moderation UI

This rearranges the moderation UI into logical chunks,
and improves the 'revert to original' checkboxes by:
 - hiding them unless there's some original text to revert
   to
 - displaying the text that will be reverted to in the
   appropriate input fields when checked.

Part of mysociety/FixMyStreet-Commercial#731

2 files changed, 122 insertions, 116 deletions

diff --git a/templates/web/base/report/_main.html b/templates/web/base/report/_main.html
index 7260e619a..efff314f8 100644
--- a/templates/web/base/report/_main.html
+++ b/templates/web/base/report/_main.html
@@ -1,61 +1,40 @@
 [% moderating = c.user && c.user.has_permission_to('moderate', problem.bodies_str) %]
 
-[% IF moderating %]
-[%# TODO: extract stylesheet! %]
-<style>
-    .moderate-edit label {
-        display: inline-block;
-        height: 1em;
-        margin-top: 0;
-    }
-
-    .moderate-edit input {
-        display: inline-block;
-    }
-
-    .moderate-edit { display: none }
-    .moderate-edit :disabled {
-        background: #ddd;
-    }
-    br {
-        line-height: 0.5em;
-    }
-</style>
-[% END %]
-
 <div class="problem-header cf" problem-id="[% problem.id %]">
+
   [% IF moderating %]
-    [% original = problem.moderation_original_data %]
+    [% original = problem_original %]
     <form method="post" action="/moderate/report/[% problem.id %]">
-        <input type="button" class="btn moderate moderate-display" value="moderate">
-        <div class="moderate-edit">
-            <input type="checkbox" class="hide-document" name="problem_hide">
-            <label for="problem_hide">Hide report completely?</label>
-            <br />
-            <input type="checkbox" name="problem_show_name" [% problem.anonymous ? '' : 'checked' %]>
-            <label for="problem_show_name">Show name publicly?</label>
-            [% IF problem.photo or original.photo %]
-                <br />
-                <input type="checkbox" name="problem_show_photo" [% problem.photo ? 'checked' : '' %]>
-                <label for="problem_show_photo">Show Photo?</label>
-            [% END %]
-        </div>
+        <p class="moderate-display">
+            <input type="button" class="btn moderate" value="moderate">
+        </p>
   [% END %]
+
     <h1 class="moderate-display">[% problem.title | html %]</h1>
-    [% IF moderating %]
+
+  [% IF moderating %]
     <div class="moderate-edit">
-        [% IF problem.title != original.title %]
-        <input type="checkbox" name="problem_revert_title" class="revert-title">
-        <label for="problem_revert_title">Revert to original title</label>
-        [% END %]
-    <h1><input type="text" name="problem_title" value="[% problem.title | html %]"></h1>
+      [% IF problem.title != original.title %]
+        <label>
+            <input type="checkbox" name="problem_revert_title" class="revert-title">
+            Revert to original title
+        </label>
+      [% END %]
+        <h1><input type="text" name="problem_title" value="[% problem.title | html %]" data-original-value="[% original.title | html %]"></h1>
     </div>
-    [% END %]
+  [% END %]
 
+    <div class="moderate-edit">
+        <label>
+            <input type="checkbox" name="problem_show_name" [% problem.anonymous ? 'checked' : '' %]>
+            Hide reporter&rsquo;s name
+        </label>
+    </div>
     <p class="report_meta_info">
         [% problem.meta_line(c) | html %]
         [%- IF !problem.used_map %]; <strong>([% loc('there is no pin shown as the user did not use the map') %])</strong>[% END %]
     </p>
+
     [% IF problem.bodies_str %]
         [% INCLUDE 'report/_council_sent_info.html' %]
     [% ELSE %]
@@ -67,26 +46,50 @@
 
     [% INCLUDE 'report/_support.html' %]
 
+  [% IF moderating %]
+    [% IF problem.photo or original.photo %]
+        <p class="moderate-edit">
+            <label>
+                <input type="checkbox" name="problem_show_photo" [% problem.photo ? 'checked' : '' %]>
+                Show photo
+            </label>
+        </p>
+    [% END %]
+  [% END %]
+
     [% INCLUDE 'report/photo.html' object=problem %]
     <div class="moderate-display">
         [% add_links( problem.detail ) | html_para %]
     </div>
 
-    [% IF moderating %]
-        <div class="moderate-edit">
-        [% IF problem.detail != original.detail %]
-        <input type="checkbox" name="problem_revert_detail" class="revert-textarea">
-        <label for="problem_revert_detail">Revert to original text</label>
-        [% END %]
-        <textarea name="problem_detail">[% add_links( problem.detail ) %]</textarea>
-        </div>
+  [% IF moderating %]
+    <p class="moderate-edit">
+      [% IF problem.detail != original.detail %]
+        <label>
+            <input type="checkbox" name="problem_revert_detail" class="revert-textarea">
+            Revert to original text
+        </label>
+      [% END %]
+        <textarea name="problem_detail" data-original-value="[% original.detail | html %]">[% problem.detail | html %]</textarea>
+    </p>
 
-        <div class="moderate-edit">
+    <div class="moderate-edit">
+        <p>
+            <label>
+                <input type="checkbox" class="hide-document" name="problem_hide" [% problem.hidden ? 'checked' : '' %]>
+                Hide entire report
+            </label>
+        </p>
+        <p>
             <label for="moderation_reason">Moderation reason:</label>
             <input type="text" name="moderation_reason" placeholder="Describe why you are moderating this">
-            <input type="submit" class="red-btn" value="Moderate it">
-            <input type="button" class="btn cancel" value="cancel">
-        </div>
+        </p>
+        <p>
+            <input type="submit" class="green-btn" value="Save changes">
+            <input type="button" class="btn cancel" value="Discard changes">
+        </p>
+    </div>
+
     </form>
   [% END %]
 </div>
diff --git a/templates/web/oxfordshire/report/_main.html b/templates/web/oxfordshire/report/_main.html
index a4cb3e20b..2ff193075 100644
--- a/templates/web/oxfordshire/report/_main.html
+++ b/templates/web/oxfordshire/report/_main.html
@@ -1,61 +1,40 @@
 [% moderating = c.user && c.user.has_permission_to('moderate', problem.bodies_str) %]
 
-[% IF moderating %]
-[%# TODO: extract stylesheet! %]
-<style>
-    .moderate-edit label {
-        display: inline-block;
-        height: 1em;
-        margin-top: 0;
-    }
-
-    .moderate-edit input {
-        display: inline-block;
-    }
-
-    .moderate-edit { display: none }
-    .moderate-edit :disabled {
-        background: #ddd;
-    }
-    br {
-        line-height: 0.5em;
-    }
-</style>
-[% END %]
-
 <div class="problem-header cf" problem-id="[% problem.id %]">
+
   [% IF moderating %]
-    [% original = problem.moderation_original_data %]
+    [% original = problem_original %]
     <form method="post" action="/moderate/report/[% problem.id %]">
-        <input type="button" class="btn moderate moderate-display" value="moderate">
-        <div class="moderate-edit">
-            <input type="checkbox" class="hide-document" name="problem_hide">
-            <label for="problem_hide">Hide report completely?</label>
-            <br />
-            <input type="checkbox" name="problem_show_name" [% problem.anonymous ? '' : 'checked' %]>
-            <label for="problem_show_name">Show name publicly?</label>
-            [% IF problem.photo or original.photo %]
-                <br />
-                <input type="checkbox" name="problem_show_photo" [% problem.photo ? 'checked' : '' %]>
-                <label for="problem_show_photo">Show Photo?</label>
-            [% END %]
-        </div>
+        <p class="moderate-display">
+            <input type="button" class="btn moderate" value="moderate">
+        </p>
   [% END %]
+
     <h1 class="moderate-display">[% problem.title | html %]</h1>
-    [% IF moderating %]
+
+  [% IF moderating %]
     <div class="moderate-edit">
-        [% IF problem.title != original.title %]
-        <input type="checkbox" name="problem_revert_title" class="revert-title">
-        <label for="problem_revert_title">Revert to original title</label>
-        [% END %]
-    <h1><input type="text" name="problem_title" value="[% problem.title | html %]"></h1>
+      [% IF problem.title != original.title %]
+        <label>
+            <input type="checkbox" name="problem_revert_title" class="revert-title">
+            Revert to original title
+        </label>
+      [% END %]
+        <h1><input type="text" name="problem_title" value="[% problem.title | html %]" data-original-value="[% original.title | html %]"></h1>
     </div>
-    [% END %]
+  [% END %]
 
+    <div class="moderate-edit">
+        <label>
+            <input type="checkbox" name="problem_show_name" [% problem.anonymous ? 'checked' : '' %]>
+            Hide reporter&rsquo;s name
+        </label>
+    </div>
     <p class="report_meta_info">
         [% problem.meta_line(c) | html %]
         [%- IF !problem.used_map %]; <strong>([% loc('there is no pin shown as the user did not use the map') %])</strong>[% END %]
     </p>
+
     [% IF problem.whensent %]
         <p class="council_sent_info">[% problem.duration_string(c) %]</p>
     [% END %]
@@ -65,34 +44,58 @@
 
     [% INCLUDE 'report/_support.html' %]
 
+  [% IF moderating %]
+    [% IF problem.photo or original.photo %]
+        <p class="moderate-edit">
+            <label>
+                <input type="checkbox" name="problem_show_photo" [% problem.photo ? 'checked' : '' %]>
+                Show photo
+            </label>
+        </p>
+    [% END %]
+  [% END %]
+
     [% INCLUDE 'report/photo.html' object=problem %]
     <div class="moderate-display">
         [% add_links( problem.detail ) | html_para %]
     </div>
 
-    [% IF moderating %]
-        <div class="moderate-edit">
-        [% IF problem.detail != original.detail %]
-        <input type="checkbox" name="problem_revert_detail" class="revert-textarea">
-        <label for="problem_revert_detail">Revert to original text</label>
-        [% END %]
-        <textarea name="problem_detail">[% add_links( problem.detail ) %]</textarea>
-        </div>
+  [% IF moderating %]
+    <p class="moderate-edit">
+      [% IF problem.detail != original.detail %]
+        <label>
+            <input type="checkbox" name="problem_revert_detail" class="revert-textarea">
+            Revert to original text
+        </label>
+      [% END %]
+        <textarea name="problem_detail" data-original-value="[% original.detail | html %]">[% problem.detail | html %]</textarea>
+    </p>
 
-        <div class="moderate-edit">
+    <div class="moderate-edit">
+        <p>
+            <label>
+                <input type="checkbox" class="hide-document" name="problem_hide" [% problem.hidden ? 'checked' : '' %]>
+                Hide entire report
+            </label>
+        </p>
+        <p>
             <label for="moderation_reason">Moderation reason:</label>
             <input type="text" name="moderation_reason" placeholder="Describe why you are moderating this">
-            <input type="submit" class="red-btn" value="Moderate it">
-            <input type="button" class="btn cancel" value="cancel">
-        </div>
+        </p>
+        <p>
+            <input type="submit" class="green-btn" value="Save changes">
+            <input type="button" class="btn cancel" value="Discard changes">
+        </p>
+    </div>
+
     </form>
   [% END %]
 
   [% IF problem.bodies_str %]
-      [% INCLUDE 'report/_council_sent_info.html' %]
+    [% INCLUDE 'report/_council_sent_info.html' %]
   [% ELSE %]
-      <div class="council_info_box">
-          <p>[% loc('Not reported to council') %]</p>
-      </div>
+    <div class="council_info_box">
+        <p>[% loc('Not reported to council') %]</p>
+    </div>
   [% END %]
 </div>