Simpler alerts signup page.

Alert options on the /alert/list page are now in an order that is easier
to parse, with a slightly clearer message for users in two-tier
locations, and a more prominent email subscription CTA.

1 files changed, 60 insertions, 67 deletions

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') %]">