Remove reporting sidebar from .com cobrand.

7 files changed, 192 insertions, 101 deletions

diff --git a/templates/web/fixmystreet/report/new/fill_in_details_form.html b/templates/web/fixmystreet/report/new/fill_in_details_form.html
index 9f25145a7..6ad5484e0 100644
--- a/templates/web/fixmystreet/report/new/fill_in_details_form.html
+++ b/templates/web/fixmystreet/report/new/fill_in_details_form.html
@@ -1,125 +1,139 @@
 <div id="report-a-problem-main">
-    <h1>[% loc('Reporting a problem') %]</h1>
-
-    [% 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 subject and details of the problem will be public, plus your name if you give us permission.') %]
-        </p>
-    [% ELSE %]
-        [% PROCESS 'report/new/councils_text.html' %]
-    [% END %]
-
-    [% IF c.cobrand.moniker != 'fixmybarangay' || ( c.user && c.user.from_body ) %]
+    <h1>[% loc('Report your problem') %]</h1>
+
+  [% IF c.cobrand.moniker == 'fixmystreet' %]
+    <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 %]
+
+  [% IF c.cobrand.moniker == "fixmystreet" && 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>
+  [% END %]
+
+  [% IF c.cobrand.moniker != "fixmystreet" && (c.cobrand.moniker != 'fixmybarangay' || ( c.user && c.user.from_body ) ) %]
     <div id="report-a-problem-sidebar">
-        <!--
-            The text for this section needs checking, but I can't work out which bit comes from where
-        -->
         <div class="sidebar-tips">
-            [% IF report.used_map %]
-                [% IF 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>
-                [% END %]
+          [% IF report.used_map %]
+              [% IF 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>
+              [% END %]
+
             <p>[% loc('You have located the problem at the point marked with a green pin on the map. If this is not the correct location, simply click on the map again. ') %]</p>
-            [% END %]
+          [% END %]
 
             <p>
-            [% IF report.used_map %]
+              [% IF report.used_map %]
                 [% INCLUDE 'report/new/fill_in_details_text.html' %]
-            [% ELSE %]
+              [% ELSE %]
                 [% loc('Please fill in the form below with details of the problem, and describe the location as precisely as possible in the details box.') %]
-            [% END %]
+              [% END %]
             </p>
         </div>
-
         <div class="sidebar-notes">
             [% INCLUDE 'report/new/notes.html' %]
         </div>
-
     </div>
-    [% END %]
+  [% END %]
+
+  [% INCLUDE 'errors.html' %]
 
-    [% INCLUDE 'errors.html' %]
     <fieldset>
         <div id="problem_form">
 
-            [% INCLUDE 'report/new/form_heading.html' %]
-
-
-            [% IF field_errors.bodies %]
-                <p class='form-error'>[% field_errors.bodies %]</p>
-            [% END %]
-
-
-
-            <label for="form_title">[% loc('Subject') %]</label>
-            [% IF field_errors.title %]
-                <p class='form-error'>[% field_errors.title %]</p>
-            [% END %]
-            <input type="text" value="[% report.title | html %]" name="title" id="form_title" placeholder="[% loc('Provide a title') %]" required>
-
-            <label for="form_detail">[% loc('Details') %]</label>
-            [% IF field_errors.detail %]
-                <p class='form-error'>[% field_errors.detail %]</p>
-            [% END %]
-            <textarea rows="7" cols="26" name="detail" id="form_detail" placeholder="[% loc('Please fill in details of the problem.') %]" required>[% report.detail | html %]</textarea>
-
-            [% IF js %]
-                <div id="form_category_row">
-                    <label for="form_category">[% loc('Category') %]</label>
-                    <select name="category" id="form_category" required><option>[% loc('Loading...') %]</option></select>
-                </div>
-            [% ELSE %]
-                [% IF category_options.size %]
-                    [% IF field_errors.category %]
-                        <p class='form-error'>[% field_errors.category %]</p>
-                    [% END %]
-
-                    [% PROCESS "report/new/category.html" %]
-                [% END %]
-            [% END %]
-
-            [%- IF category_extras %]
-                [% PROCESS "report/new/category_extras.html" %]
-            [%- END %]
-
-            [% IF c.cobrand.allow_photo_upload %]
-                <label for="form_photo">[% loc('Photo') %]</label>
-                [% IF upload_fileid || report.photo %]
-                    [% IF upload_fileid %]
-                        <img align="right" src="/photo/[% upload_fileid %].temp.jpeg" alt="">
-                        <input type="hidden" name="upload_fileid" value="[% upload_fileid %]">
-                    [% END %]
-
-                    <p>[% loc('You have already attached a photo to this report, attaching another one will replace it.') %]</p>
-
-                    [% IF report.photo %]
-                        <img align="right" src="/photo/[% report.id %].jpeg">
-                    [% END %]
-                [% END %]
-
-                [% IF field_errors.photo %]
-                    <p class='form-error'>[% field_errors.photo %]</p>
-                [% END %]
-                <input type="file" name="photo" id="form_photo">
-            [% END %]
-
-            [% IF c.user_exists %]
-                [% PROCESS "report/new/form_user_loggedin.html" %]
-            [% ELSE %]
-                [% PROCESS "report/new/form_user_loggedout.html" %]
-            [% END %]
+          [% INCLUDE 'report/new/form_heading.html' %]
+
+          [% IF field_errors.bodies %]
+            <p class='form-error'>[% field_errors.bodies %]</p>
+          [% END %]
+
+            <label for="form_title">[% loc('One-line summary <span class="muted">(public)</span>') %]</label>
+          [% IF field_errors.title %]
+            <p class='form-error'>[% field_errors.title %]</p>
+          [% END %]
+            <input type="text" value="[% report.title | html %]" name="title" id="form_title" placeholder="[% loc('What’s the issue, and where is it?') %]" required>
+
+            <label for="form_detail">[% loc('Description <span class="muted">(public)</span>') %]</label>
+          [% IF field_errors.detail %]
+            <p class='form-error'>[% field_errors.detail %]</p>
+          [% END %]
+            <textarea rows="7" cols="26" name="detail" id="form_detail" placeholder="[% loc('Explain what’s wrong, exactly where it is, and how long it’s been there…') %]" required>[% report.detail | html %]</textarea>
+
+          [% IF c.cobrand.moniker == "fixmystreet" %]
+            <div class="description_tips">
+              <h4>Tips for successful reports:</h4>
+                <ul class="do">
+                    <li>Be polite</li>
+                    <li>Use exact locations</li>
+                    <li>Say how long the issue’s been&nbsp;present</li>
+                </ul>
+                <ul class="dont">
+                    <li>Don’t leave abusive or libellous&nbsp;messages</li>
+                    <li>Don’t include private contact details in the&nbsp;description</li>
+                </ul>
+            </div>
+          [% END %]
+
+          [% IF js %]
+              <div id="form_category_row">
+                  <label for="form_category">[% loc('Category') %]</label>
+                  <select name="category" id="form_category" required><option>[% loc('Loading...') %]</option></select>
+              </div>
+          [% ELSE %]
+              [% IF category_options.size %]
+                  [% IF field_errors.category %]
+                    <p class='form-error'>[% field_errors.category %]</p>
+                  [% END %]
+                  [% PROCESS "report/new/category.html" %]
+              [% END %]
+          [% END %]
+
+          [%- IF category_extras %]
+            [% PROCESS "report/new/category_extras.html" %]
+          [%- END %]
+
+          [% IF c.cobrand.allow_photo_upload %]
+              <label for="form_photo">[% loc('Photo') %]</label>
+              [% IF upload_fileid || report.photo %]
+                  [% IF upload_fileid %]
+                    <img align="right" src="/photo/[% upload_fileid %].temp.jpeg" alt="">
+                    <input type="hidden" name="upload_fileid" value="[% upload_fileid %]">
+                  [% END %]
+
+                <p>[% loc('You have already attached a photo to this report, attaching another one will replace it.') %]</p>
+
+                  [% IF report.photo %]
+                    <img align="right" src="/photo/[% report.id %].jpeg">
+                  [% END %]
+              [% END %]
+
+              [% IF field_errors.photo %]
+                <p class='form-error'>[% field_errors.photo %]</p>
+              [% END %]
+            <input type="file" name="photo" id="form_photo">
+          [% END %]
+
+          [% IF c.user_exists %]
+            [% PROCESS "report/new/form_user_loggedin.html" %]
+          [% ELSE %]
+            [% PROCESS "report/new/form_user_loggedout.html" %]
+          [% END %]
         </div>
     </fieldset>
 
-    [% IF partial_token %]
-        <input type="hidden" name="partial" value="[% partial_token.token %]">
-    [% END %]
+  [% IF partial_token %]
+    <input type="hidden" name="partial" value="[% partial_token.token %]">
+  [% END %]
 
     <input type="hidden" name="submit_problem" value="1">
 </div>
diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss
index c33f927f8..c849b72c9 100644
--- a/web/cobrands/fixmystreet/base.scss
+++ b/web/cobrands/fixmystreet/base.scss
@@ -21,6 +21,15 @@
     #message_close { float: right; }
 }
 
+body.mappage {
+    .change_location {
+        color: #666;
+        padding-left: 24px;
+        background: transparent url(images/wrong-location.png) 4px 50% no-repeat;
+        margin-top: -0.5em;
+    }
+}
+
 .confirmation-header {
   padding: 2em 1em;
 
diff --git a/web/cobrands/fixmystreet/images/cross-7px-7px.png b/web/cobrands/fixmystreet/images/cross-7px-7px.png
new file mode 100644
index 000000000..6c5f41171
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/cross-7px-7px.png
diff --git a/web/cobrands/fixmystreet/images/tick-10px-8px.png b/web/cobrands/fixmystreet/images/tick-10px-8px.png
new file mode 100644
index 000000000..09b036f61
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/tick-10px-8px.png
diff --git a/web/cobrands/fixmystreet/images/wrong-location.png b/web/cobrands/fixmystreet/images/wrong-location.png
new file mode 100644
index 000000000..8f775f710
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/wrong-location.png
diff --git a/web/cobrands/fixmystreet/layout.scss b/web/cobrands/fixmystreet/layout.scss
index 3f707f619..196545670 100644
--- a/web/cobrands/fixmystreet/layout.scss
+++ b/web/cobrands/fixmystreet/layout.scss
@@ -302,3 +302,9 @@ body.alertindex {
     display: none;
   }
 }
+
+#report-a-problem-main {
+    input[type=text], input[type=password], input[type=email], textarea {
+        max-width: 27em;
+    }
+}
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 4e3dea444..477bb27c1 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -356,6 +356,17 @@ label{
     }
 }
 
+#report-a-problem-main {
+  fieldset {
+    margin: 0;
+  }
+
+  .form-box {
+    margin: 0 -1em 0.25em -1em;
+    padding: 1em;
+  }
+}
+
 .form-txt-submit-box {
   min-height:3em;
   input[type=password],
@@ -1304,6 +1315,57 @@ a:hover.rap-notes-trigger {
 }
 
 
+/* Reporting a problem bits */
+
+label .muted {
+  color: #888;
+  font-weight: normal;
+}
+
+.description_tips {
+  @include clearfix;
+
+  h4 {
+    margin: 0.5em 0;
+  }
+
+  ul {
+    width: 49%;
+    margin: 0;
+    float: left;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  li {
+    margin-bottom: 0;
+    padding-left: 20px;
+    list-style: none;
+    background: transparent url(images/tick-10px-8px.png) 4px 5px no-repeat;
+  }
+
+  .do {
+    color: #1c8012;
+  }
+
+  .dont {
+    float: right;
+    color: #881111;
+
+    li {
+      background-image: url(images/cross-7px-7px.png);
+      background-position: 6px 6px;
+    }
+  }
+}
+
+#problem_form {
+  label:first-child {
+    margin-top: 0;
+  }
+}
+
+
 table.nicetable {
   width:100%;
   margin-bottom:2em;