diff options
| -rw-r--r-- | perllib/CrossSell.pm | 21 | ||||
| -rw-r--r-- | templates/web/base/tokens/confirm_alert.html | 7 | ||||
| -rw-r--r-- | templates/web/base/tokens/confirm_problem.html | 49 | ||||
| -rw-r--r-- | templates/web/base/tokens/confirm_update.html | 14 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/base.scss | 69 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/images/advert-app-watercolour.jpg | bin | 0 -> 22469 bytes |
6 files changed, 119 insertions, 41 deletions
diff --git a/perllib/CrossSell.pm b/perllib/CrossSell.pm index f9bb73d6a..5c7bf04ac 100644 --- a/perllib/CrossSell.pm +++ b/perllib/CrossSell.pm @@ -163,25 +163,20 @@ EOF sub display_app_links { return <<EOF; -<h1 style="padding-top:0.5em">New! FixMyStreet Apps for Apple and Android</h1> -<p> -We've built all-new FixMyStreet phone apps, for your use. Key -improvements include offline reporting (for where there is bad signal) -and a better interface for adding problem reports more quickly and -easily. Please give the apps a go and tell us what you think. -</p> +<h1>Next time, report your issue quicker.</h1> +<p>Download our awesome app, and make reporting and monitoring issues on the go a breeze.</p> -<p> +<p class="app-links"> <a href="https://play.google.com/store/apps/details?id=org.mysociety.FixMyStreet"> <img alt="FixMyStreet Android app on Google Play" src="/cobrands/fixmystreet/images/google_play_logo.png" /> -</a> - -<a href="https://itunes.apple.com/gb/app/fixmystreet/id297456545"> +</a><a href="https://itunes.apple.com/gb/app/fixmystreet/id297456545"> <img alt="FixMyStreet app on the App Store" src="/cobrands/fixmystreet/images/itunes_store_logo.png" /> -</a><br> +</a> </p> + +<p class="desktop-advice">Not on your mobile? No problem! Download now, and the app will be ready to use when you next pick up your phone.</p> EOF } @@ -245,7 +240,7 @@ sub display_advert ($$;$%) { #unless (defined $data{done_tms} && $data{done_tms}==1) { $c->stash->{scratch} = 'advert=wtt'; - return '<div style="margin: 0 5em; border-top: dotted 1px #666666;">' + return '<div class="advert-mobile-apps">' . display_app_links() . '</div>'; diff --git a/templates/web/base/tokens/confirm_alert.html b/templates/web/base/tokens/confirm_alert.html index d23a658ec..a33f7e92a 100644 --- a/templates/web/base/tokens/confirm_alert.html +++ b/templates/web/base/tokens/confirm_alert.html @@ -1,6 +1,7 @@ -[% INCLUDE 'header.html', title => loc('Local RSS feeds and email alerts') %] +[% INCLUDE 'header.html', bodyclass = 'fullwidthpage', title => loc('Local RSS feeds and email alerts') %] -<h1>[% loc('Local RSS feeds and email alerts') %]</h1> +<div class="confirmation-header"> + <h1>[% loc('Local RSS feeds and email alerts') %]</h1> <p> [% IF confirm_type == 'subscribe' %] @@ -12,6 +13,8 @@ [% END %] </p> +</div> + [% display_crosssell_advert( alert.user.email, alert.user.name ) %] [% INCLUDE 'footer.html' %] diff --git a/templates/web/base/tokens/confirm_problem.html b/templates/web/base/tokens/confirm_problem.html index 723d515e1..217fb0a72 100644 --- a/templates/web/base/tokens/confirm_problem.html +++ b/templates/web/base/tokens/confirm_problem.html @@ -1,30 +1,37 @@ -[% INCLUDE 'header.html', title = loc('Confirmation') %] +[% INCLUDE 'header.html', bodyclass = 'fullwidthpage', title = loc('Confirmation') %] -<h1>[% loc('Confirmation') %]</h1> +<div class="confirmation-header"> + <h1>[% loc('Your problem has been confirmed!') %]</h1> -<p class="confirmed"> [% IF c.cobrand.is_council %] -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> + 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> + [% ELSE %] -[% - loc('You have successfully confirmed your problem'); - IF problem.bodies_str; - loc(' and <strong>we will now send it to the council</strong>'); - END; %]. -[% - 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> + [% 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 %] -</p> + +</div> [% display_crosssell_advert( problem.user.email, problem.name ) %] diff --git a/templates/web/base/tokens/confirm_update.html b/templates/web/base/tokens/confirm_update.html index 56f04e12a..21fcfc4ff 100644 --- a/templates/web/base/tokens/confirm_update.html +++ b/templates/web/base/tokens/confirm_update.html @@ -1,20 +1,24 @@ -[% INCLUDE 'header.html', title => loc('Confirmation') %] +[% INCLUDE 'header.html', bodyclass = 'fullwidthpage', title => loc('Confirmation') %] -<h1>[% loc('Confirmation') %]</h1> +<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 ) ); + tprintf(loc('Thank you — you can <a href="%s">view your updated problem</a> on the site.'), + 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 ); + 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 ); %] [% END %] </p> +</div> + [% display_crosssell_advert( update.user.email, update.name ) %] [% INCLUDE 'footer.html' %] diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss index 381864d58..c33f927f8 100644 --- a/web/cobrands/fixmystreet/base.scss +++ b/web/cobrands/fixmystreet/base.scss @@ -20,3 +20,72 @@ p#international_message { margin: auto; padding: 0.5em 2em; max-width: 40em; text-align: center; } #message_close { float: right; } } + +.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; + } +} + +.advert-mobile-apps { + margin: 0 -1em; // counteract padding on parent + background-color: #fff9cc; + padding: 2em; + + @media only screen and (min-width: 48em) { + padding-left: 37%; + background: #fff9cc url(/cobrands/fixmystreet/images/advert-app-watercolour.jpg) 7% 50% no-repeat; + } + + h1 { + margin-top: 0; + } + + p { + font-size: 1.3em; + line-height: 1.4em; + } + + .app-links { + @include clearfix; + margin-bottom: 1em; + + a { + float: left; + margin-right: 1em; + } + + a[href*="itunes.apple.com"] { + margin-top: 3px; // compensate for slightly smaller itunes button + } + } + + .desktop-advice { + clear: left; + font-size: 1em; + line-height: 1.2em; + color: #745D17; // brown + + @media only screen and (min-width: 48em) { + width: 28em; // break line at a nice point + } + } +} + diff --git a/web/cobrands/fixmystreet/images/advert-app-watercolour.jpg b/web/cobrands/fixmystreet/images/advert-app-watercolour.jpg Binary files differnew file mode 100644 index 000000000..9c372fed5 --- /dev/null +++ b/web/cobrands/fixmystreet/images/advert-app-watercolour.jpg |
