New section headings in report form.

The report form is now split into "Public" and "Private" sections,
with a third, matching heading, for the category_extras, if shown.

21 files changed, 139 insertions, 70 deletions

diff --git a/perllib/FixMyStreet/App/Controller/Report/New.pm b/perllib/FixMyStreet/App/Controller/Report/New.pm
index 7b012e0a1..1e0dff9d9 100644
--- a/perllib/FixMyStreet/App/Controller/Report/New.pm
+++ b/perllib/FixMyStreet/App/Controller/Report/New.pm
@@ -180,6 +180,8 @@ sub report_form_ajax : Path('ajax') : Args(0) {
     # render templates to get the html
     my $category = $c->render_fragment( 'report/new/category.html');
     my $councils_text = $c->render_fragment( 'report/new/councils_text.html');
+    my $councils_text_private = $c->render_fragment( 'report/new/councils_text_private.html');
+    my $top_message = $c->render_fragment('report/new/top_message.html');
     my $extra_name_info = $c->stash->{extra_name_info}
         ? $c->render_fragment('report/new/extra_name.html')
         : '';
@@ -198,11 +200,13 @@ sub report_form_ajax : Path('ajax') : Args(0) {
     my $body = encode_json(
         {
             councils_text   => $councils_text,
+            councils_text_private => $councils_text_private,
             category        => $category,
             extra_name_info => $extra_name_info,
             titles_list     => $extra_titles_list,
             categories      => $c->stash->{category_options},
             %$contribute_as ? (contribute_as => $contribute_as) : (),
+            $top_message ? (top_message => $top_message) : (),
         }
     );
 
@@ -238,7 +242,14 @@ sub category_extras_ajax : Path('category_extras') : Args(0) {
         $category_extra = $c->render_fragment( 'report/new/category_extras.html');
     }
 
-    my $body = encode_json({ category_extra => $category_extra });
+    my $councils_text = $c->render_fragment( 'report/new/councils_text.html');
+    my $councils_text_private = $c->render_fragment( 'report/new/councils_text_private.html');
+
+    my $body = encode_json({
+        category_extra => $category_extra,
+        councils_text => $councils_text,
+        councils_text_private => $councils_text_private,
+    });
 
     $c->res->content_type('application/json; charset=utf-8');
     $c->res->body($body);
diff --git a/templates/web/base/report/new/category_extras.html b/templates/web/base/report/new/category_extras.html
index e6ad1a26e..6d43d125a 100644
--- a/templates/web/base/report/new/category_extras.html
+++ b/templates/web/base/report/new/category_extras.html
@@ -8,7 +8,13 @@
 
   [%- IF category_extras.$category.size %]
     <div class="extra-category-questions full-width">
-    <h4>[% loc('Additional Information') %]</h4>
+    <h2 class="form-section-heading">[% category %]</h2>
+    <p class="form-section-description">
+      [% tprintf(
+        loc('Help <strong>%s</strong> resolve your problem quicker, by providing some extra detail. This extra information will not be published online.'),
+        all_body_names.join( '</strong>' _ loc(' or ') _ '<strong>' )
+      ); %]
+    </p>
       [%- FOR meta IN category_extras.$category %]
         [%- meta_name = meta.code -%]
 
diff --git a/templates/web/base/report/new/councils_extra_text.html b/templates/web/base/report/new/councils_extra_text.html
deleted file mode 100644
index b77758b01..000000000
--- a/templates/web/base/report/new/councils_extra_text.html
+++ /dev/null
@@ -1 +0,0 @@
-[% loc('The summary and description will also be made public (see our <a href="/privacy">privacy policy</a>).') %]
diff --git a/templates/web/base/report/new/councils_text.html b/templates/web/base/report/new/councils_text.html
index 65e41f0d1..bab30e8f9 100644
--- a/templates/web/base/report/new/councils_text.html
+++ b/templates/web/base/report/new/councils_text.html
@@ -1,11 +1,10 @@
 [% FILTER collapse %]
-[% IF unresponsive.ALL %]
-    [% PROCESS 'report/new/unresponsive_body.html' body_id = unresponsive.ALL %]
-[% ELSIF bodies_to_list.size == 0 %]
-    [% PROCESS 'report/new/councils_text_none.html' %]
-[% ELSIF bodies_to_list.size == bodies.size %]
-    [% PROCESS 'report/new/councils_text_all.html' %]
+[% IF unresponsive.$category OR unresponsive.ALL OR bodies_to_list.size == 0 %]
+    [% tprintf(
+        loc('These will be published online for others to see, in accordance with our <a href="%s">privacy policy</a>.'),
+            '/privacy')
+    %]
 [% ELSE %]
-    [% PROCESS 'report/new/councils_text_some.html' %]
+    [% PROCESS 'report/new/councils_text_all.html' %]
 [% END %]
 [% END -%]
diff --git a/templates/web/base/report/new/councils_text_all.html b/templates/web/base/report/new/councils_text_all.html
index 9947625a5..e856e5a09 100644
--- a/templates/web/base/report/new/councils_text_all.html
+++ b/templates/web/base/report/new/councils_text_all.html
@@ -1,10 +1,12 @@
+[% DEFAULT list_of_names = all_body_names %]
+
 <p>
 [%
     tprintf(
-        loc('All the information you provide here will be sent to <strong>%s</strong>.'),
-        all_body_names.join( '</strong>' _ loc(' or ') _ '<strong>' )
+        loc('These will be sent to <strong>%s</strong> and also published online for others to see, in accordance with our <a href="%s">privacy policy</a>.'),
+        list_of_names.join( '</strong>' _ loc(' or ') _ '<strong>' ), '/privacy'
     );
 %]
 
-[% INCLUDE 'report/new/councils_extra_text.html' %]
+[% TRY %][% INCLUDE 'report/new/councils_extra_text.html' %][% CATCH file %][% END %]
 </p>
diff --git a/templates/web/base/report/new/councils_text_private.html b/templates/web/base/report/new/councils_text_private.html
new file mode 100644
index 000000000..4ee7846f1
--- /dev/null
+++ b/templates/web/base/report/new/councils_text_private.html
@@ -0,0 +1,8 @@
+[% FILTER collapse %]
+[% IF unresponsive.$category OR unresponsive.ALL OR bodies_to_list.size == 0 %]
+    [% loc('These will never be shown online.') %]
+[% ELSE %]
+    [% loc('These will be sent to the council, but will never be shown online.') %]
+[% END %]
+(<a href="/privacy">[% loc('See our privacy policy') %]</a>.)
+[% END -%]
diff --git a/templates/web/base/report/new/fill_in_details_form.html b/templates/web/base/report/new/fill_in_details_form.html
index 917f9ec88..f8714f573 100644
--- a/templates/web/base/report/new/fill_in_details_form.html
+++ b/templates/web/base/report/new/fill_in_details_form.html
@@ -4,17 +4,9 @@
     <p class="change_location">[% loc('Wrong location? Just click again on the map.') %]</p>
 [% END %]
 
-[% IF js %]
-    <p id="councils_text">
-      [% tprintf(
-          loc('All the information you provide here will be sent to <strong>%s</strong>.'),
-          loc('the local council')
-      ); %]
-      [% loc('The summary and description will also be made public (see our <a href="/privacy">privacy policy</a>).') %]
-    </p>
-[% ELSE %]
-    [% PROCESS 'report/new/councils_text.html' %]
-[% END %]
+<div id="js-top-message">
+    [% PROCESS 'report/new/top_message.html' %]
+</div>
 
 [% IF report.used_map && partial_token %]
     <p id="unknown">[% loc('Please note your report has <strong>not yet been sent</strong>. Choose a category and add further information below, then submit.') %]</p>
diff --git a/templates/web/base/report/new/form_report.html b/templates/web/base/report/new/form_report.html
index dfa4a0b47..3c36bd0cc 100644
--- a/templates/web/base/report/new/form_report.html
+++ b/templates/web/base/report/new/form_report.html
@@ -7,6 +7,15 @@
 [% PROCESS "report/new/category_wrapper.html" %]
 [% TRY %][% PROCESS 'report/new/after_category.html' %][% CATCH file %][% END %]
 
+    <h2 class="form-section-heading">Public details</h2>
+    <div class="form-section-description" id="js-councils_text">
+      [% IF js %]
+        [% PROCESS 'report/new/councils_text_all.html' list_of_names = [ loc('the local council') ] %]
+      [% ELSE %]
+        [% PROCESS 'report/new/councils_text.html' %]
+      [% END %]
+    </div>
+
     <label for="form_title">[% loc('Summarise the problem') %]</label>
 [% IF field_errors.title %]
     <p class='form-error'>[% field_errors.title %]</p>
diff --git a/templates/web/base/report/new/form_user.html b/templates/web/base/report/new/form_user.html
index d0e8c0829..424660aa8 100644
--- a/templates/web/base/report/new/form_user.html
+++ b/templates/web/base/report/new/form_user.html
@@ -1,3 +1,13 @@
+<h2 class="form-section-heading form-section-heading--private">Private details</h2>
+<p class="form-section-description" id="js-councils_text_private">
+  [% IF js %]
+    [% loc('These will be sent to the council, but will never be shown online.') %]
+    (<a href="/privacy">[% loc('See our privacy policy') %]</a>.)
+  [% ELSE %]
+    [% PROCESS 'report/new/councils_text_private.html' %]
+  [% END %]
+</p>
+
 [% IF c.user_exists %]
   [% PROCESS "report/new/form_user_loggedin.html" %]
 [% ELSE %]
diff --git a/templates/web/base/report/new/form_user_loggedout.html b/templates/web/base/report/new/form_user_loggedout.html
index 889834580..c444ebce4 100644
--- a/templates/web/base/report/new/form_user_loggedout.html
+++ b/templates/web/base/report/new/form_user_loggedout.html
@@ -1,6 +1,4 @@
 [% IF c.config.FACEBOOK_APP_ID OR c.config.TWITTER_KEY %]
-    <h3>[% loc("Now to submit your report&hellip;") %]</h3>
-
   [% IF c.config.FACEBOOK_APP_ID %]
     <div class="form-box">
     <button name="facebook_sign_in" id="facebook_sign_in" value="facebook_sign_in" class="btn btn--block btn--social btn--facebook">
@@ -21,7 +19,6 @@
     [% PROCESS 'report/new/form_user_loggedout_email.html' required = 0 %]
 [% ELSE %]
     [% PROCESS 'report/new/form_user_loggedout_email.html' required = 1 %]
-    <h3>[% loc("Now to submit your report&hellip;") %]</h3>
 [% END %]
 
 <div id="form_sign_in">
diff --git a/templates/web/base/report/new/top_message.html b/templates/web/base/report/new/top_message.html
new file mode 100644
index 000000000..2d21c9cee
--- /dev/null
+++ b/templates/web/base/report/new/top_message.html
@@ -0,0 +1,9 @@
+[% FILTER collapse ~%]
+[%~ IF unresponsive.ALL ~%]
+    [% PROCESS 'report/new/unresponsive_body.html' body_id = unresponsive.ALL %]
+[%~ ELSIF bodies_to_list.size == 0 # On a /new page, no bodies ~%]
+    <div class="box-warning">[% PROCESS 'report/new/top_message_none.html' %]</div>
+[%~ ELSIF bodies_to_list.size != bodies.size # On a /new page, some missing bodies ~%]
+    <div class="box-warning">[% PROCESS 'report/new/top_message_some.html' %]</div>
+[%~ END ~%]
+[%~ END ~%]
diff --git a/templates/web/base/report/new/councils_text_none.html b/templates/web/base/report/new/top_message_none.html
index 6a1a2bc67..85caf944c 100644
--- a/templates/web/base/report/new/councils_text_none.html
+++ b/templates/web/base/report/new/top_message_none.html
@@ -7,7 +7,7 @@
     );
 %]
 [%
-    loc("If you submit a problem here the subject and details of the problem will be public, but the problem will <strong>not</strong> be reported to the council.");
+    loc("If you submit a problem here the problem will <strong>not</strong> be reported to the council.");
 %]
 [%
     tprintf(
diff --git a/templates/web/base/report/new/councils_text_some.html b/templates/web/base/report/new/top_message_some.html
index 70cb97617..efc8fe4cc 100644
--- a/templates/web/base/report/new/councils_text_some.html
+++ b/templates/web/base/report/new/top_message_some.html
@@ -1,14 +1,4 @@
 <p>
-[% loc('All the information you provide here will be sent to') %]
-
-[% FOREACH body_id IN bodies_to_list %]
-    [% loc( ' or ') IF ! loop.first %]
-    <strong>[% bodies.$body_id.name %]</strong>
-    [%- '.' IF loop.last %]    
-[% END %]
-
-[% loc('The summary and description will also be made public (see our <a href="/privacy">privacy policy</a>).') %]
-
 [%
     nget(
         "We do <strong>not</strong> yet have details for the other council that covers this location.",
diff --git a/templates/web/fixamingata/report/new/councils_text_none.html b/templates/web/fixamingata/report/new/top_message_none.html
index cdad54f18..78220d6b2 100644
--- a/templates/web/fixamingata/report/new/councils_text_none.html
+++ b/templates/web/fixamingata/report/new/top_message_none.html
@@ -7,7 +7,7 @@
 %]
 [% END %]
 [%
-    loc("If you submit a problem here the subject and details of the problem will be public, but the problem will <strong>not</strong> be reported to the council.");
+    loc("If you submit a problem here the problem will <strong>not</strong> be reported to the council.");
 %]
 [% IF all_body_names.size != 1 %]
 [%
diff --git a/templates/web/fixmystreet.com/report/new/unresponsive_body.html b/templates/web/fixmystreet.com/report/new/unresponsive_body.html
index d0f16d188..5089f5198 100644
--- a/templates/web/fixmystreet.com/report/new/unresponsive_body.html
+++ b/templates/web/fixmystreet.com/report/new/unresponsive_body.html
@@ -1,4 +1,4 @@
-<div class="unresponsive-council-warning">
+<div class="box-warning">
     <h1>Important message</h1>
     <p>
         <span class="unresponsive-council">[% bodies.$body_id.name %]</span> doesn’t accept
diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss
index 366ebc451..869654b87 100644
--- a/web/cobrands/fixmystreet.com/base.scss
+++ b/web/cobrands/fixmystreet.com/base.scss
@@ -106,35 +106,6 @@
   }
 }
 
-.unresponsive-council-warning {
-    margin: 1em -1em;
-    padding: 2em 2em;
-    background-color: mix(#fff, $primary, 70%);
-
-    h1 {
-        font-size: 1.4em;
-    }
-
-    p {
-        margin-bottom: 0.5em;
-    }
-
-    a {
-        display: inline-block;
-        margin-top: 0.5em;
-        padding: 0.5em 1em;
-        background-color: #000;
-        color: #fff;
-        border-radius: 0.3em;
-
-        &:hover,
-        &:focus {
-            text-decoration: none;
-            background-color: mix(#000, $primary, 70%);
-        }
-    }
-}
-
 .unresponsive-council__header {
     padding-bottom: 1em;
     border-bottom: 1px solid #ccc;
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index be6b2f391..51ed30880 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -373,6 +373,8 @@ $.extend(fixmystreet.set_up, {
 
         $.getJSON('/report/new/category_extras', args, function(data) {
             var $category_meta = $('#category_meta');
+            $('#js-councils_text').html(data.councils_text);
+            $('#js-councils_text_private').html(data.councils_text_private);
             if ( data.category_extra ) {
                 if ( $category_meta.length ) {
                     $category_meta.replaceWith( data.category_extra );
@@ -866,7 +868,9 @@ fixmystreet.update_pin = function(lonlat, savePushState) {
         }
         $('#side-form, #site-logo').show();
         var old_category = $("select#form_category").val();
-        $('#councils_text').html(data.councils_text);
+        $('#js-councils_text').html(data.councils_text);
+        $('#js-councils_text_private').html(data.councils_text_private);
+        $('#js-top-message').html(data.top_message || '');
         $('#form_category_row').html(data.category);
         if ($("select#form_category option[value=\""+old_category+"\"]").length) {
             $("select#form_category").val(old_category);
diff --git a/web/cobrands/fixmystreet/images/padlock.png b/web/cobrands/fixmystreet/images/padlock.png
new file mode 100644
index 000000000..d5cb6d8ef
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/padlock.png
diff --git a/web/cobrands/fixmystreet/images/padlock.svg b/web/cobrands/fixmystreet/images/padlock.svg
new file mode 100644
index 000000000..78fbcdc06
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/padlock.svg
@@ -0,0 +1 @@
+<svg width="16" height="18" viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg"><title>Artboard</title><path d="M2.667 5.143V8H0v10h16V8h-2.667V5.143C13.333 2.3 10.947 0 8 0S2.667 2.3 2.667 5.143zm8 0V8H5.333V5.143c0-1.53 1.08-2.572 2.667-2.572 1.587 0 2.667 1.043 2.667 2.573z" fill="#000" fill-rule="evenodd" fill-opacity=".6"/></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/padlock@2.png b/web/cobrands/fixmystreet/images/padlock@2.png
new file mode 100644
index 000000000..368d344e3
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/padlock@2.png
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 20aeed2b6..e5d2c48dd 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -287,6 +287,38 @@ select.form-control {
     height: 2.2em; // roughly equal to default input height
 }
 
+.form-section-heading {
+    font-family: inherit;
+    color: inherit;
+    font-weight: bold;
+    margin-bottom: 0.25em;
+}
+
+.form-section-heading--private {
+    &:before {
+        content: "";
+        display: inline-block;
+        width: 16px;
+        height: 18px;
+        background: transparent url(/cobrands/fixmystreet/images/padlock.png) 0 0 no-repeat;
+        background-size: 16px 18px;
+        margin-#{$right}: 0.5em;
+
+        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+            background-image: url(/cobrands/fixmystreet/images/padlock@2.png);
+        }
+
+        @media all {
+            background-image: url(/cobrands/fixmystreet/images/padlock.svg), none;
+        }
+    }
+}
+
+.form-section-description {
+    color: #666;
+    line-height: 1em * (22/16);
+}
+
 // grey background, full width box
 .form-box {
   margin: 0 -1em 0.25em;
@@ -1878,6 +1910,35 @@ table.nicetable {
   }
 }
 
+.box-warning {
+    margin: 1em -1em;
+    padding: 2em 2em;
+    background-color: mix(#fff, $primary, 70%);
+
+    h1 {
+        font-size: 1.4em;
+    }
+
+    p {
+        margin-bottom: 0.5em;
+    }
+
+    a {
+        display: inline-block;
+        margin-top: 0.5em;
+        padding: 0.5em 1em;
+        background-color: #000;
+        color: #fff;
+        border-radius: 0.3em;
+
+        &:hover,
+        &:focus {
+            text-decoration: none;
+            background-color: mix(#000, $primary, 70%);
+        }
+    }
+}
+
 @import "_admin";
 @import "_fixedthead";
 @import "_dropzone";