Combine some base/fixmystreet templates.

The aim is to combine base and fixmystreet as much as possible,
providing enough template/styling hooks for any cobrand. This
commit removes the need for separate base/fixmystreet templates
for the front page, almost all of the /around templates, the
open graph headers, and the low level item list templates.

20 files changed, 214 insertions, 146 deletions

diff --git a/templates/web/base/around/_error_multiple.html b/templates/web/base/around/_error_multiple.html
new file mode 100644
index 000000000..15089ba6b
--- /dev/null
+++ b/templates/web/base/around/_error_multiple.html
@@ -0,0 +1,19 @@
+[% IF location_error %]
+    [% INCLUDE 'around/location_error.html' %]
+[% END %]
+
+[% IF possible_location_matches %]
+    <p>[% loc('We found more than one match for that location. We show up to ten matches, please try a different search if yours is not here.') %]</p>
+    <ul class="pc_alternatives">
+        [% FOREACH match IN possible_location_matches %]
+        <li><a href="/around?latitude=[% match.latitude | uri %];longitude=[% match.longitude | uri %]">[% match.address | html %]</a></li>
+        [% END %]
+    </ul>
+[% END %]
+
+[% IF partial_token %]
+    <p style="margin-top: 0; color: #cc0000;">
+        <img align="right" src="/photo/[% partial_report.id %].jpeg" hspace="5">
+        [% loc("Thanks for uploading your photo. We now need to locate your problem, so please enter a nearby street name or postcode in the box above&nbsp;:") %]
+    </p>
+[% END %]
diff --git a/templates/web/base/around/_main.html b/templates/web/base/around/_main.html
new file mode 100644
index 000000000..1b832cb49
--- /dev/null
+++ b/templates/web/base/around/_main.html
@@ -0,0 +1,8 @@
+<form action="[% c.uri_for('/around') %]" method="get" name="mapForm" id="mapForm">
+    <div id="side-form">
+        <div id="report-a-problem-main">
+            [% pre_container_extra %]
+            [% INCLUDE 'around/_error_multiple.html' %]
+        </div>
+    </div>
+</form>
diff --git a/templates/web/base/around/_report_banner.html b/templates/web/base/around/_report_banner.html
index 024fe08d9..9fcfe3640 100755
--- a/templates/web/base/around/_report_banner.html
+++ b/templates/web/base/around/_report_banner.html
@@ -1,10 +1,6 @@
-<p id="text_map" class="banner">
-    [% loc( 'To <strong>report a problem</strong>, click on the map at the correct location.' ) %]
-    [%
-        tprintf(
-            loc("<small>If you cannot see the map, <a href='%s' rel='nofollow'>skip this step</a>.</small>"),
-            url_skip
-        )
-    %]
-    <span id="text_map_arrow"></span>
-</p>
+<h1 class="big-green-banner">
+    [% loc( 'Click map to report a problem' ) %]
+</h1>
+<a id="skip-this-step" href="[% url_skip %]" rel="nofollow">
+    [% loc("Can't see the map? <em>Skip this step</em>") %]
+</a>
diff --git a/templates/web/base/around/around_index.html b/templates/web/base/around/around_index.html
deleted file mode 100644
index 3b2714643..000000000
--- a/templates/web/base/around/around_index.html
+++ /dev/null
@@ -1,27 +0,0 @@
-[%
-    SET bodyclass = 'mappage';
-    INCLUDE 'header.html', title => loc('Reporting a problem')
-%]
-
-<form action="[% c.uri_for('/around') %]" method="get" name="mapForm" id="mapForm">
-    <div id="side-form">
-        <div id="report-a-problem-main">
-            [% INCLUDE 'around/postcode_form.html' %]
-
-            [% IF location_error %]
-                [% INCLUDE 'around/location_error.html' %]
-            [% END %]
-
-            [% IF possible_location_matches %]
-                <p>[% loc('We found more than one match for that location. We show up to ten matches, please try a different search if yours is not here.') %]</p>
-                <ul class="pc_alternatives">
-                    [% FOREACH match IN possible_location_matches %]
-                    <li><a href="/around?latitude=[% match.latitude | uri %];longitude=[% match.longitude | uri %]">[% match.address | html %]</a></li>
-                    [% END %]
-                </ul>
-            [% END %]
-        </div>
-    </div>
-</form>
-
-[% INCLUDE 'footer.html' %]
diff --git a/templates/web/base/around/index.html b/templates/web/base/around/index.html
new file mode 100644
index 000000000..f2be5575c
--- /dev/null
+++ b/templates/web/base/around/index.html
@@ -0,0 +1,13 @@
+[% pre_container_extra = INCLUDE 'around/postcode_form.html' %]
+[% INCLUDE 'header.html', title = loc('Reporting a problem'), bodyclass = 'frontpage fullwidthpage' %]
+
+[%
+    # NOTE ON PARTIAL REPORTS:
+    #
+    # partial reports get a bit of extra text added, the form goes to
+    # '/report/new' and the partial hidden field is added to the form.
+%]
+
+[% INCLUDE 'around/_main.html' %]
+
+[% INCLUDE 'footer.html' %]
diff --git a/templates/web/base/around/intro.html b/templates/web/base/around/intro.html
new file mode 100644
index 000000000..d71dad1d5
--- /dev/null
+++ b/templates/web/base/around/intro.html
@@ -0,0 +1,2 @@
+            <h1>[% loc('Report, view, or discuss local problems') %]</h1>
+            <h2>[% loc('(like graffiti, fly tipping, broken paving slabs, or street lighting)') %]</h2>
diff --git a/templates/web/base/around/location_error.html b/templates/web/base/around/location_error.html
index 9b907b64b..fc9b2b8ce 100644
--- a/templates/web/base/around/location_error.html
+++ b/templates/web/base/around/location_error.html
@@ -1 +1 @@
-<p class="error">[% location_error %]</p>
+<p class="form-error">[% location_error %]</p>
diff --git a/templates/web/base/around/on_map_list_items.html b/templates/web/base/around/on_map_list_items.html
index 70a071406..7b66d4267 100644
--- a/templates/web/base/around/on_map_list_items.html
+++ b/templates/web/base/around/on_map_list_items.html
@@ -1,15 +1,7 @@
 [% IF on_map.size %]
-    [% FOREACH p IN on_map %]
-        <li>
-            <a href="[% c.uri_for('/report', p.id ) %]">[% p.title | html %]</a>
-            <small>[% prettify_dt( p.confirmed, 1 ) %]</small>
-            [% IF p.is_fixed %]
-                <small>[% loc('(fixed)') %]</small>
-            [% ELSIF p.is_closed %]
-                <small>[% loc('(closed)') %]</small>
-            [% END %]
-        </li>
+    [% FOREACH problem IN on_map %]
+        [% INCLUDE 'report/_item.html' %]
     [% END %]
 [% ELSE %]
-    <li>[% loc('No problems have been reported yet.') %]</li>
+    <li><p>[% loc('No problems have been reported yet.') %]</p></li>
 [% END %]
diff --git a/templates/web/base/around/postcode_form.html b/templates/web/base/around/postcode_form.html
index f58d7285d..601f0ee9e 100644
--- a/templates/web/base/around/postcode_form.html
+++ b/templates/web/base/around/postcode_form.html
@@ -1,13 +1,26 @@
-[%
-    question = c.cobrand.enter_postcode_text || loc('Enter a nearby street name and area');
-%]
-
-<form action="[% c.uri_for('/around') %]" method="get" name="postcodeForm" id="postcodeForm">
-    <label for="pc">[% question %]:</label>
-    <span><input type="text" name="pc" value="[% pc | html %]" id="pc" size="10" maxlength="200">
-    <input type="submit" value="[% loc('Go') %]" id="sub">
-    </span>
-    [% IF partial_token %]
-        <input type="hidden" name="partial" value="[% partial_token.token %]">
-    [% END %]
-</form>
+<div id="front-main">
+    <div id="front-main-container">
+        [% INCLUDE 'around/intro.html' %]
+
+        [%
+            question = c.cobrand.enter_postcode_text || loc('Enter a nearby street name and area');
+        %]
+
+        [% IF c.cobrand.moniker == 'fixmybarangay' %]
+            [% INCLUDE '_barangay_buttons.html' %]
+        [% ELSE %]
+        <form action="[% c.uri_for('/around') %]" method="get" name="postcodeForm" id="postcodeForm">
+            <label for="pc">[% question %]:</label>
+            <div>
+                <input type="text" name="pc" value="[% pc | html %]" id="pc" size="10" maxlength="200" placeholder="[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]">
+                <input type="submit" value="[% loc('Go') %]" id="sub">
+            </div>
+
+            [% IF partial_token %]
+                <input type="hidden" name="partial" value="[% partial_token.token %]">
+            [% END %]
+
+        </form>
+        [% END %]
+    </div>
+</div>
diff --git a/templates/web/base/around/tabbed_lists.html b/templates/web/base/around/tabbed_lists.html
index 4ad7b35fc..40048f6b2 100755
--- a/templates/web/base/around/tabbed_lists.html
+++ b/templates/web/base/around/tabbed_lists.html
@@ -1,23 +1,14 @@
-<div id="nearby_lists">
-
-    <h2>[% loc('Reports on and around the map') %]</h2>
-    
-    <ul id="current">
-        [% INCLUDE "around/on_map_list_items.html" %]
-    </ul>
-    
-    <h2>
-        [%
-            tprintf(
-                loc( 'Closest nearby problems <small>(within&nbsp;%skm)</small>' ),
-                distance
-            )
-        %]
-    </h2>
-    
-    <ul id="current_near">
-        [% INCLUDE "around/around_map_list_items.html" %]
+<menu id="problems-nav" class="tab-nav">
+    <ul>
+        <li><a href="#current">[% loc('Problems on the map') %]</a></li>
+        <li><a href="#current_near">[% loc( 'Problems nearby' ) %]</a></li>
     </ul>
+</menu>
 
-</div>
+<ul id="current" class="issue-list-a tab">
+    [% INCLUDE "around/on_map_list_items.html" %]
+</ul>
 
+<ul id="current_near" class="issue-list-a tab">
+    [% INCLUDE "around/around_map_list_items.html" %]
+</ul>
diff --git a/templates/web/base/footer.html b/templates/web/base/footer.html
index 102aacd25..3f4e5b551 100644
--- a/templates/web/base/footer.html
+++ b/templates/web/base/footer.html
@@ -23,9 +23,7 @@
 
     <p><a href="/contact">[% tprintf(loc("Contact %s", "%s is the site name"), site_name) | replace(' ', '&nbsp;') %]</a></p>
       
-    <p>[% loc('Are you a <strong>developer</strong>? Would you like to contribute to FixMyStreet?') %]
-    [% loc('Our code is open source and <a href="http://github.com/mysociety/fixmystreet">available on GitHub</a>.') %]
-    </p>
+    [% INCLUDE 'front/footer-marketing.html' %]
 
 </div>
 
diff --git a/templates/web/base/front/footer-marketing.html b/templates/web/base/front/footer-marketing.html
new file mode 100644
index 000000000..c0c9b4168
--- /dev/null
+++ b/templates/web/base/front/footer-marketing.html
@@ -0,0 +1,21 @@
+                        <div class="tablewrapper bordered">
+                            <div id="footer-mobileapps">
+                                <!--
+                                <h4></h4>
+                                <p>
+                                </p>
+                                -->
+                            </div>
+
+                            <div id="footer-help">
+                                <p>
+                                [% loc('Powered by <a class="platform-logo" href="http://fixmystreet.org/">FixMyStreet Platform</a>') %]
+                                </p>
+                                <ul>
+                                    <li>
+                                        <h4>[% loc('Are you a developer?') %]</h4>
+                                        <p>[% loc('Would you like to contribute to FixMyStreet? Our code is open source and <a href="http://fixmystreet.org">available at fixmystreet.org</a>.') %]</p>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
diff --git a/templates/web/base/front/javascript.html b/templates/web/base/front/javascript.html
new file mode 100644
index 000000000..13aa5216c
--- /dev/null
+++ b/templates/web/base/front/javascript.html
@@ -0,0 +1,15 @@
+[%# Assume using OpenStreetMap maps %]
+<script>
+yepnope.addPrefix( 'preload', function ( resource ) {
+    resource.noexec = true;
+    return resource;
+});
+Modernizr.load({
+    load: [
+        "preload![% version('/js/OpenLayers.fixmystreet.js') %]",
+        "preload![% version('/js/map-OpenLayers.js') %]",
+        "preload![% version('/js/map-OpenStreetMap.js') %]",
+        "preload![% version('/js/jquery.ba-hashchange.min.js') %]"
+    ]
+});
+</script>
diff --git a/templates/web/base/front/recent.html b/templates/web/base/front/recent.html
new file mode 100644
index 000000000..5275cef43
--- /dev/null
+++ b/templates/web/base/front/recent.html
@@ -0,0 +1,23 @@
+[% 
+    recent_photos = c.cobrand.recent_photos('front', 5);
+%]
+
+[% IF recent_photos.size %]
+<div id="front-recently">
+    <h2>
+        [%- IF c.cobrand.moniker == 'hart' %]
+            Recently reported
+        [% ELSE %]
+            [% loc('Recently reported problems') %]
+        [% END -%]
+    </h2>
+
+    <section class="full-width">
+        <ul class="issue-list-a">
+          [% FOREACH problem IN recent_photos %]
+            [% INCLUDE 'report/_item.html', no_fixed = 1 %]
+          [% END %]
+        </ul>
+    </section>
+</div>
+[% END %]
diff --git a/templates/web/base/header.html b/templates/web/base/header.html
index 479a349f3..1d7960661 100644
--- a/templates/web/base/header.html
+++ b/templates/web/base/header.html
@@ -11,6 +11,8 @@
         <meta name="HandHeldFriendly" content="true">
         <meta name="mobileoptimized" content="0">
 
+        [% INCLUDE 'header_opengraph.html' %]
+
         <link rel="stylesheet" href="[% version('/css/core.css') %]">
 
         [% INCLUDE 'common_header_tags.html' %]
@@ -24,14 +26,16 @@
             %][% loc('FixMyStreet') %]
         [%- IF NOT title AND NOT c.req.path %]</h1>[% ELSE %]</a></div>[% END %]
 
-        <ul id="meta">
-            [% IF c.user_exists %]
-                <li>[% tprintf(loc('Signed in as %s'), c.user.name || c.user.email) %]
-                <li class="last"><a href="/auth/sign_out">[% loc('Sign out') %]</a></li>
-            [% ELSE %]
-                <li>&nbsp;</li>
-            [% END %]
-        </ul>
+          [% IF c.user_exists %]
+            <div id="user-meta">
+                <p>
+                    [% tprintf(loc('Hi %s'), c.user.name || c.user.email) %]
+                    <a href="/auth/sign_out">[% loc('sign out') %]</a>
+                </p>
+            </div>
+          [% END %]
+
+            [% pre_container_extra %]
 
     <div id="mysociety" class="container" role="main">
 
diff --git a/templates/web/base/header_opengraph.html b/templates/web/base/header_opengraph.html
index e69de29bb..f728d083f 100644
--- a/templates/web/base/header_opengraph.html
+++ b/templates/web/base/header_opengraph.html
@@ -0,0 +1,6 @@
+        <meta property="og:url" content="[% c.cobrand.base_url %][% c.req.uri.path %]">
+        <meta property="og:title" content="[% title || site_name %]">
+        <meta property="og:site_name" content="[% site_name %]">
+        [% IF c.req.uri.path == '/' %]<meta property="og:description" content="Report, view, and discuss local street-related problems.">[% END %]
+        <meta property="og:type" content="website">
+        [% INCLUDE 'header_opengraph_image.html' %]
diff --git a/templates/web/base/header_opengraph_image.html b/templates/web/base/header_opengraph_image.html
new file mode 100644
index 000000000..7ec1aabb0
--- /dev/null
+++ b/templates/web/base/header_opengraph_image.html
@@ -0,0 +1,4 @@
+        <meta property="og:image" content="[% c.cobrand.base_url %]/cobrands/fixmystreet/images/fms-og_image.jpg">
+        <meta property="og:image:type" content="image/jpeg">
+        <meta property="og:image:width" content="1200">
+        <meta property="og:image:height" content="630">
diff --git a/templates/web/base/index.html b/templates/web/base/index.html
index cea0f832a..0441b3efb 100644
--- a/templates/web/base/index.html
+++ b/templates/web/base/index.html
@@ -1,55 +1,20 @@
-[% INCLUDE 'header.html', title = '' %]
+[% map_js = PROCESS 'front/javascript.html' %]
+
+[% pre_container_extra = PROCESS 'around/postcode_form.html' %]
+[% INCLUDE 'header.html', title = '', bodyclass = 'frontpage fullwidthpage' %]
 
 [% IF error %]
-    <p class="error">[% error %]</p>
+    <p class="form-error">[% error %]</p>
 [% END %]
 
-<p id="expl">        
-    [% 
-        subhead = loc('(like graffiti, fly tipping, broken paving slabs, or street lighting)');
-    %]
-    <strong>[% loc('Report, view, or discuss local problems') %]</strong>
-    [% IF subhead != ' ' %]
-        <small>[% subhead %]</small>
-    [% END %]
-</p>
-
-[% PROCESS 'around/postcode_form.html' %]
-
-<div id="front_intro">
-    [% INCLUDE 'index-steps.html' %]
-</div>
-
-[% 
-    recent_photos = c.cobrand.recent_photos('front', 3);
-    probs         = c.cobrand.recent();
-%]
+[% TRY %][% PROCESS 'front/pre-steps.html' %][% CATCH file %][% END %]
 
-[% IF probs.size || recent_photos.size %]
-<div id="front_recent">
-    <h2>[% loc('Recently reported problems') %]</h2>
-    [% IF recent_photos.size %]
-        <p id="front_photos">
-        [% FOREACH p IN recent_photos;
-            photo = p.get_photo_params;
-        %]
-            <a href="/report/[% p.id %]"><img border="0" height="100"
-                src="[% photo.url_tn %]" alt="[% p.title | html %]" title="[% p.title | html %]"></a>
-        [% END %]
-        </p>
-    [% END %]
+<div class="tablewrapper">
+    <div id="front-howto">
+        [% INCLUDE 'index-steps.html' %]
+    </div>
 
-    [% IF probs.size %]
-        <ul id="nearby_lists">
-        [% FOREACH p IN probs %]
-            <li>
-                <a href="/report/[% p.id %]">[% p.title | html %]</a>
-                <small>[% prettify_dt( p.confirmed, 1 ) %]</small>
-            </li>    
-        [% END %]
-        </ul>
-    [% END %]
+    [% INCLUDE 'front/recent.html' %]
 </div>
-[% END %]
 
-[% INCLUDE 'footer.html' %]
+[% INCLUDE 'footer.html' pagefooter = 'yes' %]
diff --git a/templates/web/base/report/_item.html b/templates/web/base/report/_item.html
new file mode 100644
index 000000000..6ac18b534
--- /dev/null
+++ b/templates/web/base/report/_item.html
@@ -0,0 +1,30 @@
+<li>
+<a class="text" href="[% c.uri_for('/report', problem.id ) %]">
+    [% IF problem.photo;
+        photo = problem.get_photo_params
+    %]
+        <img class="img" height="60" width="90" src="[% photo.url_fp %]" alt="">
+    [% END %]
+        <h4>[% problem.title | html %]</h4>
+        <small>
+            [%- IF c.cobrand.moniker != 'fixamingata' %] [%# Default: %]
+                [%- prettify_dt( problem.confirmed, 1 ) %]
+            [%- ELSE %] [%# Swedish cobrand fixamingata: %]
+                [%- prettify_dt( problem.confirmed) %]
+            [%- END %]
+            [%- IF dist %], [% dist %]km[% END %]
+            [%- IF NOT exclude_lastupdate AND problem.confirmed != problem.lastupdate AND problem.whensent != problem.lastupdate %],
+                [% tprintf(loc('last updated %s'), prettify_dt( problem.lastupdate, 1 ) ) %]
+            [%- END %]
+        [% IF include_sentinfo %]
+            [% IF problem.bodies_str_ids.size > 1 %] [% loc('(sent to both)') %]
+            [% ELSIF problem.bodies_str_ids.size == 0 %] [% loc('(not sent to council)') %]
+            [% END %]
+        [% END %]
+        [% IF NOT no_fixed AND problem.is_fixed %]
+            [% loc('(fixed)') %]
+        [% ELSIF NOT no_fixed AND problem.is_closed %]
+            [% loc('(closed)') %]
+        [% END %]</small>
+</a>
+</li>
diff --git a/templates/web/base/reports/_list-entry.html b/templates/web/base/reports/_list-entry.html
index 445a5315f..4c0abd337 100755
--- a/templates/web/base/reports/_list-entry.html
+++ b/templates/web/base/reports/_list-entry.html
@@ -1,6 +1 @@
-<li><a href="[% c.uri_for('/report/' _ problem.id) %]">[% problem.title | html %]</a>
-    [% IF problem.bodies_str_ids.size > 1 %] <small>[% loc('(sent to both)') %]</small> [% END %]
-    [% IF c.cobrand.moniker != 'emptyhomes' %]
-        [% IF problem.bodies_str_ids.size == 0 %] <small>[% loc('(not sent to council)') %]</small> [% END %]
-    [% END %]
-</li>
+[% INCLUDE 'report/_item.html' include_sentinfo = 1 %]