Merge branch '1141-list-css-part-4'

11 files changed, 150 insertions, 184 deletions

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 7cd7306cc..2f535e398 100644
--- a/web/cobrands/hart/hart.scss
+++ b/web/cobrands/hart/hart.scss
@@ -450,7 +450,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;
     }
 }