From 0ae59f7314fe161245462b8cabba5d4e1988853f Mon Sep 17 00:00:00 2001
From: Matthew Somerville <matthew@mysociety.org>
Date: Tue, 6 Oct 2015 14:10:43 +0100
Subject: Improve item list CSS.

Generally, a rewrite of issue-list-a to item-list--reports or
item-list--wards (two different uses) and issue-list to
item-list--updates, with subsequent renames/changes to children.

For those cobrands using a different list showing a pin icon, use
item-list__item--with-pin to stop needing to override existing classes.

Fix a variety of niggling issues e.e ward list display, or overloading
of the .text class.
---
 perllib/FixMyStreet/TestMech.pm                    |   4 +-
 templates/web/base/around/on_map_list_items.html   |   2 +-
 templates/web/base/around/tabbed_lists.html        |   2 +-
 templates/web/base/front/recent.html               |   2 +-
 templates/web/base/my/_problem-list.html           |   4 +-
 templates/web/base/my/my.html                      |   2 +-
 templates/web/base/report/_item.html               |   4 +-
 templates/web/base/reports/_problem-list.html      |   4 +-
 templates/web/bromley/front/_list-entry.html       |   1 +
 templates/web/bromley/report/_item.html            |   4 +-
 templates/web/fixamingata/front/recent.html        |   2 +-
 .../web/fixmybarangay/around/tabbed_lists.html     |   2 +-
 .../web/fixmybarangay/report/_message_manager.html |   2 +-
 .../report/_item-with-pin.html                     |   2 +-
 templates/web/fixmystreet/report/update.html       |  10 +-
 templates/web/fixmystreet/reports/_ward-list.html  |  10 +-
 templates/web/greenwich/front/_list-entry.html     |   1 +
 templates/web/oxfordshire/front/_list-entry.html   |   1 +
 templates/web/zerotb/around/on_map_list_items.html |   2 +-
 templates/web/zerotb/around/tabbed_lists.html      |   2 +-
 templates/web/zerotb/report/_item.html             |   4 +-
 templates/web/zurich/report/_item.html             |   4 +-
 templates/web/zurich/report/updates.html           |   6 +-
 templates/web/zurich/reports/index.html            |   2 +-
 web/cobrands/bromley/base.scss                     |   4 +
 web/cobrands/bromley/layout.scss                   |   5 +-
 web/cobrands/eastsussex/base.scss                  |  10 +-
 web/cobrands/greenwich/base.scss                   |   2 +-
 web/cobrands/greenwich/layout.scss                 |   2 +-
 web/cobrands/hart/base.scss                        |  10 +-
 web/cobrands/hart/hart.scss                        |   2 +-
 web/cobrands/oxfordshire/layout.scss               |  10 +-
 web/cobrands/sass/_base.scss                       | 161 +++++++++------------
 web/cobrands/sass/_report_list_pins.scss           | 104 +++++++------
 web/cobrands/zurich/base.scss                      |  24 ++-
 web/js/moderate.js                                 |   2 +-
 36 files changed, 193 insertions(+), 222 deletions(-)
 create mode 100755 templates/web/bromley/front/_list-entry.html
 create mode 100755 templates/web/greenwich/front/_list-entry.html
 create mode 100755 templates/web/oxfordshire/front/_list-entry.html

diff --git a/perllib/FixMyStreet/TestMech.pm b/perllib/FixMyStreet/TestMech.pm
index 1035a47ba..cc5f9dd71 100644
--- a/perllib/FixMyStreet/TestMech.pm
+++ b/perllib/FixMyStreet/TestMech.pm
@@ -402,7 +402,7 @@ sub extract_update_metas {
 
     my $result = scraper {
         process 'div#updates div.problem-update p em', 'meta[]', 'TEXT';
-        process '.update-text .meta-2', 'meta[]', 'TEXT';
+        process '.item-list__update-text .meta-2', 'meta[]', 'TEXT';
     }
     ->scrape( $mech->response );
 
@@ -423,7 +423,7 @@ sub extract_problem_list {
     my $mech = shift;
 
     my $result = scraper {
-        process 'ul.issue-list-a li a h4', 'problems[]', 'TEXT';
+        process 'ul.item-list--reports li a h4', 'problems[]', 'TEXT';
     }->scrape( $mech->response );
 
     return $result->{ problems } || [];
diff --git a/templates/web/base/around/on_map_list_items.html b/templates/web/base/around/on_map_list_items.html
index 90f836fc8..b7257030d 100644
--- a/templates/web/base/around/on_map_list_items.html
+++ b/templates/web/base/around/on_map_list_items.html
@@ -8,7 +8,7 @@
         [% INCLUDE 'reports/_list-entry.html' %]
     [% END %]
 [% ELSE %]
-    <li class="empty">
+    <li class="item-list__item item-list__item--empty">
         <p>[% loc('There are no reports to show.') %]</p>
     </li>
 [% END %]
diff --git a/templates/web/base/around/tabbed_lists.html b/templates/web/base/around/tabbed_lists.html
index 2828027e2..b0d46444d 100755
--- a/templates/web/base/around/tabbed_lists.html
+++ b/templates/web/base/around/tabbed_lists.html
@@ -1,5 +1,5 @@
 [% INCLUDE "reports/_list-filters.html" %]
 
-<ul id="current" class="issue-list-a">
+<ul id="current" class="item-list item-list--reports">
     [% INCLUDE "around/on_map_list_items.html" %]
 </ul>
diff --git a/templates/web/base/front/recent.html b/templates/web/base/front/recent.html
index de74f3326..cb83c51b8 100644
--- a/templates/web/base/front/recent.html
+++ b/templates/web/base/front/recent.html
@@ -13,7 +13,7 @@
     </h2>
 
     <section class="full-width">
-        <ul class="issue-list-a">
+        <ul class="item-list item-list--reports item-list--front-page">
           [% FOREACH problem IN recent_photos %]
             [% INCLUDE 'front/_list-entry.html' %]
           [% END %]
diff --git a/templates/web/base/my/_problem-list.html b/templates/web/base/my/_problem-list.html
index 4b5fc73d6..e74dd25ec 100644
--- a/templates/web/base/my/_problem-list.html
+++ b/templates/web/base/my/_problem-list.html
@@ -1,10 +1,10 @@
-<ul class='issue-list-a full-width'>
+<ul class='item-list item-list--reports full-width'>
     [% IF problems.size %]
         [% FOREACH problem = problems %]
             [% INCLUDE 'reports/_list-entry.html' no_fixed = 1 %]
         [% END %]
     [% ELSE %]
-        <li class="empty">
+        <li class="item-list__item item-list__item--empty">
             <p>[% loc('There are no reports to show.') %]</p>
         </li>
     [% END %]
diff --git a/templates/web/base/my/my.html b/templates/web/base/my/my.html
index 91cf40b68..9be4edfca 100644
--- a/templates/web/base/my/my.html
+++ b/templates/web/base/my/my.html
@@ -43,7 +43,7 @@
             pager = updates_pager,
             param = 'u'
         %]
-        <ul class="issue-list full-width">
+        <ul class="item-list item-list--updates full-width">
     [% END %]
 
     <li>&ldquo;[% u.text | html %]&rdquo;
diff --git a/templates/web/base/report/_item.html b/templates/web/base/report/_item.html
index 2fcfa9fb8..d79a4e9f3 100644
--- a/templates/web/base/report/_item.html
+++ b/templates/web/base/report/_item.html
@@ -1,5 +1,5 @@
-<li>
-<a class="text" href="[% c.uri_for('/report', problem.id ) %]">
+<li class="item-list__item item-list--reports__item [% item_extra_class %]">
+<a href="[% c.uri_for('/report', problem.id ) %]">
     [% IF problem.photo;
         photo = problem.get_photo_params
     %]
diff --git a/templates/web/base/reports/_problem-list.html b/templates/web/base/reports/_problem-list.html
index a4c78877a..4da9e1bb6 100644
--- a/templates/web/base/reports/_problem-list.html
+++ b/templates/web/base/reports/_problem-list.html
@@ -5,13 +5,13 @@
 </section>
 
 [% BLOCK column %]
-    <ul class="issue-list-a">
+    <ul class="item-list item-list--reports">
         [% IF problems %]
             [% FOREACH problem IN problems %]
                 [% INCLUDE 'reports/_list-entry.html' include_sentinfo = 1 include_lastupdate = 1 %]
             [% END %]
         [% ELSE %]
-            <li class="empty">
+            <li class="item-list__item item-list__item--empty">
                 <p>[% loc('There are no reports to show.') %]</p>
             </li>
         [% END %]
diff --git a/templates/web/bromley/front/_list-entry.html b/templates/web/bromley/front/_list-entry.html
new file mode 100755
index 000000000..046c3b97f
--- /dev/null
+++ b/templates/web/bromley/front/_list-entry.html
@@ -0,0 +1 @@
+[% INCLUDE 'report/_item.html' no_fixed = 1 item_extra_class = 'item-list__item--with-pin' %]
diff --git a/templates/web/bromley/report/_item.html b/templates/web/bromley/report/_item.html
index 6398f698e..3bd8a8686 100644
--- a/templates/web/bromley/report/_item.html
+++ b/templates/web/bromley/report/_item.html
@@ -1,5 +1,5 @@
-<li class="[% c.cobrand.pin_colour(problem) %]">
-<a class="[% problem.category %] text" href="[% c.uri_for('/report', problem.id ) %]">
+<li class="item-list__item item-list--reports__item item-list__item--with-pin [% c.cobrand.pin_colour(problem) %]">
+<a class="[% problem.category %]" href="[% c.uri_for('/report', problem.id ) %]">
     [% IF problem.photo;
         photo = problem.get_photo_params
     %]
diff --git a/templates/web/fixamingata/front/recent.html b/templates/web/fixamingata/front/recent.html
index bfe35832e..255882f41 100644
--- a/templates/web/fixamingata/front/recent.html
+++ b/templates/web/fixamingata/front/recent.html
@@ -20,7 +20,7 @@
         </h2>
 
         <section class="full-width">
-            <ul class="issue-list-a">
+            <ul class="item-list item-list--reports">
             [% FOREACH problem IN recent_photos %]
             [% INCLUDE 'report/_item.html', no_fixed = 1 %]
             [% END %]
diff --git a/templates/web/fixmybarangay/around/tabbed_lists.html b/templates/web/fixmybarangay/around/tabbed_lists.html
index 342b03f0e..f2f257b03 100644
--- a/templates/web/fixmybarangay/around/tabbed_lists.html
+++ b/templates/web/fixmybarangay/around/tabbed_lists.html
@@ -9,7 +9,7 @@ IF allow_creation %]
 </menu>
 [% END %]
         
-<ul id="current" class="issue-list-a tab">
+<ul id="current" class="item-list item-list--reports tab">
     [% INCLUDE "around/on_map_list_items.html" %]
 </ul>
 
diff --git a/templates/web/fixmybarangay/report/_message_manager.html b/templates/web/fixmybarangay/report/_message_manager.html
index 3845feeef..e937066ff 100644
--- a/templates/web/fixmybarangay/report/_message_manager.html
+++ b/templates/web/fixmybarangay/report/_message_manager.html
@@ -16,7 +16,7 @@
 	</div>
 [% END %]
 
-<ul id="message_manager" class="issue-list-a tab" style="display: none">
+<ul id="message_manager" class="item-list item-list--reports tab" style="display: none">
 	<li id="mm-admin-buttons">
 		[% IF problem.id %]
 			<a style="float:left" id="mm-link-to-toggle-archive" href="#" title="show the message(s) associated with this report">show message for <b>this</b> report</a>
diff --git a/templates/web/fixmystreet-uk-councils/report/_item-with-pin.html b/templates/web/fixmystreet-uk-councils/report/_item-with-pin.html
index cd70410d3..b36dac3b6 100644
--- a/templates/web/fixmystreet-uk-councils/report/_item-with-pin.html
+++ b/templates/web/fixmystreet-uk-councils/report/_item-with-pin.html
@@ -1,4 +1,4 @@
-<li class="[% c.cobrand.pin_colour(problem) %]">
+<li class="item-list__item item-list__item--with-pin [% c.cobrand.pin_colour(problem) %]">
     <a href="[% c.uri_for('/report', problem.id ) %]" class="[% problem.category %]">
         <h3>[% problem.title | html %]</h3>
         <p>Reported [%- prettify_dt( problem.confirmed, 1 ) %]</p>
diff --git a/templates/web/fixmystreet/report/update.html b/templates/web/fixmystreet/report/update.html
index 847277dfd..66e698606 100644
--- a/templates/web/fixmystreet/report/update.html
+++ b/templates/web/fixmystreet/report/update.html
@@ -3,9 +3,9 @@
 [% IF loop.first %]
 <section class="full-width">
     <h4 class="static-with-rule">[% loc('Updates') %]</h4>
-    <ul class="issue-list">
+    <ul class="item-list item-list--updates">
 [% END %]
-        <li class="issue">
+        <li class="item-list__item item-list__item--updates">
           [% IF moderating; original_update = update.moderation_original_data %]
             <form method="post" action="/moderate/report/[% problem.id %]/update/[% update.id %]">
                 <input type="button" class="btn moderate moderate-display" value="moderate">
@@ -22,14 +22,14 @@
                     [% END %]
                 </div>
           [% END %]
-            <div class="update-wrap">
+            <div class="item-list__update-wrap">
             [% IF update.whenanswered %]
-                <div class="update-text">
+                <div class="item-list__update-text">
                     <p class="meta-2"> [% INCLUDE meta_line %] </p>
                 </div>
             [% ELSE %]
                 [% INCLUDE 'report/photo.html' object=update %]
-                <div class="update-text">
+                <div class="item-list__update-text">
                     <div class="moderate-display">
                         [% add_links( update.text ) | html_para %]
                     </div>
diff --git a/templates/web/fixmystreet/reports/_ward-list.html b/templates/web/fixmystreet/reports/_ward-list.html
index 5e82a93cc..b7e19ffc2 100755
--- a/templates/web/fixmystreet/reports/_ward-list.html
+++ b/templates/web/fixmystreet/reports/_ward-list.html
@@ -2,10 +2,12 @@
 <section id="council_wards" class="hidden-js">
 <h2>[% ward_text %]</h2>
     <p>[% loc('Follow a ward link to view only reports within that ward.') %]</p>
-    <ul class="issue-list-a full-width">
-        [% FOR child IN children.values.sort('name') %]
-        <li><a href="[% child.url %]"><span class="text">[% child.name %]</span></a></li>
-        [% END %]
+    <ul class="item-list item-list--wards full-width">
+      [% FOR child IN children.values.sort('name') %]
+        <li class="item-list__item item-list--wards__item">
+            <a href="[% child.url %]">[% child.name %]</a>
+        </li>
+      [% END %]
     </ul>
 </section>
 [% END %]
diff --git a/templates/web/greenwich/front/_list-entry.html b/templates/web/greenwich/front/_list-entry.html
new file mode 100755
index 000000000..046c3b97f
--- /dev/null
+++ b/templates/web/greenwich/front/_list-entry.html
@@ -0,0 +1 @@
+[% INCLUDE 'report/_item.html' no_fixed = 1 item_extra_class = 'item-list__item--with-pin' %]
diff --git a/templates/web/oxfordshire/front/_list-entry.html b/templates/web/oxfordshire/front/_list-entry.html
new file mode 100755
index 000000000..046c3b97f
--- /dev/null
+++ b/templates/web/oxfordshire/front/_list-entry.html
@@ -0,0 +1 @@
+[% INCLUDE 'report/_item.html' no_fixed = 1 item_extra_class = 'item-list__item--with-pin' %]
diff --git a/templates/web/zerotb/around/on_map_list_items.html b/templates/web/zerotb/around/on_map_list_items.html
index 2cc7251e4..5c7822b48 100644
--- a/templates/web/zerotb/around/on_map_list_items.html
+++ b/templates/web/zerotb/around/on_map_list_items.html
@@ -8,7 +8,7 @@
         [% INCLUDE 'report/_item.html' %]
     [% END %]
 [% ELSE %]
-    <li class="empty">
+    <li class="item-list__item item-list__item--empty">
         <p>[% loc('No clinics found.') %]</p>
     </li>
 [% END %]
diff --git a/templates/web/zerotb/around/tabbed_lists.html b/templates/web/zerotb/around/tabbed_lists.html
index 76c0f71f8..090f03be0 100644
--- a/templates/web/zerotb/around/tabbed_lists.html
+++ b/templates/web/zerotb/around/tabbed_lists.html
@@ -1,3 +1,3 @@
-<ul id="current" class="issue-list-a tab">
+<ul id="current" class="item-list item-list--reports tab">
     [% INCLUDE "around/on_map_list_items.html" %]
 </ul>
diff --git a/templates/web/zerotb/report/_item.html b/templates/web/zerotb/report/_item.html
index 92fb8e8d8..e12c9e1fa 100644
--- a/templates/web/zerotb/report/_item.html
+++ b/templates/web/zerotb/report/_item.html
@@ -1,5 +1,5 @@
-<li>
-<a class="text" href="[% c.uri_for('/report', problem.id ) %]">
+<li class="item-list__item item-list--reports__item">
+<a href="[% c.uri_for('/report', problem.id ) %]">
         <h4>[% problem.title | html %]</h4>
 </a>
 </li>
diff --git a/templates/web/zurich/report/_item.html b/templates/web/zurich/report/_item.html
index 22b39a2c8..9ba5e6fcb 100644
--- a/templates/web/zurich/report/_item.html
+++ b/templates/web/zurich/report/_item.html
@@ -1,5 +1,5 @@
-<li>
-<a class="text" href="[% c.uri_for('/report', problem.id ) %]">
+<li class="item-list__item item-list--reports__item">
+<a href="[% c.uri_for('/report', problem.id ) %]">
     [% IF problem.state != 'unconfirmed' AND problem.photo AND c.cobrand.allow_photo_display(problem);
         photo = problem.get_photo_params
     %]
diff --git a/templates/web/zurich/report/updates.html b/templates/web/zurich/report/updates.html
index cb7644694..1e835aab7 100644
--- a/templates/web/zurich/report/updates.html
+++ b/templates/web/zurich/report/updates.html
@@ -1,9 +1,9 @@
 [% IF problem.state == 'fixed - council' OR problem.state == 'closed' %]
     <h4 class="static-with-rule">[% loc('Updates') %]</h4>
-    <ul class="issue-list">
+    <ul class="item-list item-list--updates">
         <li>
-            <div class="update-wrap">
-                <div class="update-text">
+            <div class="item-list__update-wrap">
+                <div class="item-list__update-text">
                     <p class="meta-2">[% prettify_dt( problem.lastupdate, 'zurich' ) %]</p>
                     [%# XXX following should honour zurich_closed_states instead? %]
                     [% IF problem.state == 'fixed - council'
diff --git a/templates/web/zurich/reports/index.html b/templates/web/zurich/reports/index.html
index 0ece1ca2c..fd0efcf94 100755
--- a/templates/web/zurich/reports/index.html
+++ b/templates/web/zurich/reports/index.html
@@ -15,7 +15,7 @@
 
 <section class="full-width">
   [% IF problems.0 %]
-    <ul class="issue-list-a">
+    <ul class="item-list item-list--reports">
       [% FOREACH problem IN problems.0 %]
         [% INCLUDE 'reports/_list-entry.html' %]
       [% END %]
diff --git a/web/cobrands/bromley/base.scss b/web/cobrands/bromley/base.scss
index 7193104f9..418958ab1 100644
--- a/web/cobrands/bromley/base.scss
+++ b/web/cobrands/bromley/base.scss
@@ -130,6 +130,10 @@ a:active {
   background-color: darken(#f5f5f5, 10%);
 }
 
+.item-list--reports__item a {
+    line-height: 2;
+}
+
 //////////////////////////////////////////////////////////////////////////////
 // Bromley's Mobile-First styles
 //////////////////////////////////////////////////////////////////////////////
diff --git a/web/cobrands/bromley/layout.scss b/web/cobrands/bromley/layout.scss
index cd6c174db..0297f08c3 100644
--- a/web/cobrands/bromley/layout.scss
+++ b/web/cobrands/bromley/layout.scss
@@ -98,8 +98,9 @@ h1.main {
 // We have slightly different content in our lists of issues to what
 // reports_list.scss expects, so we need to add back some padding it removes.
 // This stops the pin icon being underneath the text.
-.issue-list-a li .text {
-  padding-left: 4em;
+.item-list__item--with-pin a {
+  padding: 0;
+  padding-left: 3em;
 }
 
 // Because we've changed the page background, the footer looks a bit rubbish
diff --git a/web/cobrands/eastsussex/base.scss b/web/cobrands/eastsussex/base.scss
index 9141b066b..1394d397f 100644
--- a/web/cobrands/eastsussex/base.scss
+++ b/web/cobrands/eastsussex/base.scss
@@ -26,12 +26,10 @@ a, a:visited {
     }
 }
 
-.issue-list-a {
-  li {
-      color:#666;
-      a {
-          color:#666;
-      }
+.item-list--reports__item {
+  color: #666;
+  a {
+    color: #666;
   }
 }
 
diff --git a/web/cobrands/greenwich/base.scss b/web/cobrands/greenwich/base.scss
index 3d8dc29ba..af9df60c7 100644
--- a/web/cobrands/greenwich/base.scss
+++ b/web/cobrands/greenwich/base.scss
@@ -29,7 +29,7 @@ body.frontpage #site-logo,
     background-size: cover;
 }
 
-.issue-list-a li, #user-meta p, #front-main #postcodeForm {
+.item-list--reports__item, #user-meta p, #front-main #postcodeForm {
     background-color: $greenwich_light_grey;
 }
 
diff --git a/web/cobrands/greenwich/layout.scss b/web/cobrands/greenwich/layout.scss
index 894b82a33..eff3f854e 100644
--- a/web/cobrands/greenwich/layout.scss
+++ b/web/cobrands/greenwich/layout.scss
@@ -72,7 +72,7 @@ body.frontpage {
         top: -9em;
     }
 
-    .issue-list-a li {
+    .item-list--reports__item {
         border-left: solid 4px $primary;
     }
 
diff --git a/web/cobrands/hart/base.scss b/web/cobrands/hart/base.scss
index edc692130..306098056 100644
--- a/web/cobrands/hart/base.scss
+++ b/web/cobrands/hart/base.scss
@@ -12,12 +12,10 @@ a, a:visited {
     }
 }
 
-.issue-list-a {
-  li {
-      color:#666;
-      a {
-          color:#666;
-      }
+.item-list--reports__item {
+  color: #666;
+  a {
+    color: #666;
   }
 }
 
diff --git a/web/cobrands/hart/hart.scss b/web/cobrands/hart/hart.scss
index 0823a4bc5..cdb3c1fe2 100644
--- a/web/cobrands/hart/hart.scss
+++ b/web/cobrands/hart/hart.scss
@@ -456,7 +456,7 @@ body.mappage .hart-footer-wrapper {
     }
 }
 
-.issue-list-a li .text small {
+.item-list--reports__item small {
     display: inline;
 }
 
diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss
index 04890b1aa..d6c009019 100644
--- a/web/cobrands/oxfordshire/layout.scss
+++ b/web/cobrands/oxfordshire/layout.scss
@@ -266,7 +266,7 @@ body.mappage {
   }
 }
 
-.issue-list-a {
+.item-list--reports {
     li:after {
         background-color: $oxfordshire_mid_grey_green;
     }
@@ -278,21 +278,21 @@ body.mappage {
 
 h4.static-with-rule {
   margin-top: 1em; // down from default 2em, avoid extra space between heading and .council_info_box
-  margin-bottom: 0; // no space between this and the .issue-list items
+  margin-bottom: 0; // no space between this and the .item-list items
   background: transparent; // rather than light grey
   padding: 0.75em 1em * (1/0.875); // compensate for 0.875 font-size
 }
 
-.issue-list li {
+.item-list--updates li {
   background: transparent;
   margin-top: 0; // no space between list items
 
-  // Replicate .issue-list-a styling, a bit
+  // Replicate .item-list--reports styling, a bit
   border-top: 1px solid $oxfordshire_mid_grey_green;
   padding: 1em 1em 1em 0;
   margin-left: 1em;
 
-  .update-wrap .update-text > :last-child {
+  .item-list__update-text > :last-child {
     margin-bottom: 0;
   }
 
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 301f6fdce..0788a99ed 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -838,107 +838,86 @@ input.final-submit {
   }
 }
 
-.issue-list{
+.item-list {
   margin: 0 0 1em;
   padding: 0;
   border-bottom: 0.25em solid $primary;
-  li{
-    list-style: none;
-    background-color: #f6f6f6;
-    margin: 0.25em 0 0;
-    padding: 0.5em 1em;
-    display:block;
-    .update-wrap {
-      @include clearfix;
-    }
-    .update-text p {
-      margin-bottom: 0.5em;
-    }
-    .update-img {
-      float: $right;
-      margin: flip(0.5em 0 0.5em 1em, 0.5em 1em 0.5em 0); // gutter between text and floated image
-    }
+  .update-img {
+    float: $right;
+    margin: flip(0.5em 0 0.5em 1em, 0.5em 1em 0.5em 0); // gutter between text and floated image
   }
 }
 
-.issue-list-a {
-  margin: 0 0 1em;
+.item-list__item {
+  list-style: none;
+  background-color: #f6f6f6;
+  margin: 0.25em 0 0;
+  padding: 0.5em 1em;
+  display: block;
+}
+
+.item-list__update-wrap {
+  @include clearfix;
+}
+
+.item-list__update-text p {
+  margin-bottom: 0.5em;
+}
+
+.item-list__item--link {
   padding: 0;
-  border-bottom: 0.25em solid $primary;
-  li {
-      list-style: none;
-      padding: 0;
-      margin: 0.25em 0 0;
-      /* see note below about this */
-      display:table;
-      background-color: #f6f6f6;
-      color:#222222;
-      width:100%;
-      &:hover {
-        text-decoration:none;
-        color:#222222;
-        background-color:#e6e6e6;
-      }
-      a {
-          color:#222222;
-      }
-      a:hover, a:focus {
-          color:#222222;
-          background-color:#e6e6e6;
-          text-decoration: none;
-      }
-      .text {
-        /* this is and the display:table above are required otherwise
-           on iphone the rows end up being slightly wider than the screen */
-        display: table-cell;
-        width: 100%;
-        vertical-align:top;
-        padding: flip(0 0 0 1em, 0 1em 0 0);
-        .img {
-          width: 90px;
-          float: $right;
-          height:auto;
-        }
-        h4 {
-          padding-#{$right}: 1em;
-          padding-top: 0.25em;
-          margin:0;
-        }
-        small {
-          color:#666;
-          display: block;
-          padding-#{$right}: 1em;
-          padding-top: 0.25em;
-          padding-bottom: 0.25em;
-        }
-      }
-    >p {
-      margin: 0.25em 0 0;
-      padding: 0.5em 1em;
-      background-color: #f6f6f6;
-    }
+  a {
+    color: #222222;
+    display: block;
+    padding: 0.5em 1em;
+  }
+  a:hover, a:focus {
+    background-color: #e6e6e6;
+    text-decoration: none;
   }
 }
 
-//display:table fixes
-.ie6, .ie7 {
-  .issue-list-a {
-    overflow:hidden;
-    li {
-      clear:both;
-      width:100%;
-      display:block;
-      overflow:hidden;
-      .text {
-        float: $left;
-      }
-    }
+.item-list--wards__item {
+  @extend .item-list__item--link;
+}
+
+.item-list--reports__item {
+  @extend .item-list__item--link;
+  a {
+    @include clearfix;
+    padding: flip(0 0 0 1em, 0 1em 0 0);
+  }
+  .img {
+    width: 90px;
+    float: $right;
+    height: auto;
+    margin-#{$left}: 1em;
   }
+  h4 {
+    padding-top: 0.25em;
+    margin: 0;
+  }
+  small {
+    color: #666;
+    display: block;
+    padding: 0.25em 0;
+  }
+}
+
+.item-list__item--empty p {
+  margin: 0;
 }
-.ie6 .issue-list-a li a {
-  height:5.5em;
+
+.item-list--front-page {
+  border-bottom: none;
+}
+
+.ie6 .item-list--reports__item {
+  a {
+    height: 5.5em;
+  }
   .img {
-    height:60px;
+    height: 60px;
   }
 }
 
@@ -1571,12 +1550,6 @@ table.nicetable {
   }
 }
 
-#front-recently {
-  .issue-list-a {
-    border-bottom:none;
-  }
-}
-
 #alerts {
     ul {
         margin-bottom: 1em;
diff --git a/web/cobrands/sass/_report_list_pins.scss b/web/cobrands/sass/_report_list_pins.scss
index f1948775b..3432e2bbf 100644
--- a/web/cobrands/sass/_report_list_pins.scss
+++ b/web/cobrands/sass/_report_list_pins.scss
@@ -1,51 +1,39 @@
-.issue-list-a {
-  li {
-    position: relative;
-    margin: 0;
-    background: none;
-
-    a {
-      display: block;
-      padding: 1em;
-      padding-#{$left}: 4em;
-      border-#{$left}: solid 1em transparent;
-      background: transparent url(/i/pin-yellow-small.png) no-repeat $left center;
-    }
-
-    &.yellow a {
-        background-image: url(/i/pin-yellow-small.png);
-    }
-    &.green a {
-        background-image: url(/i/pin-green-small.png);
-    }
-    &.red a {
-        background-image: url(/i/pin-red-small.png);
-    }
-    &.grey a {
-        background-image: url(/i/pin-grey-small.png);
-    }
+.item-list__item--with-pin {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  background: none;
 
-    &.empty p {
-        display: block;
-        padding: 1em;
-        font-size: 1em;
-        text-align: center;
-    }
+  a {
+    display: block;
+    padding: 1em;
+    padding-#{$left}: 4em;
+    border-#{$left}: solid 1em transparent;
+    background: transparent url(/i/pin-yellow-small.png) no-repeat $left center;
+  }
 
-    &:after {
-      content: "";
-      display: block;
-      height: 1px;
-      position: absolute;
-      #{$left}: 4em;
-      #{$right}: 0;
-      bottom: 0;
-      background-color: #e5e5e5;
-    }
+  &.yellow a {
+      background-image: url(/i/pin-yellow-small.png);
+  }
+  &.green a {
+      background-image: url(/i/pin-green-small.png);
+  }
+  &.red a {
+      background-image: url(/i/pin-red-small.png);
+  }
+  &.grey a {
+      background-image: url(/i/pin-grey-small.png);
+  }
 
-    &.empty:after {
-        #{$left}: 0;
-    }
+  &:after {
+    content: "";
+    display: block;
+    height: 1px;
+    position: absolute;
+    #{$left}: 4em;
+    #{$right}: 0;
+    bottom: 0;
+    background-color: #e5e5e5;
   }
 
   h3, p {
@@ -63,6 +51,24 @@
   }
 }
 
+.item-list__item--empty {
+  background: none;
+  color: #777;
+  p {
+    padding: 1em;
+    text-align: center;
+  }
+}
+
+/* The front page is using the parent _item.html template */
+body.frontpage {
+    .item-list__item--with-pin a {
+        padding: 0;
+        padding-#{$left}: 3em;
+    }
+}
+
+
 .big-green-banner {
   display: none; // hide the empty banner by default
 
@@ -101,11 +107,3 @@
     margin-#{$left}: 0.2em;
   }
 }
-
-body.frontpage {
-    .issue-list-a {
-        li .text {
-            padding-#{$left}: 3em;
-        }
-    }
-}
diff --git a/web/cobrands/zurich/base.scss b/web/cobrands/zurich/base.scss
index 8f6cca96f..e607f80a3 100644
--- a/web/cobrands/zurich/base.scss
+++ b/web/cobrands/zurich/base.scss
@@ -98,24 +98,18 @@ h4.static-with-rule {
     padding-right: 0;
     border-top: 0.25em solid #e5e5e5;
 }
-.issue-list {
+.item-list {
     border-bottom: none;
-    li {
-        padding-left: 0;
-        padding-right: 0;
-        background: none;
-    }
+}
+.item-list__item {
+    padding-left: 0;
+    padding-right: 0;
+    background: none;
 }
 
-.issue-list-a {
-    border-bottom: none;
-    li {
-        background: none;
-        .text {
-            .img {
-                padding-right: 1em;
-            }
-        }
+.item-list--reports__item {
+    .img {
+        padding-right: 1em;
     }
 }
 
diff --git a/web/js/moderate.js b/web/js/moderate.js
index dd366df3f..0be3cca8d 100644
--- a/web/js/moderate.js
+++ b/web/js/moderate.js
@@ -38,5 +38,5 @@ function setup_moderation (elem, word) {
 
 $(function () {
     setup_moderation( $('.problem-header'), 'problem' );
-    setup_moderation( $('.issue-list .issue'), 'update' );
+    setup_moderation( $('.item-list__item--updates'), 'update' );
 });
-- 
cgit v1.2.3