Basics of sliding drawer for alerts on around page.

8 files changed, 148 insertions, 95 deletions

diff --git a/perllib/FixMyStreet/App/Controller/Alert.pm b/perllib/FixMyStreet/App/Controller/Alert.pm
index 40dde455e..2698c6ac0 100644
--- a/perllib/FixMyStreet/App/Controller/Alert.pm
+++ b/perllib/FixMyStreet/App/Controller/Alert.pm
@@ -505,6 +505,8 @@ sub setup_request : Private {
         $c->stash->{rznvy} ||= $c->user->email;
     }
 
+    $c->stash->{template} = 'alert/list-ajax.html' if $c->req->param('ajax');
+
     return 1;
 }
 
diff --git a/templates/web/fixmystreet/alert/_list.html b/templates/web/fixmystreet/alert/_list.html
new file mode 100644
index 000000000..e9f877466
--- /dev/null
+++ b/templates/web/fixmystreet/alert/_list.html
@@ -0,0 +1,89 @@
+  <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>
+
+  [% INCLUDE 'errors.html' %]
+
+  <p>
+  [% loc('The simplest alert is our geographic one:') %]
+  </p>
+  
+  <p>
+    <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)') %] 
+  </p>
+
+  <p id="rss_local_alt">
+  [% loc('(alternatively the RSS feed can be customised, within') %]
+    <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>)
+  </p>
+
+  <p>
+  [% loc("Or you can subscribe to an alert based upon what ward or council you&rsquo;re in:") %]
+  </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"
+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 %]>
+        <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"
+    title="[% option.rss_text %]" alt="RSS feed" border="0"></a>
+        <label class="inline" for="[% option.id %]">[% option.text %]</label>
+      </li>
+      [% END %]
+    </ul>
+    <p><small>
+      [% loc( 'FixMyStreet 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.' ) %]
+    </small></p>
+    [% 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 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') %]">
+
diff --git a/templates/web/fixmystreet/alert/list-ajax.html b/templates/web/fixmystreet/alert/list-ajax.html
new file mode 100644
index 000000000..639af6f07
--- /dev/null
+++ b/templates/web/fixmystreet/alert/list-ajax.html
@@ -0,0 +1,9 @@
+[% IF pretty_pc %]
+    [%
+        pretty_pc = pretty_pc | html | replace(' ', '&nbsp;');
+    %]
+[% END %]
+
+<div id="alerts">
+  [% INCLUDE 'alert/_list.html' %]
+</div>
diff --git a/templates/web/fixmystreet/alert/list.html b/templates/web/fixmystreet/alert/list.html
index ccd5ed11c..cc1b3e5fd 100644
--- a/templates/web/fixmystreet/alert/list.html
+++ b/templates/web/fixmystreet/alert/list.html
@@ -19,8 +19,6 @@
 <h1>[% title %]</h1>
 
 <form id="alerts" name="alerts" method="post" action="/alert/subscribe">
-  <input type="hidden" name="type" value="local">
-  <input type="hidden" name="pc" value="[% pc | html %]">
 
 [%# XXX These photos should perhaps be in a vertical column on the right hand side, as currently. %]
   [% IF photos.size %]
@@ -33,90 +31,8 @@
     </div>
   [% END %]
 
-  <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>
-
-  [% INCLUDE 'errors.html' %]
-
-  <p>
-  [% loc('The simplest alert is our geographic one:') %]
-  </p>
-
-  
-  <p>
-    <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)') %] 
-  </p>
-
-  <p id="rss_local_alt">
-  [% loc('(alternatively the RSS feed can be customised, within') %]
-    <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>)
-  </p>
-
-  <p>
-  [% loc("Or you can subscribe to an alert based upon what ward or council you&rsquo;re in:") %]
-  </p>
+  [% INCLUDE 'alert/_list.html' %]
 
-    [% 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"
-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 %]>
-        <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"
-    title="[% option.rss_text %]" alt="RSS feed" border="0"></a>
-        <label class="inline" for="[% option.id %]">[% option.text %]</label>
-      </li>
-      [% END %]
-    </ul>
-    <p><small>
-      [% loc( 'FixMyStreet 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.' ) %]
-    </small></p>
-    [% END %]
-
-  <input 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 type="text" id="rznvy" name="rznvy" value="[% rznvy | html %]">
-  [% END %]
-    <input style="margin-top:1em;" class="green-btn" type="submit" name="alert" value="[% loc('Subscribe me to an email alert') %]">
-  </form>
+</form>
 
 [% INCLUDE 'footer.html' %]
diff --git a/templates/web/fixmystreet/around/display_location.html b/templates/web/fixmystreet/around/display_location.html
index 6c78a0c01..051ea85a3 100755
--- a/templates/web/fixmystreet/around/display_location.html
+++ b/templates/web/fixmystreet/around/display_location.html
@@ -82,7 +82,7 @@
 
         <div class="shadow-wrap">
             <ul id="key-tools" class="singleton">
-                <li><a class="feed" href="[% email_url | html %]">Get updates</a></li>
+                <li><a class="feed" id="updates_link" href="[% email_url | html %]">Get updates</a></li>
             </ul>
         </div>
 
diff --git a/templates/web/fixmystreet/reports/council.html b/templates/web/fixmystreet/reports/council.html
index 7ed4c45b1..8beddfed2 100755
--- a/templates/web/fixmystreet/reports/council.html
+++ b/templates/web/fixmystreet/reports/council.html
@@ -77,7 +77,7 @@
 
 
 [% IF children.size %]
-<section id="council_wards" class="hidden-js">
+<div id="council_wards" class="hidden-js">
     <h2>[% loc('Wards of this council') %]</h2>
     <p>[% loc('Follow a ward link to view only reports within that ward.') %]</p>
     <ul class="issue-list-a">
@@ -85,7 +85,7 @@
         <li><a href="[% child.url %]"><span class="text">[% child.name %]</span></a></li>
         [% END %]
     </ul>
-</section>
+</div>
 [% END %]
 
 
diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss
index 7f014bf67..7827e3439 100644
--- a/web/cobrands/fixmystreet/base.scss
+++ b/web/cobrands/fixmystreet/base.scss
@@ -421,6 +421,14 @@ textarea.form-error {
   @include border-radius(0 0.25em 0.25em 0.25em);
 }
 
+ul.error {
+  background:#ff0000;
+  color:#fff;
+  padding:0 0.5em;
+  margin:0 0 0 -0.5em;
+  @include border-radius(0.25em);
+}
+
 // don't display valid error boxes as now the page jump
 // won't be until the user submits, which is fine
 div.label-valid,
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index fdcbb9669..6392277f0 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -369,28 +369,57 @@ $(function(){
         $('<p id="sub_map_links" />').insertAfter($('#map'));
     }
 
-    // Open list of wards on council page
-    // TODO Change chevron when open to point down
-    $('#council_wards_link').toggle(function(e){
-        var $this = $(this), d = $('#council_wards');
+// A sliding drawer from the bottom of the page
+// TODO Not have independent scrolling; height broken in IE6 (at least). Think fixing former will fix latter.
+$.fn.drawer = function(id, ajax) {
+    this.toggle(function(){
+        var $this = $(this), d = $('#' + id);
         if (!$this.addClass('hover').data('setup')) {
+            if (!d.length) {
+                d = $('<div id="' + id + '">');
+            }
             d.css({
                 backgroundColor: 'white',
                 height: $(window).height() - $('.content').offset().top - $('.shadow-wrap').height(),
-                display: 'none',
+                display: 'none', zIndex: 1001, position: 'relative',
                 overflow: 'auto',
                 padding: '1em'
             }).removeClass('hidden-js');
+            if (ajax) {
+                var href = $this.attr('href') + ';ajax=1';
+                d.load(href);
+            }
             d.find('h2').css({ marginTop: 0 });
             $('.shadow-wrap').append(d);
             $this.data('setup', true);
         }
         d.animate( { height: 'show' } );
     }, function(e){
-        var $this = $(this), d = $('#council_wards');
+        var $this = $(this), d = $('#' + id);
         $this.removeClass('hover');
         d.animate( { height: 'hide' } );
     });
+};
+
+    $('#council_wards_link').drawer('council_wards', false);
+    $('#updates_link').drawer('updates_ajax', true);
+
+    // Go directly to RSS feed if RSS button clicked on alert page
+    // (due to not wanting around form to submit, though good thing anyway)
+    $('.shadow-wrap').on('click', '#alert_rss_button', function(e){
+        e.preventDefault();
+        var feed = $('input[name=feed][type=radio]:checked').nextAll('a').attr('href');
+        window.location.href = feed;
+    });
+    $('.shadow-wrap').on('click', '#alert_email_button', function(e){
+        e.preventDefault();
+        var form = $('<form/>').attr({ method:'post', action:"/alert/subscribe" });
+        $('#alerts input[type=text], #alerts input[type=hidden], #alerts input[type=radio]:checked').each(function() {
+            var $v = $(this);
+            $('<input/>').attr({ name:$v.attr('name'), value:$v.val(), type:'hidden' }).appendTo(form);
+        });
+        form.submit();
+    });
 
     //add permalink on desktop, force hide on mobile
     $('#sub_map_links').append('<a href="#" id="map_permalink">Permalink</a>');