diff options
| -rw-r--r-- | t/app/controller/questionnaire.t | 2 | ||||
| -rw-r--r-- | templates/web/base/questionnaire/index.html | 76 | ||||
| -rw-r--r-- | templates/web/base/report/photo-js.html (renamed from templates/web/fixmystreet/report/photo-js.html) | 0 | ||||
| -rw-r--r-- | templates/web/fixmystreet/questionnaire/index.html | 110 | ||||
| -rw-r--r-- | web/cobrands/sass/_base.scss | 95 | ||||
| -rw-r--r-- | web/js/fixmystreet.js | 14 |
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">“[% add_links( updates.last.text ) %]”</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’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’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’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 |