[fixmystreet.com] New posters page layout/content.

5 files changed, 133 insertions, 82 deletions

diff --git a/templates/web/base/static/posters.html b/templates/web/base/static/posters.html
deleted file mode 100644
index fc5202319..000000000
--- a/templates/web/base/static/posters.html
+++ /dev/null
@@ -1,43 +0,0 @@
-[% INCLUDE header.html
-    title = 'Publicity material'
-%]
-
-[% 
-    badge = '<a href="https://www.fixmystreet.com/"> <img align="left" hspace="5" src="https://www.fixmystreet.com/i/fms-badge.jpeg" alt="FixMyStreet - report, view or discuss local problems" border="0"></a>'
-%]
-
-<h1>Publicity Material</h1>
-
-<div style='float:left; width:50%'>
-    <p>Copy and paste the text below to add this badge to your site:</p>
-    [% badge %]
-    <textarea onclick="this.select()" cols=37 rows=5>[% badge | html %]</textarea>
-    <p><small>(thanks to Lincolnshire Council for the image)</small></p>
-</div>
-
-<div style='float:right; width:47%'>
-    <p>Here are some posters and flyers you can use to publicise FixMyStreet:</p>
-    <img hspace="5" src="/posters/poster.png" alt='Example poster'>
-    <h2>Posters</h2>
-    <ul>
-        <li><a href='/posters/fixmystreet-poster-a4.pdf'>A4, colour</a>
-        <li><a href='/posters/fixmystreet-poster-a4-bw.pdf'>A4, black and white</a>
-        <li><a href='/posters/fixmystreet-poster-a4-bw-low-ink.pdf'>A4, black and white, low ink</a>
-        <li><a href='/posters/fixmystreet-poster-a4-bw-outlined.pdf'>A4, black and white, outlined</a>
-    </ul>
-    <h2>Posters with tags</h2>
-    <ul>
-        <li><a href='/posters/fixmystreet-poster-tags.pdf'>A4, colour</a>
-        <li><a href='/posters/fixmystreet-poster-tags-bw.pdf'>A4, black and white</a>
-        <li><a href='/posters/fixmystreet-poster-tags-bw-low-ink.pdf'>A4, black and white, low ink</a>
-        <li><a href='/posters/fixmystreet-poster-tags-only.pdf'>A4, tags only</a>
-    </ul>
-    <h2>Flyers</h2>
-    <ul>
-        <li><a href='/posters/fixmystreet-flyers-colour.pdf'>4 x A6, colour</a>
-        <li><a href='/posters/fixmystreet-flyers-bw-outlined.pdf'>4 x A6, black and white, outlined</a>
-        <li><a href='/posters/fixmystreet-flyers-bw-low-ink.pdf'>4 x A6, black and white, low ink</a>
-    </ul>
-</div>
-
-[% INCLUDE footer.html %]
diff --git a/templates/web/fixmystreet.com/footer-nav.html b/templates/web/fixmystreet.com/footer-nav.html
index 204b80777..1732acf00 100644
--- a/templates/web/fixmystreet.com/footer-nav.html
+++ b/templates/web/fixmystreet.com/footer-nav.html
@@ -9,6 +9,8 @@
                 %]>[% loc("All reports") %]</[% c.req.uri.path == '/reports' ? 'span' : 'a' %]></li>[%
             %]<li><[% IF c.req.uri.path == '/alert' %]span[% ELSE %]a href="/alert[% pc ? '/list?pc=' : '' %][% pc | uri %]"[% END
                 %]>[% loc("Local alerts") %]</[% c.req.uri.path == '/alert' ? 'span' : 'a' %]></li>[%
+            %]<li><[% IF c.req.uri.path == '/posters' %]span[% ELSE %]a href="/posters"[% END
+                %]>[% loc("FixMyStreet Goodies") %]</[% c.req.uri.path == '/posters' ? 'span' : 'a' %]></li>[%
             %]<li><[% IF c.req.uri.path == '/contact' %]span[% ELSE %]a href="/contact"[% END
                 %]>[% loc("Contact") %]</[% c.req.uri.path == '/contact' ? 'span' : 'a' %]></li>
         </ul>
diff --git a/templates/web/fixmystreet.com/static/posters.html b/templates/web/fixmystreet.com/static/posters.html
new file mode 100644
index 000000000..2e26ad40e
--- /dev/null
+++ b/templates/web/fixmystreet.com/static/posters.html
@@ -0,0 +1,128 @@
+[% extra_css = BLOCK %]
+    <link rel="stylesheet" href="[% version('/cobrands/fixmystreet/posters.css') %]">
+[% END %]
+
+[% INCLUDE header.html
+    title = 'Promote FixMyStreet with our free goodies: posters, flyers, and kids activity packs'
+    bodyclass = 'twothirdswidthpage goodies'
+%]
+
+[%
+    badge = '<a href="https://www.fixmystreet.com/"> <img src="https://www.fixmystreet.com/i/fms-badge.jpeg" alt="FixMyStreet - report, view or discuss local problems" border="0"></a>'
+%]
+
+<div class="sticky-sidebar">
+    <aside>
+        <ul class="plain-list">
+            <li><a href="#goodies">FixMyStreet Goodies</a></li>
+            <li><a href="#activist-pack">Activist Pack</a></li>
+            <li><a href="#school-pack">Schools &amp; Kids’ Pack</a></li>
+            <li><a href="#community-pack">Community Group Pack</a></li>
+            <li><a href="#web">Website Badge</a></li>
+            <li><a href="#print">Printed Materials</a></li>
+            <li><a href="#adverts">Pre-made Adverts</a></li>
+        </ul>
+    </aside>
+</div>
+
+<h1 id="goodies">FixMyStreet Goodies</h1>
+
+<p>We’re a charity. We don’t have a massive marketing budget. But we do have YOU, dear users… please help us spread the word about FixMyStreet with these free downloads.</p>
+
+<p>We’ve combined our most popular promotional materials into packs tailored just for you. Pick the one that best suits your needs, or download the items individually at the bottom of this page.</p>
+
+<h2 id="activist-pack">The FMS Activist Pack</h2>
+
+<img src="/cobrands/fixmystreet/images/pack-general.jpg" class="pack-preview">
+
+<p>Everything you need to help spread the word about FixMyStreet. Includes:</p>
+
+<ul>
+    <li>Poster and flyers to print out</li>
+    <li>Tips for writing an article about FixMyStreet for your local paper</li>
+    <li>Dog poop flags</li>
+    <li>Instructions for including a feed of local FixMyStreet reports on your site or blog</li>
+    <li>Ideas for letting more people know about FixMyStreet</li>
+</ul>
+
+<a href="/cobrands/fixmystreet/posters/activist-pack.zip" class="download-button">Download ZIP file</a>
+
+<h2 id="school-pack">Activity Pack for Schools, Brownies, and Scouts</h2>
+
+<img src="/cobrands/fixmystreet/images/pack-schools.jpg" class="pack-preview">
+
+<p>A special pack with activities suitable for groups of children. Includes:</p>
+
+<ul>
+    <li>Poster and flyers to print out</li>
+    <li>Suggested text to send to parents</li>
+    <li>Ideas for activities</li>
+</ul>
+
+<a href="/cobrands/fixmystreet/posters/schools-clubs-pack.zip" class="download-button">Download ZIP file</a>
+
+<h2 id="community-pack">Community Group Pack</h2>
+
+<img src="/cobrands/fixmystreet/images/pack-community.jpg" class="pack-preview">
+
+<p>Materials for groups of adults who have a particular interest in their local community. Includes:</p>
+
+<ul>
+    <li>Poster and flyers to print out</li>
+    <li>Factsheet to help you write about FixMyStreet for your newsletter</li>
+    <li>Graphic for a FixMyStreet ad in your newsletter</li>
+    <li>Dog poop flags</li>
+    <li>Instructions for including a feed of local FixMyStreet reports on your site or blog</li>
+</ul>
+
+<a href="/cobrands/fixmystreet/posters/community-group-pack.zip" class="download-button">Download ZIP file</a>
+
+<h2 id="web">Website Badge</h2>
+
+<p class="badge-preview">[% badge %]</p>
+
+<p>Copy and paste the text below to add this badge to your site:</p>
+<textarea class="badge-code" onclick="this.select()">[% badge | html %]</textarea>
+<p><small>(thanks to Lincolnshire Council for the image)</small></p>
+
+<h2 id="print">Printed Materials</h2>
+
+<ul class="downloads">
+    <li><a href="/cobrands/fixmystreet/posters/fixmystreet-poster-a4.pdf">
+        <img src="/cobrands/fixmystreet/images/a4-poster.png">
+        <strong>A4 poster</strong> Ideal for a noticeboard at work, in the library, corner shop… wherever your community will see it.
+    </a></li>
+    <li><a href="/cobrands/fixmystreet/posters/fixmystreet-flyers-a5.pdf">
+        <img src="/cobrands/fixmystreet/images/a5-flyers.png">
+        <strong>A5 flyers (2 to a sheet)</strong> Perfect for handing out to friends or posting to subscribers.
+    </a></li>
+    <li><a href="/cobrands/fixmystreet/posters/fixmystreet-flyers-a6.pdf">
+        <img src="/cobrands/fixmystreet/images/a6-flyers.png">
+        <strong>A6 flyers (4 to a sheet)</strong> Great for cafés, pubs, or meetings.
+    </a></li>
+    <li><a href="/cobrands/fixmystreet/posters/fixmystreet-poop-flags.pdf">
+        <img src="/cobrands/fixmystreet/images/dog-poop-flags.png">
+        <strong>Doggy poop flags (4 to a sheet)</strong> Take a stand against dog-fouling with our home-made flags. Some assembly required!
+    </a></li>
+</ul>
+
+<h2 id="adverts">Pre-made Adverts</h2>
+
+<p>Ideal for promoting FixMyStreet in your community newsletter or local magazine. Specially designed to stand out, and get your message across!</p>
+
+<ul class="downloads">
+    <li><a href="/cobrands/fixmystreet/posters/fixmystreet-advert-90x130.pdf">
+        <img src="/cobrands/fixmystreet/images/advert-90x130.png">
+        <strong>Quarter page advert</strong> (9cm wide, 13cm high)
+    </a></li>
+    <li><a href="/cobrands/fixmystreet/posters/fixmystreet-advert-90x60.pdf">
+        <img src="/cobrands/fixmystreet/images/advert-90x60.png">
+        <strong>One-eighth page advert</strong> (9cm wide, 6cm high)
+    </a></li>
+    <li><a href="/cobrands/fixmystreet/posters/fixmystreet-advert-40x60.pdf">
+        <img src="/cobrands/fixmystreet/images/advert-40x60.png">
+        <strong>One-sixteenth page advert</strong> (4cm wide, 6cm high)
+    </a></li>
+</ul>
+
+[% INCLUDE footer.html %]
diff --git a/templates/web/fixmystreet/faq/faq-en-gb.html b/templates/web/fixmystreet/faq/faq-en-gb.html
index 213910a3c..67e3d2a9f 100755
--- a/templates/web/fixmystreet/faq/faq-en-gb.html
+++ b/templates/web/fixmystreet/faq/faq-en-gb.html
@@ -6,6 +6,9 @@
             <li><a href="#faq">Frequently Asked Questions</a></li>
             <li><a href="#practical">Practical Questions</a></li>
             <li><a href="#organisation">Organisation Questions</a></li>
+          [% IF c.cobrand.moniker == 'fixmystreet' %]
+            <li><a href="/posters">FixMyStreet Goodies</a></li>
+          [% END %]
             <li><a href="/privacy">Privacy and cookies</a></li>
             <li><a href="/contact">Contact FixMyStreet</a></li>
         </ul>
diff --git a/templates/web/fixmystreet/static/posters.html b/templates/web/fixmystreet/static/posters.html
deleted file mode 100644
index b56a6f847..000000000
--- a/templates/web/fixmystreet/static/posters.html
+++ /dev/null
@@ -1,39 +0,0 @@
-[% INCLUDE header.html
-    title = 'Publicity material'
-%]
-
-[% 
-    badge = '<a href="https://www.fixmystreet.com/"> <img src="https://www.fixmystreet.com/i/fms-badge.jpeg" alt="FixMyStreet - report, view or discuss local problems" border="0"></a>'
-%]
-
-<h1>Publicity Material</h1>
-
-    <p>Copy and paste the text below to add this badge to your site:</p>
-    <p>[% badge %]</p>
-    <textarea onclick="this.select()">[% badge | html %]</textarea>
-    <p><small>(thanks to Lincolnshire Council for the image)</small></p>
-
-    <p>Here are some posters and flyers you can use to publicise FixMyStreet:</p>
-    <img hspace="5" src="/posters/poster.png" alt='Example poster'>
-    <h2>Posters</h2>
-    <ul class="issue-list-a full-width">
-        <li><a href='/posters/fixmystreet-poster-a4.pdf'>A4, colour</a>
-        <li><a href='/posters/fixmystreet-poster-a4-bw.pdf'>A4, black and white</a>
-        <li><a href='/posters/fixmystreet-poster-a4-bw-low-ink.pdf'>A4, black and white, low ink</a>
-        <li><a href='/posters/fixmystreet-poster-a4-bw-outlined.pdf'>A4, black and white, outlined</a>
-    </ul>
-    <h2>Posters with tags</h2>
-    <ul class="issue-list-a full-width">
-        <li><a href='/posters/fixmystreet-poster-tags.pdf'>A4, colour</a>
-        <li><a href='/posters/fixmystreet-poster-tags-bw.pdf'>A4, black and white</a>
-        <li><a href='/posters/fixmystreet-poster-tags-bw-low-ink.pdf'>A4, black and white, low ink</a>
-        <li><a href='/posters/fixmystreet-poster-tags-only.pdf'>A4, tags only</a>
-    </ul>
-    <h2>Flyers</h2>
-    <ul class="issue-list-a full-width">
-        <li><a href='/posters/fixmystreet-flyers-colour.pdf'>4 x A6, colour</a>
-        <li><a href='/posters/fixmystreet-flyers-bw-outlined.pdf'>4 x A6, black and white, outlined</a>
-        <li><a href='/posters/fixmystreet-flyers-bw-low-ink.pdf'>4 x A6, black and white, low ink</a>
-    </ul>
-
-[% INCLUDE footer.html %]