Merge branch '866-alerts-ux-simpler'

7 files changed, 108 insertions, 78 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bd027ab36..508735796 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@
     - Front end improvements:
         - Always show pagination figures even if only one page. #1787
         - Report pages list every update to a report. #1806
+        - Clearer wording and more prominent email input on alert page.
         - Cobrands can implement `hide_areas_on_reports` to hide outline on map.
     - Admin improvements:
         - Highlight current shortlisted user in list tooltip. #1788
diff --git a/perllib/FixMyStreet/Cobrand/UK.pm b/perllib/FixMyStreet/Cobrand/UK.pm
index 38f07dbfd..e1f5e565f 100644
--- a/perllib/FixMyStreet/Cobrand/UK.pm
+++ b/perllib/FixMyStreet/Cobrand/UK.pm
@@ -254,25 +254,25 @@ sub council_rss_alert_options {
         push @options, {
             type  => 'area',
             id    => sprintf( 'area:%s:%s', $district->{id}, $district->{id_name} ),
-            text  => $district_name,
+            text  => sprintf( _('Problems within %s'), $district_name ),
             rss_text => sprintf( _('RSS feed for %s'), $district_name ),
             uri => $c->uri_for( '/rss/area/' . $district->{short_name}  )
         }, {
             type      => 'area',
             id        => sprintf( 'area:%s:%s:%s:%s', $district->{id}, $d_ward->{id}, $district->{id_name}, $d_ward->{id_name} ),
-            text      => sprintf( _('%s ward, %s'), $d_ward_name, $district_name ),
+            text      => sprintf( _('Problems within %s ward, %s'), $d_ward_name, $district_name ),
             rss_text  => sprintf( _('RSS feed for %s ward, %s'), $d_ward_name, $district_name ),
             uri       => $c->uri_for( '/rss/area/' . $district->{short_name} . '/' . $d_ward->{short_name} )
         }, {
             type  => 'area',
             id    => sprintf( 'area:%s:%s', $county->{id}, $county->{id_name} ),
-            text  => $county_name,
+            text  => sprintf( _('Problems within %s'), $county_name ),
             rss_text => sprintf( _('RSS feed for %s'), $county_name ),
             uri => $c->uri_for( '/rss/area/' . $county->{short_name}  )
         }, {
             type      => 'area',
             id        => sprintf( 'area:%s:%s:%s:%s', $county->{id}, $c_ward->{id}, $county->{id_name}, $c_ward->{id_name} ),
-            text      => sprintf( _('%s ward, %s'), $c_ward_name, $county_name ),
+            text      => sprintf( _('Problems within %s ward, %s'), $c_ward_name, $county_name ),
             rss_text  => sprintf( _('RSS feed for %s ward, %s'), $c_ward_name, $county_name ),
             uri       => $c->uri_for( '/rss/area/' . $county->{short_name} . '/' . $c_ward->{short_name} )
         };
@@ -280,26 +280,26 @@ sub council_rss_alert_options {
         push @reported_to_options, {
             type      => 'council',
             id        => sprintf( 'council:%s:%s', $district->{id}, $district->{id_name} ),
-            text      => $district->{name},
+            text      => sprintf( _('Reports sent to %s'), $district->{name} ),
             rss_text  => sprintf( _('RSS feed of %s'), $district->{name}),
             uri       => $c->uri_for( '/rss/reports/' . $district->{short_name} ),
         }, {
             type     => 'ward',
             id       => sprintf( 'ward:%s:%s:%s:%s', $district->{id}, $d_ward->{id}, $district->{id_name}, $d_ward->{id_name} ),
             rss_text => sprintf( _('RSS feed of %s, within %s ward'), $district->{name}, $d_ward->{name}),
-            text     => sprintf( _('%s, within %s ward'), $district->{name}, $d_ward->{name}),
+            text     => sprintf( _('Reports sent to %s, within %s ward'), $district->{name}, $d_ward->{name}),
             uri      => $c->uri_for( '/rss/reports/' . $district->{short_name} . '/' . $d_ward->{short_name} ),
         }, {
             type      => 'council',
             id        => sprintf( 'council:%s:%s', $county->{id}, $county->{id_name} ),
-            text      => $county->{name},
+            text      => sprintf( _('Reports sent to %s'), $county->{name} ),
             rss_text  => sprintf( _('RSS feed of %s'), $county->{name}),
             uri       => $c->uri_for( '/rss/reports/' . $county->{short_name} ),
         }, {
             type     => 'ward',
             id       => sprintf( 'ward:%s:%s:%s:%s', $county->{id}, $c_ward->{id}, $county->{id_name}, $c_ward->{id_name} ),
             rss_text => sprintf( _('RSS feed of %s, within %s ward'), $county->{name}, $c_ward->{name}),
-            text     => sprintf( _('%s, within %s ward'), $county->{name}, $c_ward->{name}),
+            text     => sprintf( _('Reports sent to %s, within %s ward'), $county->{name}, $c_ward->{name}),
             uri      => $c->uri_for( '/rss/reports/' . $county->{short_name} . '/' . $c_ward->{short_name} ),
         };
 
diff --git a/t/app/controller/alert.t b/t/app/controller/alert.t
index 3ae71b7c1..4aa2fdf7d 100644
--- a/t/app/controller/alert.t
+++ b/t/app/controller/alert.t
@@ -24,7 +24,7 @@ FixMyStreet::override_config {
 
     $mech->get_ok('/alert/list?pc=EH1 1BB');
     $mech->title_like(qr/^Local RSS feeds and email alerts/);
-    $mech->content_contains('Here are the types of local problem alerts for ‘EH1 1BB’');
+    $mech->content_contains('Local RSS feeds and email alerts for ‘EH1 1BB’');
     $mech->content_contains('html class="no-js" lang="en-gb"');
     $mech->content_contains('Problems within 10.0km');
     $mech->content_contains('rss/pc/EH11BB/2');
@@ -47,8 +47,10 @@ FixMyStreet::override_config {
     $mech->get_ok('/alert/list?pc=');
     $mech->content_contains('To find out what local alerts we have for you');
 
+    # Two-tier council
     $mech->get_ok('/alert/list?pc=GL502PR');
-    $mech->content_contains('Problems within the boundary of');
+    $mech->content_contains('Problems in an area');
+    $mech->content_contains('Reports by destination');
 
     $mech->get_ok('/alert/subscribe?rss=1&type=local&pc=ky16+8yg&rss=Give+me+an+RSS+feed&rznvy=' );
     $mech->content_contains('Please select the feed you want');
diff --git a/templates/web/base/alert/_list.html b/templates/web/base/alert/_list.html
index 388e0e9bc..1f3393b19 100644
--- a/templates/web/base/alert/_list.html
+++ b/templates/web/base/alert/_list.html
@@ -1,94 +1,87 @@
+  [% SET name_of_location = pretty_pc || loc('this location') %]
+
   <input type="hidden" name="token" value="[% csrf_token %]">
   <input type="hidden" name="type" value="local">
   <input type="hidden" name="pc" value="[% pc | html %]">
   <input type="hidden" name="latitude" value="[% latitude | html %]">
   <input type="hidden" name="longitude" value="[% longitude | html %]">
 
-  <p>
-  [% IF pretty_pc %]
-    [% tprintf( loc('Here are the types of local problem alerts for &lsquo;%s&rsquo;.'), pretty_pc ) %]
-  [% END %]
-  [% loc('Select which type of alert you’d like and click the button for an RSS feed, or enter your email address to subscribe to an email alert.') %]
-  </p>
+  <h2>[% loc('Which problems do you want alerts about?') %]</h2>
 
   [% INCLUDE 'errors.html' %]
 
-  <p>
-  [% loc('The simplest alert is our geographic one:') %]
-  </p>
+  [% IF reported_to_options %]
+    <p>
+        [% tprintf(loc('Reports near %s are sent to different councils,
+        depending on the type of problem.'), name_of_location) %]
+    </p>
+    <p>
+        [% loc('You can choose to subscribe to all problems reported in an
+        area, or reports based on their destination.') %]
+    </p>
+    <div class="alerts__columns">
+        <div>
+    <h3>[% loc('Problems in an area') %]</h3>
+  [% END %]
 
   <p id="rss_local">
-    <input type="radio" name="feed" id="[% rss_feed_id %]" value="[% rss_feed_id %]"[% IF rss_feed_id == selected_feed || selected_feed == '' %] checked[% END %]>
-    <label class="inline" for="[% rss_feed_id %]">[% tprintf( loc('Problems within %.1fkm of this location'), population_radius ) %]</label>
     <a href="[% rss_feed_uri %]"><img src='/i/feed.png' width='16' height='16' title='[% loc('RSS feed of nearby problems') %]' alt='[% loc('RSS feed') %]' border='0'></a>
-    <br />
-    [% loc('(a default distance which covers roughly 200,000 people)') %]
+    <label class="label-containing-checkbox" for="[% rss_feed_id %]">
+      <input type="radio" name="feed" id="[% rss_feed_id %]" value="[% rss_feed_id %]"[% IF rss_feed_id == selected_feed || selected_feed == '' %] checked[% END %]>
+      [% tprintf( loc('Problems within %.1fkm of %s'), population_radius, name_of_location ) %]
+      [% loc('(covers roughly 200,000 people)') %]
+    </label>
   </p>
 
   <p id="rss_local_alt">
   [% SET distance_options = '<a href="' _ rss_feed_2k _ ' ">2km</a> / <a href="' _ rss_feed_5k _ ' ">5km</a> / <a href="' _ rss_feed_10k _ '">10km</a> / <a href="' _ rss_feed_20k _ '">20km</a>' %]
-  [% tprintf(loc('(alternatively the RSS feed can be customised, within %s)', "%s is a list of distance links, e.g. [2km] / [5km] / [10km] / [20km]"), distance_options) %]
+  [% tprintf(loc('(we also have RSS feeds for problems within %s)', "%s is a list of distance links, e.g. [2km] / [5km] / [10km] / [20km]"), distance_options) %]
   </p>
 
-  <p>
-  [% IF c.cobrand.is_council %]
-  Or you can subscribe to an alert for all council problems or one based upon what ward you&rsquo;re in:
-  [% ELSE %]
-  [% loc("Or you can subscribe to an alert based upon what ward or council you&rsquo;re in:") %]
-  [% END %]
-  </p>
-
-    [% IF reported_to_options %]
-        <p><strong>
-          [% loc('Problems within the boundary of:') %]
-        </strong></p>
-        <ul class="plain-list">
-    [% ELSE %]
-      <ul id="rss_feed" class="plain-list">
-    [% END %]
-
   [% FOREACH option IN options %]
-  <li[% IF ! (loop.count % 2) %] class="a"[% END %]>
-    <input type="radio" name="feed" id="[% option.id %]" value="[% option.id %]"[% IF option.id == selected_feed %] checked[% END %]>
-    <a href="[% option.uri %]"><img src="/i/feed.png" width="16" height="16"
+    <p>
+      <a href="[% option.uri %]"><img src="/i/feed.png" width="16" height="16"
 title="[% option.rss_text %]" alt="RSS feed" border="0"></a>
-    <label class="inline" for="[% option.id %]">[% option.text %]</label>
-  </li>
-  [% END %]
-</ul>
-    [% IF reported_to_options %]
-        <p><strong>
-          [% loc('Or problems reported to:') %]
-        </strong></p>
-        <ul class="plain-list">
-      [% FOREACH option IN reported_to_options %]
-      <li[% IF ! (loop.count % 2) %] class="a"[% END %]>
+      <label class="label-containing-checkbox" for="[% option.id %]">
         <input type="radio" name="feed" id="[% option.id %]" value="[% option.id %]"[% IF option.id == selected_feed %] checked[% END %]>
+        [% option.text %]
+      </label>
+    </p>
+  [% END %]
+
+  [% IF reported_to_options %]
+        </div>
+        <div>
+
+    <h3>[% loc('Reports by destination') %]</h3>
+
+    [% FOREACH option IN reported_to_options %]
+      <p>
         <a href="[% option.uri %]"><img src="/i/feed.png" width="16" height="16"
     title="[% option.rss_text %]" alt="RSS feed" border="0"></a>
-        <label class="inline" for="[% option.id %]">[% option.text %]</label>
-      </li>
-      [% END %]
-    </ul>
-    <p><small>
-      [% tprintf(loc('%s sends different categories of problem
-to the appropriate council, so problems within the boundary of a particular council
-might not match the problems sent to that council. For example, a graffiti report
-will be sent to the district council, so will appear in both of the district
-council&rsquo;s alerts, but will only appear in the "Within the boundary" alert
-for the county council.', "%s is the site name"), site_name) %]
-    </small></p>
+        <label class="label-containing-checkbox" for="[% option.id %]">
+          <input type="radio" name="feed" id="[% option.id %]" value="[% option.id %]"[% IF option.id == selected_feed %] checked[% END %]>
+          [% option.text %]
+        </label>
+      </p>
     [% END %]
+        </div>
+    </div>
+  [% END %]
 
-  <input id="alert_rss_button" class="green-btn" type="submit" name="rss" value="[% loc('Give me an RSS feed') %]">
-
-  <p id="alert_or">
-    [% loc('or') %]
-  </p>
 
-  [% UNLESS c.user_exists %]
-    <label for="rznvy">[% loc('Your email') %]</label>
-    <input class="form-control" type="text" id="rznvy" name="rznvy" value="[% rznvy | html %]">
-  [% END %]
-    <input id="alert_email_button" style="margin-top:1em;" class="green-btn" type="submit" name="alert" value="[% loc('Subscribe me to an email alert') %]">
+  <div class="alerts__cta-box">
+    <h3>[% loc('Subscribe by email') %]</h3>
+    [% UNLESS c.user_exists %]
+      <label for="rznvy">[% loc('Email address') %]</label>
+      <div class="form-txt-submit-box">
+        <input class="form-control" type="text" id="rznvy" name="rznvy" value="[% rznvy | html %]">
+        <input id="alert_email_button" class="btn-primary" type="submit" name="alert" value="[% loc('Subscribe') %]">
+      </div>
+    [% ELSE %]
+      <input id="alert_email_button" class="btn-primary" type="submit" name="alert" value="[% loc('Subscribe') %]">
+    [% END %]
+  </div>
 
+  <h3>[% loc('Or subscribe by RSS') %]</h3>
+  <input id="alert_rss_button" class="btn" type="submit" name="rss" value="[% loc('Give me an RSS feed') %]">
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 39117be4a..8673b6b76 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -767,7 +767,7 @@ $.extend(fixmystreet.set_up, {
     // (due to not wanting around form to submit, though good thing anyway)
     $('body').on('click', '#alert_rss_button', function(e) {
         e.preventDefault();
-        var feed = $('input[name=feed][type=radio]:checked').nextAll('a').attr('href');
+        var feed = $('input[name=feed][type=radio]:checked').parent().prevAll('a').attr('href');
         window.location.href = feed;
     });
     $('body').on('click', '#alert_email_button', function(e) {
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 679e7da3b..d02efe489 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -2130,6 +2130,8 @@ table.nicetable {
         background: #f6f6f6;
     }
     img[width="16"] {
+        margin-top: 4px;
+        margin-left: 0.5em;
         float: $right;
     }
 }
@@ -2154,6 +2156,29 @@ table.nicetable {
     }
 }
 
+.alerts__cta-box {
+    @extend .form-box;
+    background-color: mix($primary, #fff, 10%);
+    margin-top: 2em;
+    margin-bottom: 2em;
+
+    & > :first-child {
+        margin-top: 0;
+    }
+
+    .form-txt-submit-box {
+        max-width: 32em;
+    }
+}
+
+#rss_local_alt {
+    // Match .label-containing-checkbox
+    padding-left: 24px;
+
+    // Close up space between this and #rss_local
+    margin-top: -1em;
+}
+
 .confirmation-header {
   padding: 140px 0 2em;
   text-align: center;
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index e251a6208..a0c27863e 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -960,6 +960,15 @@ textarea.form-error {
   }
 }
 
+.alerts__columns {
+    @include clearfix;
+    @include flex-container();
+    > div {
+        width: 50%;
+        margin: 0 2em;
+    }
+}
+
 .confirmation-header {
     width: 25em;
     margin: 0 auto 1em;