Add cobrand-specific XSL to RSS feeds.

7 files changed, 99 insertions, 4 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1f2f3ed3e..d36a92d59 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@
         - Darken front page step numbers, and improve nested heading structure.
         - Set report title autocomplete to off to prevent email autocompleting
         - Add map filter debouncing to reduce server requests. #2675
+        - Add XSL to RSS feeds so they look nicer in browsers.
     - Admin improvements:
         - Add new roles system, to group permissions and apply to users. #2483
         - Contact form emails now include user admin links.
diff --git a/perllib/FixMyStreet/App/Controller/Rss.pm b/perllib/FixMyStreet/App/Controller/Rss.pm
index 443e45b93..cb59689b4 100755
--- a/perllib/FixMyStreet/App/Controller/Rss.pm
+++ b/perllib/FixMyStreet/App/Controller/Rss.pm
@@ -186,6 +186,7 @@ sub generate : Private {
     $c->stash->{rss} = new XML::RSS(
         version       => '2.0',
         encoding      => 'UTF-8',
+        stylesheet    => '/rss/xsl',
         encode_output => undef
     );
     $c->stash->{rss}->add_module(
@@ -377,6 +378,20 @@ sub redirect_lat_lon : Private {
     $c->res->redirect( "/rss/l/$lat,$lon" . $d_str . $state_qs );
 }
 
+sub xsl : Path {
+    my ($self, $c) = @_;
+
+    my @include_path = @{ $c->cobrand->path_to_email_templates($c->stash->{lang_code}) };
+    my $vars = {
+        %{ $c->stash },
+        additional_template_paths => \@include_path,
+    };
+    my $body = $c->view('Email')->render($c, 'xsl.xsl', $vars);
+
+    $c->response->header('Content-Type' => 'text/xml; charset=utf-8');
+    $c->response->body($body);
+}
+
 =head1 AUTHOR
 
 Matthew Somerville
diff --git a/t/app/controller/rss.t b/t/app/controller/rss.t
index 04e63711c..37543ad4f 100644
--- a/t/app/controller/rss.t
+++ b/t/app/controller/rss.t
@@ -151,4 +151,21 @@ subtest "check RSS feeds on cobrand have correct URLs for non-cobrand reports" =
     $mech->content_contains($expected2, 'cobrand area report point to cobrand url');
 };
 
+subtest 'Check XSL' => sub {
+    $mech->host('www.fixmystreet.com');
+    FixMyStreet::override_config {
+        ALLOWED_COBRANDS => 'fixmystreet',
+    }, sub {
+        $mech->get_ok('/rss/xsl');
+    };
+    $mech->content_contains('/cobrands/fixmystreet.com/images/email-logo.gif');
+    $mech->content_contains('FixMyStreet');
+    FixMyStreet::override_config {
+        ALLOWED_COBRANDS => 'bexley',
+    }, sub {
+        $mech->get_ok('/rss/xsl');
+    };
+    $mech->content_contains('/cobrands/bexley/images/logo.png');
+};
+
 done_testing();
diff --git a/templates/email/default/_email_settings.html b/templates/email/default/_email_settings.html
index bdb8af692..180adbbeb 100644
--- a/templates/email/default/_email_settings.html
+++ b/templates/email/default/_email_settings.html
@@ -33,7 +33,7 @@ logo_font_size = "24px"
 primary_column_background_color = color_white
 primary_column_text_color = color_black
 secondary_column_background_color = color_blue_pale
-secondary_column_text_color = color_black
+secondary_column_text_color = color_gunmetal
 column_divider_color = color_grey
 column_padding = "20" # a single CSS pixel measurement without the "px" suffix
 
@@ -51,6 +51,8 @@ button_text_color_notfixed = color_white
 button_text_color_dontknow = color_black
 button_font_weight = "bold"
 
+text_input_border_color = "#999";
+
 submit_footer_td_style = "text-align: left; vertical-align: top; font-weight: normal; color: #000;"
 submit_footer_h2_style = "font-size: 16px; line-height: 18px; margin: 0 0 10px 0;";
 submit_footer_link_style = "color: #9CD0EA;";
@@ -110,6 +112,10 @@ contact_th_style = "vertical-align: top; padding: 0.4em 1em 0 0; white-space: no
 contact_td_style = "vertical-align: top; padding: 0.4em 0 0.4em 0; width: 100%;"
 contact_admin_links_style = "display: block;"
 
+rss_meta_style = "padding: 5px ${ column_padding }px; vertical-align: top; background-color: $secondary_column_background_color; color: $secondary_column_text_color; border-bottom: 1px solid $column_divider_color; font-size: 14px;"
+
+text_input_style = "padding: 0.5em 0.75em; border-radius: 0.3em; border: 1px solid $text_input_border_color; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; width: 30em; max-width: 100%; margin-top: 0.5em; font-size: 1em;";
+
 # The below is so the buttons work okay in Outlook: https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design
 button_style = "display: inline-block; border: 10px solid $button_background_color; border-width: 10px 15px; border-radius: $button_border_radius; background-color: $button_background_color; color: $button_text_color; font-size: 18px; line-height: 21px; font-weight: $button_font_weight; text-decoration: underline;"
 fixed_button_style = "$button_style border-color: $button_background_color_fixed; background-color: $button_background_color_fixed; color: $button_text_color_fixed; margin: 0 0.2em;"
diff --git a/templates/email/default/_email_sidebar.html b/templates/email/default/_email_sidebar.html
index 7897d168c..e762bc140 100644
--- a/templates/email/default/_email_sidebar.html
+++ b/templates/email/default/_email_sidebar.html
@@ -13,7 +13,9 @@ DEFAULT url = cobrand.base_url_for_report(report) _ report.url
 
 ~%]
 <th style="[% td_style %][% secondary_column_style %]" id="secondary_column">
+  [% IF url %]
   <a href="[% url %]"><img style="[% map_image_style %]" src="[% inline_image(report.static_map, 'map.jpeg') %]" width="310" height="200" alt=""></a>
+  [% END %]
   [% start_padded_box %]
     [%~ IF object.photo %]
       <img style="[% preview_photo_style %]" src="[% inline_image(object.get_first_image_fp) %]" alt="" align="right">
diff --git a/templates/email/default/_email_top.html b/templates/email/default/_email_top.html
index 0191bacfc..f7869ddb4 100644
--- a/templates/email/default/_email_top.html
+++ b/templates/email/default/_email_top.html
@@ -8,10 +8,12 @@
     ELSE;
         SET img_dir = cobrand;
     END -%]
+[% IF NOT for_rss ~%]
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+[% END ~%]
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-  <title></title>
+  <title>[% rss_title %]</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <style type="text/css">
   [%~ # Styles here will be applied by everything except Gmail.com %]
@@ -61,8 +63,12 @@
         <table [% table_reset %]>
           <tr>
             <th colspan="[% email_columns %]" style="[% td_style %][% header_style %]">
-                [%~ IF file_exists("web/cobrands/${ img_dir }/images/${ logo_file }") ~%]
-                <img src="[% inline_image('web/cobrands/' _ img_dir _ '/images/' _ logo_file ) %]" width="[% logo_width %]" height="[% logo_height %]" alt="[% site_name %]" style="[% logo_style %]"/>
+              [%~ IF file_exists("web/cobrands/${ img_dir }/images/${ logo_file }") ~%]
+                [%~ IF for_rss ~%]
+                  <img src="/cobrands/[% img_dir %]/images/[% logo_file %]" width="[% logo_width %]" height="[% logo_height %]" alt="[% site_name %]" style="[% logo_style %]"/>
+                [%~ ELSE ~%]
+                  <img src="[% inline_image('web/cobrands/' _ img_dir _ '/images/' _ logo_file ) %]" width="[% logo_width %]" height="[% logo_height %]" alt="[% site_name %]" style="[% logo_style %]"/>
+                [%~ END ~%]
               [%~ ELSE ~%]
                 <span style="[% logo_style %]">[% site_name %]</span>
               [%~ END %]
diff --git a/templates/email/default/xsl.xsl b/templates/email/default/xsl.xsl
new file mode 100644
index 000000000..ad23b2b3b
--- /dev/null
+++ b/templates/email/default/xsl.xsl
@@ -0,0 +1,48 @@
+[%
+email_footer = site_name;
+-%]
+[% FILTER collapse %][% PROCESS '_email_settings.html' %][% END ~%]
+<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet version="1.1" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+    <xsl:output method="html" />
+    <xsl:variable name="title" select="/rss/channel/title"/>
+    <xsl:variable name="uri" select="/rss/channel/uri"/>
+    <xsl:template match="/">
+        [% PROCESS '_email_top.html' for_rss=1 rss_title='<xsl:value-of select="$title"/> XML Feed' %]
+
+        <th style="[% td_style %][% rss_meta_style %]">
+            <p>
+            This is an RSS feed from the FixMyStreet website. RSS feeds allow you
+            to stay up to date with the latest changes and additions to the site.
+            <a href="https://www.bbc.co.uk/news/10628494">Learn more about RSS feeds.</a>
+            </p>
+            <p>
+            To subscribe to this RSS feed, copy this URL into your RSS feed reader:
+            <input type="text" style="[% text_input_style %]" onClick="this.setSelectionRange(0, this.value.length)">
+                <xsl:attribute name="value">
+                    <xsl:value-of select="$uri"/>
+                </xsl:attribute>
+            </input>
+            </p>
+        </th>
+
+    </tr>
+    <tr>
+
+        <th style="[% td_style %][% only_column_style %]">
+            <h1 style="[% h1_style %]"><xsl:value-of select="$title"/></h1>
+            <xsl:apply-templates select="rss/channel/item"/>
+        </th>
+
+        [% PROCESS '_email_bottom.html' %]
+
+    </xsl:template>
+
+    <xsl:template match="item">
+        <div style="[% list_item_style %]">
+            <h2 style="[% list_item_h2_style %]"><a href="{link}"><xsl:value-of select="title"/></a></h2>
+            <xsl:value-of disable-output-escaping="yes" select="description" />
+        </div>
+    </xsl:template>
+
+</xsl:stylesheet>