Merge branch 'issues/#1104-questionnaire-form-design'

6 files changed, 144 insertions, 153 deletions

diff --git a/t/app/controller/questionnaire.t b/t/app/controller/questionnaire.t
index ecac54372..14d834078 100644
--- a/t/app/controller/questionnaire.t
+++ b/t/app/controller/questionnaire.t
@@ -315,7 +315,7 @@ my $comment = FixMyStreet::App->model('DB::Comment')->find_or_create(
 );
 subtest 'Check updates are shown correctly on questionnaire page' => sub {
     $mech->get_ok("/Q/" . $token->token);
-    $mech->content_contains( 'updates that have been left' );
+    $mech->content_contains( 'Show all updates' );
     $mech->content_contains( 'This is some update text' );
 };
 
diff --git a/templates/web/base/questionnaire/index.html b/templates/web/base/questionnaire/index.html
index 2daaaab3a..ab3bde9ad 100644
--- a/templates/web/base/questionnaire/index.html
+++ b/templates/web/base/questionnaire/index.html
@@ -1,18 +1,32 @@
 [%
-    pre_map = INCLUDE 'report/_main.html';
+    SET bodyclass = 'mappage';
+    PROCESS "report/photo-js.html";
     PROCESS "maps/${map.type}.html";
-    INCLUDE 'header.html', title = loc('Questionnaire')
+    INCLUDE 'header.html', title = loc('Questionnaire');
 %]
 
 [% map_html %]
 
-[% INCLUDE 'report/updates.html' %]
-
 </div>
-<div id="side">
 
 <h1>[% loc('Questionnaire') %]</h1>
 
+<h2 class="questionnaire-report-header">Your report</h2>
+<div class="questionnaire-report-reminder">
+    [% INCLUDE 'report/photo.html' object=problem %]
+    <h3 class="questionnaire-report-reminder__report-title">
+        <a href="/report/[% problem.id %]">[% problem.title | html %]</a>
+    </h3>
+    <p class="questionnaire-report-reminder__report-meta">[% problem.meta_line(c) | html %]</p>
+  [% IF updates.size %]
+    <p class="questionnaire-report-reminder__last-update-header">
+        <strong>Last update</strong>
+        <a href="/report/[% problem.id %]">Show all updates</a>
+    </p>
+    <p class="questionnaire-report-reminder__last-update">&ldquo;[% add_links( updates.last.text ) %]&rdquo;</p>
+  [% END %]
+</div>
+
 <form method="post" action="/questionnaire/submit" id="questionnaire"
 [%- IF c.cobrand.allow_photo_upload -%]
  enctype="multipart/form-data"
@@ -21,13 +35,8 @@
 
 <input type="hidden" name="token" value="[% token | html %]">
 
-<p>
-[% loc('The details of your problem are available on the right hand side of this page.') %]
-[% loc('Please take a look at the updates that have been left.') IF updates %]
-</p>
-
 [% IF errors %]
-<ul class="error">
+<ul class="error questionnaire-errors">
 <li>[% errors.join("</li>\n<li>") %]</li>
 </ul>
 [% END %]
@@ -37,50 +46,50 @@
 [% loc('Has this problem been fixed?') %]
 </p>
 
-<p>
-<input type="radio" name="been_fixed" id="been_fixed_yes" value="Yes"[% ' checked' IF been_fixed == 'Yes' %]>
-<label for="been_fixed_yes">[% loc('Yes') %]</label>
-<input type="radio" name="been_fixed" id="been_fixed_no" value="No"[% ' checked' IF been_fixed == 'No' %]>
-<label for="been_fixed_no">[% loc('No') %]</label>
-<input type="radio" name="been_fixed" id="been_fixed_unknown" value="Unknown"[% ' checked' IF been_fixed == 'Unknown' %]>
-<label for="been_fixed_unknown">[% loc('Don&rsquo;t know') %]</label>
+<p class="radio-segmented-control">
+    <input type="radio" name="been_fixed" id="been_fixed_yes" value="Yes"[% ' checked' IF been_fixed == 'Yes' %]>
+    <label class="inline" for="been_fixed_yes">[% loc('Yes') %]</label>
+    <input type="radio" name="been_fixed" id="been_fixed_no" value="No"[% ' checked' IF been_fixed == 'No' %]>
+    <label class="inline" for="been_fixed_no">[% loc('No') %]</label>
+    <input type="radio" name="been_fixed" id="been_fixed_unknown" value="Unknown"[% ' checked' IF been_fixed == 'Unknown' %]>
+    <label class="inline" for="been_fixed_unknown">[% loc('Don&rsquo;t know') %]</label>
 </p>
 
 [% UNLESS answered_ever_reported %]
 <p>[% loc('Have you ever reported a problem to a council before, or is this your first time?') %]</p>
-<p>
-<input type="radio" name="reported" id="reported_yes" value="Yes"[% ' checked' IF reported == 'Yes' %]>
-<label for="reported_yes">[% loc('Reported before') %]</label>
-<input type="radio" name="reported" id="reported_no" value="No"[% ' checked' IF reported == 'No' %]>
-<label for="reported_no">[% loc('First time') %]</label>
+<p class="radio-segmented-control">
+    <input type="radio" name="reported" id="reported_yes" value="Yes"[% ' checked' IF reported == 'Yes' %]>
+    <label class="inline" for="reported_yes">[% loc('Reported before') %]</label>
+    <input type="radio" name="reported" id="reported_no" value="No"[% ' checked' IF reported == 'No' %]>
+    <label class="inline" for="reported_no">[% loc('First time') %]</label>
 </p>
 [% END %]
 
 <p>[% loc('If you wish to leave a public update on the problem, please enter it here
-(please note it will not be sent to the council). For example, what was
-your experience of getting the problem fixed?') %]</p>
+(please note it will not be sent to the council).') %]</p>
 
-<p><textarea name="update" style="max-width:90%" rows="7" cols="30">[% update | html %]</textarea></p>
+<p><textarea name="update" rows="7" cols="30" placeholder="[% loc('What was your experience of getting the problem fixed?') %]">[% update | html %]</textarea></p>
 
 [% IF c.cobrand.allow_photo_upload %]
-<div id="fileupload_normalUI">
+<p id="fileupload_normalUI">
     [% IF upload_fileid %]
+        <img align="right" src="/photo/[% upload_fileid %].temp.jpeg" alt="">
         <p>[% loc('You have already attached a photo to this report, attaching another one will replace it.') %]</p>
         <input type="hidden" name="upload_fileid" value="[% upload_fileid %]">
     [% END %]
     <label for="form_photo">[% loc('Photo:') %]</label>
     <input type="file" name="photo" id="form_photo">
-</div>
+</p>
 [% END %]
 
 [% IF c.cobrand.moniker != 'emptyhomes' %]
-<div id="another_qn">
+<div class="js-another-questionnaire">
     <p>[% loc('Would you like to receive another questionnaire in 4 weeks, reminding you to check the status?') %]</p>
-    <p>
+    <p class="radio-segmented-control">
         <input type="radio" name="another" id="another_yes" value="Yes"[% ' checked' IF another == 'Yes' %]>
-        <label for="another_yes">[% loc('Yes') %]</label>
+        <label class="inline" for="another_yes">[% loc('Yes') %]</label>
         <input type="radio" name="another" id="another_no" value="No"[% ' checked' IF another == 'No' %]>
-        <label for="another_no">[% loc('No') %]</label>
+        <label class="inline" for="another_no">[% loc('No') %]</label>
     </p>
 </div>
 [% END %]
@@ -89,7 +98,4 @@ your experience of getting the problem fixed?') %]</p>
 
 </form>
 
-</div>
-
 [% INCLUDE 'footer.html' %]
-
diff --git a/templates/web/fixmystreet/report/photo-js.html b/templates/web/base/report/photo-js.html
index 9075ce005..9075ce005 100644
--- a/templates/web/fixmystreet/report/photo-js.html
+++ b/templates/web/base/report/photo-js.html
diff --git a/templates/web/fixmystreet/questionnaire/index.html b/templates/web/fixmystreet/questionnaire/index.html
deleted file mode 100644
index 69381dc03..000000000
--- a/templates/web/fixmystreet/questionnaire/index.html
+++ /dev/null
@@ -1,110 +0,0 @@
-[%
-    SET bodyclass = 'mappage';
-    PROCESS "report/photo-js.html";
-    PROCESS "maps/${map.type}.html";
-    INCLUDE 'header.html', title = loc('Questionnaire');
-%]
-
-[% map_html %]
-
-</div>
-<div id="side">
-
-        <menu id="problems-nav" class="tab-nav">
-            <ul>
-                <li><a id="questionnaire_tab" href="#questionnaire">[% loc('Questionnaire') %]</a></li>
-                <li><a id="report_tab" href="#report">[% loc( 'Your report' ) %]</a></li>
-            </ul>
-        </menu>
-
-        <div id="questionnaire" class="issue-list-a tab">
-            [% INCLUDE questionnaire_form %]
-        </div>
-
-        <div id="report" class="issue-list-a tab">
-            [% INCLUDE 'report/_main.html' %]
-            [% INCLUDE 'report/updates.html' %]
-        </div>
-</div>
-
-[% INCLUDE 'footer.html' %]
-
-[% BLOCK questionnaire_form %]
-<h1>[% loc('Questionnaire') %]</h1>
-
-<form method="post" action="/questionnaire/submit" id="questionnaire"
-[%- IF c.cobrand.allow_photo_upload -%]
- enctype="multipart/form-data"
-[%- END -%]
->
-
-<input type="hidden" name="token" value="[% token | html %]">
-
-<p>
-[% loc('The details of your problem are available from the other tab above.') %]
-[% loc('Please <a class="tab_link" href="#report">take a look</a> at the updates that have been left.') IF updates %]
-</p>
-
-[% IF errors %]
-<ul class="error">
-<li>[% errors.join("</li>\n<li>") %]</li>
-</ul>
-[% END %]
-
-<p>
-[% loc('An update marked this problem as fixed.') IF problem.is_fixed %]
-[% loc('Has this problem been fixed?') %]
-</p>
-
-<p>
-<input type="radio" name="been_fixed" id="been_fixed_yes" value="Yes"[% ' checked' IF been_fixed == 'Yes' %]>
-<label class="inline" for="been_fixed_yes">[% loc('Yes') %]</label>
-<input type="radio" name="been_fixed" id="been_fixed_no" value="No"[% ' checked' IF been_fixed == 'No' %]>
-<label class="inline" for="been_fixed_no">[% loc('No') %]</label>
-<input type="radio" name="been_fixed" id="been_fixed_unknown" value="Unknown"[% ' checked' IF been_fixed == 'Unknown' %]>
-<label class="inline" for="been_fixed_unknown">[% loc('Don&rsquo;t know') %]</label>
-</p>
-
-[% UNLESS answered_ever_reported %]
-<p>[% loc('Have you ever reported a problem to a council before, or is this your first time?') %]</p>
-<p>
-<input type="radio" name="reported" id="reported_yes" value="Yes"[% ' checked' IF reported == 'Yes' %]>
-<label class="inline" for="reported_yes">[% loc('Reported before') %]</label>
-<input type="radio" name="reported" id="reported_no" value="No"[% ' checked' IF reported == 'No' %]>
-<label class="inline" for="reported_no">[% loc('First time') %]</label>
-</p>
-[% END %]
-
-<p>[% loc('If you wish to leave a public update on the problem, please enter it here
-(please note it will not be sent to the council). For example, what was
-your experience of getting the problem fixed?') %]</p>
-
-<p><textarea name="update" style="max-width:90%" rows="7" cols="30">[% update | html %]</textarea></p>
-
-[% IF c.cobrand.allow_photo_upload %]
-<div id="fileupload_normalUI">
-    [% IF upload_fileid %]
-        <img align="right" src="/photo/[% upload_fileid %].temp.jpeg" alt="">
-        <p>[% loc('You have already attached a photo to this report, attaching another one will replace it.') %]</p>
-        <input type="hidden" name="upload_fileid" value="[% upload_fileid %]">
-    [% END %]
-    <label for="form_photo">[% loc('Photo:') %]</label>
-    <input type="file" name="photo" id="form_photo">
-</div>
-[% END %]
-
-<div id="another_qn">
-    <p>[% loc('Would you like to receive another questionnaire in 4 weeks, reminding you to check the status?') %]</p>
-    <p>
-        <input type="radio" name="another" id="another_yes" value="Yes"[% ' checked' IF another == 'Yes' %]>
-        <label class="inline" for="another_yes">[% loc('Yes') %]</label>
-        <input type="radio" name="another" id="another_no" value="No"[% ' checked' IF another == 'No' %]>
-        <label class="inline" for="another_no">[% loc('No') %]</label>
-    </p>
-</div>
-
-<p><input type="submit" name="submit" value="[% loc('Submit questionnaire') %]"></p>
-
-</form>
-[% END %]
-
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index a660bf928..9c63c77a8 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1641,5 +1641,100 @@ table.nicetable {
   }
 }
 
+/* Questionnaire page */
+
+.questionnaire-report-header {
+  font-family: inherit;
+  font-size: 1.2em;
+  font-weight: 600;
+}
+
+.questionnaire-report-reminder {
+  @include clearfix(); // clear the floated image, in case there is no update-header to do it
+  background: #f3f3f3;
+  border-radius: 3px;
+  padding: 1em 1em 1px 1em; // basically no padding-bottom, as children have their own margin-bottom instead
+  margin-bottom: 2em;
+
+  .update-img {
+    width: 120px;
+    float: left;
+    margin: 0.1em 1em 1em 0;
+  }
+}
+
+.questionnaire-report-reminder__report-title {
+  margin: 0 0 0.3em 0;
+}
+
+.questionnaire-report-reminder__report-meta {
+  color: #666;
+  line-height: 1.4em;
+}
+
+.questionnaire-report-reminder__last-update-header {
+  border-top: 1px solid #ddd;
+  margin: 0;
+  padding: 0.8em 0 0.5em 0;
+  clear: left; // clear the floated image above
+
+  a {
+    float: right;
+  }
+}
+
+.questionnaire-errors {
+  margin-left: 0;
+}
+
+.radio-segmented-control {
+  overflow: auto; // clear floats (if browser doesn't support flexbox)
+  display: flex; // fancy full-width buttons for browsers that support flexbox
+
+  input {
+    display: none;
+  }
+
+  label {
+    display: block;
+    margin: 0;
+    padding: 0.75em 1.5em;
+    text-align: center;
+    background: #fff linear-gradient(to bottom, #fff 0%, #eee 100%) 0 0 no-repeat;
+    border: 1px solid #ddd;
+    border-right-width: 0; // avoid double border between items
+    font-weight: bold;
+    float: left; // float fallback for browsers that don't support flexbox
+    flex: 1 0 auto;
+
+    &:hover, &:focus {
+      background: #f3f3f3 linear-gradient(to bottom, #f9f9f9 0%, #e9e9e9 100%) 0 0 no-repeat;
+    }
+  }
+
+  input:checked + label {
+    color: $primary_text;
+    background: $primary;
+    border-color: darken($primary, 5%);
+    background-image: none; // remove gradient
+    box-shadow: inset 0 0.1em 0.2em rgba(0,0,0,0.2);
+    border-right-width: 1px; // add a realistic coloured border to all sides
+  }
+
+  input:checked + label + input + label {
+    border-left-width: none; // in favour of the realistic coloured border on the selected item
+  }
+
+  input:first-child + label {
+    border-radius: 0.25em 0 0 0.25em;
+  }
+
+  label:last-child {
+    border-radius: 0 0.25em 0.25em 0;
+    border-right-width: 1px; // reinstate border on last item
+  }
+}
+
+
 @import "_admin";
 @import "_fixedthead";
diff --git a/web/js/fixmystreet.js b/web/js/fixmystreet.js
index 7d8c940d9..51fa01559 100644
--- a/web/js/fixmystreet.js
+++ b/web/js/fixmystreet.js
@@ -31,16 +31,16 @@ $(function(){
 
     // Questionnaire hide/showings
     if (!$('#been_fixed_no').prop('checked') && !$('#been_fixed_unknown').prop('checked')) {
-        $('#another_qn').hide();
+        $('.js-another-questionnaire').hide();
     }
-    $('#been_fixed_no').click(function() {
-        $('#another_qn').show('fast');
+    $('#been_fixed_no').on('click', function() {
+        $('.js-another-questionnaire').show('fast');
     });
-    $('#been_fixed_unknown').click(function() {
-        $('#another_qn').show('fast');
+    $('#been_fixed_unknown').on('click', function() {
+        $('.js-another-questionnaire').show('fast');
     });
-    $('#been_fixed_yes').click(function() {
-        $('#another_qn').hide('fast');
+    $('#been_fixed_yes').on('click', function() {
+        $('.js-another-questionnaire').hide('fast');
     });
 
     // Form validation