From 6f997f16abba3b649d939f35abd7607076424fa9 Mon Sep 17 00:00:00 2001 From: Zarino Zappia Date: Thu, 15 Jan 2015 18:10:03 +0000 Subject: Simplifed "confirmation-header" for success pages. --- t/app/controller/alert_new.t | 8 ++-- t/app/controller/contact.t | 4 +- t/app/controller/questionnaire.t | 8 ++-- t/app/controller/report_updates.t | 6 +-- templates/web/base/auth/sign_out.html | 7 ++- templates/web/base/contact/submit.html | 16 +++---- .../web/base/questionnaire/completed-open.html | 12 +---- templates/web/base/questionnaire/completed.html | 25 +++++----- templates/web/base/tokens/confirm_alert.html | 19 ++++---- templates/web/base/tokens/confirm_problem.html | 37 +++++--------- templates/web/base/tokens/confirm_update.html | 23 ++++----- .../questionnaire/completed-open.html | 16 +++---- web/cobrands/fixmystreet/base.scss | 23 --------- .../images/sad-face-in-circle-100px.png | Bin 0 -> 1875 bytes .../fixmystreet/images/tick-in-circle-100px.png | Bin 0 -> 1310 bytes web/cobrands/sass/_base.scss | 53 +++++++++++++++++++-- web/cobrands/sass/_layout.scss | 8 ++++ 17 files changed, 130 insertions(+), 135 deletions(-) create mode 100644 web/cobrands/fixmystreet/images/sad-face-in-circle-100px.png create mode 100644 web/cobrands/fixmystreet/images/tick-in-circle-100px.png diff --git a/t/app/controller/alert_new.t b/t/app/controller/alert_new.t index 115bb181a..10c4c8ab9 100644 --- a/t/app/controller/alert_new.t +++ b/t/app/controller/alert_new.t @@ -132,7 +132,7 @@ foreach my $test ( ok $token->data->{id} == $existing_id, 'subscribed to existing alert'; $mech->get_ok("/A/$url_token"); - $mech->content_contains('successfully confirmed'); + $mech->content_contains('alert created'); $alert = FixMyStreet::App->model('DB::Alert')->find( { id => $existing_id, } ); @@ -370,9 +370,9 @@ subtest "Test normal alert signups and that alerts are sent" => sub { my ( $url, $url_token ) = $email->body =~ m{http://\S+(/A/(\S+))}; my $token = FixMyStreet::App->model('DB::Token')->find( { token => $url_token, scope => 'alert' } ); $mech->get_ok( $url ); - $mech->content_contains('successfully confirmed'); + $mech->content_contains('alert created'); } else { - $mech->content_contains('successfully created'); + $mech->content_contains('alert created'); } } @@ -473,7 +473,7 @@ subtest "Test normal alert signups and that alerts are sent" => sub { ($url) = $emails[0]->body =~ m{http://\S+(/A/\S+)}; $mech->get_ok( $url ); - $mech->content_contains('successfully deleted'); + $mech->content_contains('alert deleted'); $mech->delete_user($user1); $mech->delete_user($user2); diff --git a/t/app/controller/contact.t b/t/app/controller/contact.t index 89a1db5b2..cf8a3161b 100644 --- a/t/app/controller/contact.t +++ b/t/app/controller/contact.t @@ -259,7 +259,7 @@ for my $test ( $mech->get_ok('/contact'); } $mech->submit_form_ok( { with_fields => $test->{fields} } ); - $mech->content_contains('Thanks for your feedback'); + $mech->content_contains('Thank you for your feedback'); $mech->email_count_is(1); my $email = $mech->get_email; @@ -385,7 +385,7 @@ for my $test ( $mech->clear_emails_ok; $mech->get_ok('/contact'); $mech->submit_form_ok( { with_fields => $test->{fields} } ); - $mech->content_contains('Thanks for your feedback'); + $mech->content_contains('Thank you for your feedback'); $mech->email_count_is(1); } }; diff --git a/t/app/controller/questionnaire.t b/t/app/controller/questionnaire.t index 752dbb4cb..5938acc79 100644 --- a/t/app/controller/questionnaire.t +++ b/t/app/controller/questionnaire.t @@ -252,13 +252,13 @@ foreach my $test ( # Check the right HTML page has been returned $mech->content_like( qr/[^<]*Questionnaire/m ); - $mech->content_contains( 'glad to hear it’s been fixed' ) + $mech->content_contains( 'Glad to hear' ) if $result =~ /fixed/; - $mech->content_lacks( 'glad to hear it’s been fixed' ) + $mech->content_lacks( 'Glad to hear' ) if $result !~ /fixed/; $mech->content_contains( 'get some more information about the status of your problem' ) if $result eq 'unknown'; - $mech->content_contains( "sorry to hear that" ) + $mech->content_contains( "sorry to hear" ) if $result eq 'confirmed' || $result eq 'closed'; # Check the database has the right information @@ -319,7 +319,7 @@ subtest 'Check updates are shown correctly on questionnaire page' => sub { $mech->content_contains( 'This is some update text' ); }; -for my $test ( +for my $test ( { state => 'confirmed', fixed => 0 diff --git a/t/app/controller/report_updates.t b/t/app/controller/report_updates.t index 64ed91ac0..832e6cb82 100644 --- a/t/app/controller/report_updates.t +++ b/t/app/controller/report_updates.t @@ -1393,7 +1393,7 @@ foreach my $test ( $mech->submit_form_ok( { with_fields => { reported => 'Yes' } } ); - $mech->content_contains( 'Thank you — you can' ); + $mech->content_contains( 'Thank you for updating this issue' ); $questionnaire = FixMyStreet::App->model( 'DB::Questionnaire' )->find( { problem_id => $report_id } @@ -1452,7 +1452,7 @@ for my $test ( anonymous => 0, answered => 1, path => '/report/update', - content => "You have successfully confirmed your update", + content => "Thank you for updating this issue", }, ) { @@ -1542,7 +1542,7 @@ for my $test ( $mech->submit_form_ok( { with_fields => { reported => 'Yes' } } ); - $mech->content_contains( 'Thank you — you can' ); + $mech->content_contains( 'Thank you for updating this issue' ); $questionnaire = FixMyStreet::App->model( 'DB::Questionnaire' )->find( { problem_id => $report_id } diff --git a/templates/web/base/auth/sign_out.html b/templates/web/base/auth/sign_out.html index 571e13f9f..c95efacf5 100644 --- a/templates/web/base/auth/sign_out.html +++ b/templates/web/base/auth/sign_out.html @@ -1,7 +1,10 @@ [% INCLUDE 'header.html', title = loc('Sign out'), bodyclass = 'fullwidthpage' %] -<h1>[% loc('You have been signed out') %]</h1> +<div class="confirmation-header"> + <h1>[% loc('You have been signed out') %]</h1> + <p>[% tprintf( loc('Please feel free to <a href="%s">sign in again</a>, or go back to the <a href="/">front page</a>.'), c.uri_for('/auth') ) %]</p> +</div> -<p>[% tprintf( loc('Please feel free to <a href="%s">sign in again</a>, or go back to the <a href="/">front page</a>.'), c.uri_for('/auth') ) %]</p> +[% INCLUDE next_steps.html %] [% INCLUDE 'footer.html' %] diff --git a/templates/web/base/contact/submit.html b/templates/web/base/contact/submit.html index ce57f648f..5adb87e2d 100644 --- a/templates/web/base/contact/submit.html +++ b/templates/web/base/contact/submit.html @@ -1,18 +1,18 @@ [% INCLUDE 'header.html', bodyclass = 'fullwidthpage', title = loc('Contact Us') %] -<h1>[% loc('Contact the team') %]</h1> - [% IF success %] - <p> - [% loc("Thanks for your feedback. We'll get back to you as soon as we can!") %] - </p> + <div class="confirmation-header"> + <h1>[% loc('Thank you for your feedback') %]</h1> + <p>[% loc('We’ll get back to you as soon as we can.') %]</p> + </div> [% ELSE %] - <p> - [% tprintf( loc('Failed to send message. Please try again, or <a href="mailto:%s">email us</a>.'), contact_email ) %] - </p> + <div class="confirmation-header confirmation-header--failure"> + <h1>[% loc('Failed to send message') %]</h1> + <p>[% loc('Try emailing us directly:') %] <a href="mailto:[% contact_email %]">[% contact_email %]</a></p> + </div> [% END %] diff --git a/templates/web/base/questionnaire/completed-open.html b/templates/web/base/questionnaire/completed-open.html index c860b7341..0be40ac86 100644 --- a/templates/web/base/questionnaire/completed-open.html +++ b/templates/web/base/questionnaire/completed-open.html @@ -1,11 +1,3 @@ -[% IF c.cobrand.is_council %] -<p style="font-size: 150%"> -Thank you very much for filling in our questionnaire. -</p> -[% ELSE %] -[% loc('<p style="font-size:150%">We’re sorry to hear that. We have two -suggestions: why not try writing to your local representatives or, if -it’s a problem that could be fixed by local people working together, why -not <a href="http://www.pledgebank.com/new">make and publicise a pledge</a>? -</p>') %] +[% IF ! c.cobrand.is_council %] + <p>[% loc('We’re sorry to hear the problem’s not fixed. Why not try writing to your local representatives?') %]</p> [% END %] diff --git a/templates/web/base/questionnaire/completed.html b/templates/web/base/questionnaire/completed.html index 1373a084f..32aa8bd68 100644 --- a/templates/web/base/questionnaire/completed.html +++ b/templates/web/base/questionnaire/completed.html @@ -1,24 +1,21 @@ [% INCLUDE 'header.html', bodyclass = 'fullwidthpage', title = loc('Questionnaire') %] -[% advert_outcome = 1 %] +<div class="confirmation-header"> -[% IF been_fixed == 'Unknown' %] - [% loc('<p>Thank you very much for filling in our questionnaire; if you - get some more information about the status of your problem, please come back to the - site and leave an update.</p>') %] + <h1>[% loc('Thank you for your feedback') %]</h1> -[% ELSIF new_state == 'confirmed' OR (!new_state AND problem.is_open) OR (!new_state AND problem.is_closed) %] - [% INCLUDE 'questionnaire/completed-open.html' %] - [% advert_outcome = 0 %] + [% IF been_fixed == 'Unknown' %] + <p>[% loc('If you get some more information about the status of your problem, please come back to the site and leave an update.') %]</p> -[% ELSIF been_fixed == 'Yes' %] - [% loc('<p style="font-size:150%">Thank you very much for filling in our questionnaire; glad to hear it’s been fixed.</p>') %] + [% ELSIF new_state == 'confirmed' OR (!new_state AND problem.is_open) OR (!new_state AND problem.is_closed) %] + [% INCLUDE 'questionnaire/completed-open.html' %] -[% END %] + [% ELSIF been_fixed == 'Yes' %] + <p>[% loc('Glad to hear it’s been fixed!') %]</p> -[% IF advert_outcome %] - [% INCLUDE next_steps.html %] + [% END %] -[% END %] +</div> +[% INCLUDE next_steps.html %] [% INCLUDE 'footer.html' %] diff --git a/templates/web/base/tokens/confirm_alert.html b/templates/web/base/tokens/confirm_alert.html index d7fbe4d7c..f0ad12ff8 100644 --- a/templates/web/base/tokens/confirm_alert.html +++ b/templates/web/base/tokens/confirm_alert.html @@ -1,17 +1,16 @@ [% INCLUDE 'header.html', bodyclass = 'fullwidthpage', title => loc('Local RSS feeds and email alerts') %] <div class="confirmation-header"> - <h1>[% loc('Local RSS feeds and email alerts') %]</h1> -<p> -[% IF confirm_type == 'subscribe' %] - [% loc('You have successfully confirmed your alert.') %] -[% ELSIF confirm_type == 'unsubscribe' %] - [% loc('You have successfully deleted your alert.') %] -[% ELSIF confirm_type == 'created' %] - [% loc('You have successfully created your alert.') %] -[% END %] -</p> + [% IF confirm_type == 'subscribe' || confirm_type == 'created' %] + <h1>[% loc('Email alert created') %]</h1> + <p>[% loc('Why stop there? <a href="/alert">Set up more alerts</a> for free.') %]</p> + + [% ELSIF confirm_type == 'unsubscribe' %] + <h1>[% loc('Email alert deleted') %]</h1> + <p>[% loc('Inbox zero, here we come!') %]</p> + + [% END %] </div> diff --git a/templates/web/base/tokens/confirm_problem.html b/templates/web/base/tokens/confirm_problem.html index 3346ce287..524339cf6 100644 --- a/templates/web/base/tokens/confirm_problem.html +++ b/templates/web/base/tokens/confirm_problem.html @@ -1,35 +1,20 @@ [% INCLUDE 'header.html', bodyclass = 'fullwidthpage', title = loc('Confirmation') %] <div class="confirmation-header"> - <h1>[% loc('Your problem has been confirmed!') %]</h1> -[% IF c.cobrand.is_council %] + <h1><a href="[% c.cobrand.base_url_for_report( problem ) %][% problem.url %]">[% problem.title %]</a></h1> - <p> - Thank you. You have successfully confirmed your report - and this will now be investigated by the council. - You can <a href="[% c.cobrand.base_url_for_report( problem ) %][% problem.url %]">view the problem on this site</a>. - </p> - <p>Your reference for this problem is [% problem.id %], please quote it in any enquiries.</p> + [% IF c.cobrand.is_council %] + <h2>Your issue is on its way to the council.</h2> + <p>Your reference for this problem is [% problem.id %], please quote it in any enquiries.</p> -[% ELSE %] + [% ELSE %] + <h2>[% loc('Thank you for reporting this issue!') %]</h2> + [% IF problem.bodies_str %] + <p>[% loc('It’s on its way to the council right now.') %]</p> + [% END %] - <p> - [% loc('Thank you for reporting this issue') %]. - [% IF problem.bodies_str; - loc('<strong>We will now send it to the council</strong>.'); - END; %] - </p> - - <p> - [% tprintf( - loc( 'You can <a href="%s%s">view the problem on this site</a>.' ), - c.cobrand.base_url_for_report( problem ), - problem.url - ); %] - </p> - -[% END %] + [% END %] [% TRY %][% INCLUDE 'tokens/_extras_confirm.html' %][% CATCH file %][% END %] @@ -39,7 +24,7 @@ next_steps.html, just_interacted = 1, share_url = c.cobrand.base_url_for_report(problem) _ problem.url, - twitter_comment = 'I just reported a problem on @fixmystreet' + twitter_comment = loc('I just reported a problem on @fixmystreet') %] [% INCLUDE 'footer.html' %] diff --git a/templates/web/base/tokens/confirm_update.html b/templates/web/base/tokens/confirm_update.html index a89da8555..a230894ef 100644 --- a/templates/web/base/tokens/confirm_update.html +++ b/templates/web/base/tokens/confirm_update.html @@ -1,21 +1,16 @@ [% INCLUDE 'header.html', bodyclass = 'fullwidthpage', title => loc('Confirmation') %] -<div class="confirmation-header"> - <h1>[% loc('Your update has been confirmed!') %]</h1> - -<p class="confirmed"> [% IF creator_fixed %] -[% - tprintf(loc('Thank you — you can <a href="%s">view your updated problem</a> on the site.'), - c.uri_for( '/report', problem_id ) ); -%] + [% problem_url = c.uri_for('/report', problem_id) %] [% ELSE %] -[% - tprintf( loc('You have successfully confirmed your update and you can now <a href="%s">view it on the site</a>.'), - c.uri_for( '/report', update.problem.id ) _ '#update_' _ update.id ); -%] + [% problem_url = c.uri_for( '/report', update.problem.id ) _ '#update_' _ update.id %] [% END %] -</p> + +<div class="confirmation-header"> + + <h1><a href="[% problem_url %]">[% update.problem.title %]</a></h1> + + <h2>[% loc('Thank you for updating this issue!') %]</h2> </div> @@ -23,7 +18,7 @@ next_steps.html, just_interacted = 1, share_url = c.cobrand.base_url_for_report(update.problem) _ update.problem.url, - twitter_comment = 'I just updated a problem on @fixmystreet' + twitter_comment = loc('I just updated a problem on @fixmystreet') %] [% INCLUDE 'footer.html' %] diff --git a/templates/web/fixmystreet.com/questionnaire/completed-open.html b/templates/web/fixmystreet.com/questionnaire/completed-open.html index df8e2d271..073fb0438 100644 --- a/templates/web/fixmystreet.com/questionnaire/completed-open.html +++ b/templates/web/fixmystreet.com/questionnaire/completed-open.html @@ -1,23 +1,19 @@ -[% IF c.cobrand.is_council %] - <p style="font-size: 150%"> - Thank you very much for filling in our questionnaire. - </p> -[% ELSE %] - <p style="font-size:150%">We’re sorry to hear that your problem hasn't been fixed.</p> +[% IF ! c.cobrand.is_council %] + <h2>We’re sorry to hear that your problem hasn’t been fixed.</h2> <p> - FixMyStreet helps you send a report to your council, but we're not responsible for fixing things. - If you'd like to chase your issue, please search your inbox for the latest reply, or auto-reply + FixMyStreet helps you send a report to your council, but we’re not responsible for fixing things. + If you’d like to chase your issue, please search your inbox for the latest reply, or auto-reply from your council, and respond to that. </p> <p> - Meanwhile, if you're getting nowhere, you might consider writing to your local councillor or other + Meanwhile, if you’re getting nowhere, you might consider writing to your local councillor or other representative to see if they can help. </p> <p> - You can do this on <a href="https://www.writetothem.com/">https://www.writetothem.com/</a>, another + You can do this on <a href="https://www.writetothem.com/">WriteToThem</a>, another useful mySociety website. </p> [% END %] diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss index 01be687a1..ff4f4df91 100644 --- a/web/cobrands/fixmystreet/base.scss +++ b/web/cobrands/fixmystreet/base.scss @@ -32,29 +32,6 @@ background: url($image-sprite) -3px -3px no-repeat; } -.confirmation-header { - padding: 2em 1em; - - @media only screen and (min-width: 48em) { - padding: 3em 0; - text-align: center; - } - - h1 { - margin-top: 0; - } - - p { - font-size: 1.3em; - line-height: 1.4em; - margin-bottom: 0; - } - - p + p { - margin-top: 0.5em; - } -} - .next-steps { margin: 0 -1em; // counteract padding on parent background-color: #faf7e2; diff --git a/web/cobrands/fixmystreet/images/sad-face-in-circle-100px.png b/web/cobrands/fixmystreet/images/sad-face-in-circle-100px.png new file mode 100644 index 000000000..093c3ea06 Binary files /dev/null and b/web/cobrands/fixmystreet/images/sad-face-in-circle-100px.png differ diff --git a/web/cobrands/fixmystreet/images/tick-in-circle-100px.png b/web/cobrands/fixmystreet/images/tick-in-circle-100px.png new file mode 100644 index 000000000..54647a012 Binary files /dev/null and b/web/cobrands/fixmystreet/images/tick-in-circle-100px.png differ diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index 5bc1105cf..8e2a65d1b 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -64,13 +64,13 @@ h3 { h4 { font-size: 1em; font-weight: normal; - margin-bottom: 1em; + margin-bottom: 1em; } // default list styles ul, ol { font-size: 1em; - margin-bottom: 2em; + margin-bottom: 2em; margin-left: 2em; padding:0; } @@ -171,7 +171,7 @@ a:visited { &:hover, &:active { text-decoration:underline; - color:#0D7CCE; + color:#0D7CCE; } } @@ -711,7 +711,7 @@ a.button-left { font-size: 1em; line-height: 1; margin:0; - border:1px solid #999; + border:1px solid #999; color:#333; background: #eee; @include border-radius(4px); @@ -719,7 +719,7 @@ a.button-left { color:#fff; background:#777; text-decoration: none; - border:1px solid #666; + border:1px solid #666; } } .button-right, @@ -1577,4 +1577,47 @@ table.nicetable { } } +.confirmation-header { + padding: 140px 0 2em; + text-align: center; + + background: transparent url(/cobrands/fixmystreet/images/tick-in-circle-100px.png) center 1em no-repeat; + &.confirmation-header--failure { + background-image: url(/cobrands/fixmystreet/images/sad-face-in-circle-100px.png); + } + + h1, h2 { + margin: 0; + line-height: 1.2em; + } + + h1 { + a { + text-decoration: underline; + color: inherit; + + &:hover, + &:focus { + text-decoration: none; + color: #0BA7D1; // default link colour + } + } + } + + h1 + h2, + h1 ~ p { + margin-top: 12px; + } + + p { + color: #666666; + font-size: 1.2em; + margin-bottom: 0.5em; + } + + & > :last-child { + margin-bottom: 0; + } +} + @import "_admin"; diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss index d1cfb6be7..162bf30e1 100644 --- a/web/cobrands/sass/_layout.scss +++ b/web/cobrands/sass/_layout.scss @@ -1080,6 +1080,14 @@ body.frontpage { } } +.confirmation-header { + width: 25em; + margin: 0 auto 1em; + text-align: left; + padding: 3em 0 3em 132px; // for tick icon + background-position: 0 2em; +} + /* Admin interface */ .fms-admin-floated { -- cgit v1.2.3