Add state/category filters to base cobrand.

This removes the on map/nearby tabs, replacing them with one combined
list. The styling is moved to the base, so that it is used on mobile
too. A closed option is added to the existing dropdown, and the
base/fixmystreet my templates are also combined. Fixes #1141.

7 files changed, 119 insertions, 142 deletions

diff --git a/web/cobrands/bromley/layout.scss b/web/cobrands/bromley/layout.scss
index 3fe542695..cd6c174db 100644
--- a/web/cobrands/bromley/layout.scss
+++ b/web/cobrands/bromley/layout.scss
@@ -1,8 +1,6 @@
 @import "_colours";
 @import "../sass/layout";
-
-// Import the new filters/list styling
-@import "../sass/_report_list.scss";
+@import "../sass/report_list_pins";
 
 // Alter the logo and the header on every page *but* the map page. On the map
 // page it stays small like in base.css
diff --git a/web/cobrands/greenwich/layout.scss b/web/cobrands/greenwich/layout.scss
index df5437968..894b82a33 100644
--- a/web/cobrands/greenwich/layout.scss
+++ b/web/cobrands/greenwich/layout.scss
@@ -1,7 +1,7 @@
 @import "_colours";
 @import "_fonts";
 @import "../sass/layout";
-@import "../sass/report_list";
+@import "../sass/report_list_pins";
 
 $fixed_page_width: 990px;
 
diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss
index 4dc3efe4e..04890b1aa 100644
--- a/web/cobrands/oxfordshire/layout.scss
+++ b/web/cobrands/oxfordshire/layout.scss
@@ -1,6 +1,6 @@
 @import "_colours";
 @import "../sass/layout";
-@import "../sass/report_list";
+@import "../sass/report_list_pins";
 
 body, body a {
   font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 0df8ad01b..301f6fdce 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -7,6 +7,7 @@ $image-sprite: '/cobrands/fixmystreet/images/sprite.png' !default;
 $menu-image: 'menu-white' !default;
 
 @import "_mixins";
+@import "_report_list";
 
 body {
   font-family: $body-font;
@@ -865,9 +866,8 @@ input.final-submit {
   padding: 0;
   border-bottom: 0.25em solid $primary;
   li {
-    list-style: none;
-    margin:0;
-    padding:0;
+      list-style: none;
+      padding: 0;
       margin: 0.25em 0 0;
       /* see note below about this */
       display:table;
@@ -882,7 +882,7 @@ input.final-submit {
       a {
           color:#222222;
       }
-      a:hover {
+      a:hover, a:focus {
           color:#222222;
           background-color:#e6e6e6;
           text-decoration: none;
diff --git a/web/cobrands/sass/_report_list.scss b/web/cobrands/sass/_report_list.scss
index 442072083..8d34bfd77 100644
--- a/web/cobrands/sass/_report_list.scss
+++ b/web/cobrands/sass/_report_list.scss
@@ -1,6 +1,3 @@
-// You should @import this file in a cobrand's layout.scss if it's using
-// the new-style combined report list with category/status filters.
-
 .report-list-filters {
   padding: 1em 1em 0;
   margin-bottom: 0.5em;
@@ -33,129 +30,3 @@
     max-width: 13em;
   }
 }
-
-.issue-list-a {
-  margin-#{$left}: 0;
-
-  li {
-    list-style: none;
-    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;
-
-      &:hover, &:focus {
-        text-decoration: none;
-      }
-    }
-
-    &.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 p {
-        display: block;
-        padding: 1em;
-        font-size: 1em;
-        text-align: center;
-    }
-
-    &:after {
-      content: "";
-      display: block;
-      height: 1px;
-      position: absolute;
-      #{$left}: 4em;
-      #{$right}: 0;
-      bottom: 0;
-      background-color: #e5e5e5;
-    }
-
-    &.empty:after {
-        #{$left}: 0;
-    }
-  }
-
-  h3, p {
-    margin: 0;
-  }
-
-  h3 {
-    color: $primary;
-    margin-bottom: 0.2em;
-  }
-
-  p {
-    font-size: 0.8em;
-    color: #777;
-  }
-}
-
-// On the /my page, we use a .issue-list with an extra full-width modifier
-// which removes the left padding. However, our new reports list still needs
-// it:
-.issue-list-a.full-width {
-  margin-#{$left}: -1em;
-}
-
-.big-green-banner {
-  display: none; // hide the empty banner by default
-
-  &.mobile-map-banner {
-    display: block; // show it again once the mobile javascript adds this class
-  }
-}
-
-.click-the-map {
-  color: #000;
-  margin: -10px -1em 0; // overlap padding on parents
-  padding: 18px;
-  border-bottom: 1px solid #e5e5e5;
-  // TODO This is not right-to-left enabled yet
-  background: #fff url('/i/click-map-chevron-big.gif') 90% 12px no-repeat;
-
-  h2 {
-    font-family: inherit;
-    margin: 0 0 5px;
-  }
-
-  p {
-    margin: 0;
-    font-size: 18px;
-    line-height: 20px;
-    color: $primary;
-    padding-#{$right}: 20px;
-    // TODO This is not right-to-left enabled yet, image wise
-    background: transparent url('/i/click-map-chevron-small.gif') $right center no-repeat;
-    display: inline-block;
-  }
-
-  img {
-    // the little chevron icon
-    vertical-align: -1px;
-    margin-#{$left}: 0.2em;
-  }
-}
-
-body.frontpage {
-    .issue-list-a {
-        li .text {
-            padding-#{$left}: 3em;
-        }
-    }
-}
diff --git a/web/cobrands/sass/_report_list_pins.scss b/web/cobrands/sass/_report_list_pins.scss
new file mode 100644
index 000000000..f1948775b
--- /dev/null
+++ b/web/cobrands/sass/_report_list_pins.scss
@@ -0,0 +1,111 @@
+.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);
+    }
+
+    &.empty p {
+        display: block;
+        padding: 1em;
+        font-size: 1em;
+        text-align: center;
+    }
+
+    &:after {
+      content: "";
+      display: block;
+      height: 1px;
+      position: absolute;
+      #{$left}: 4em;
+      #{$right}: 0;
+      bottom: 0;
+      background-color: #e5e5e5;
+    }
+
+    &.empty:after {
+        #{$left}: 0;
+    }
+  }
+
+  h3, p {
+    margin: 0;
+  }
+
+  h3 {
+    color: $primary;
+    margin-bottom: 0.2em;
+  }
+
+  p {
+    font-size: 0.8em;
+    color: #777;
+  }
+}
+
+.big-green-banner {
+  display: none; // hide the empty banner by default
+
+  &.mobile-map-banner {
+    display: block; // show it again once the mobile javascript adds this class
+  }
+}
+
+.click-the-map {
+  color: #000;
+  margin: -10px -1em 0; // overlap padding on parents
+  padding: 18px;
+  border-bottom: 1px solid #e5e5e5;
+  // TODO This is not right-to-left enabled yet
+  background: #fff url('/i/click-map-chevron-big.gif') 90% 12px no-repeat;
+
+  h2 {
+    font-family: inherit;
+    margin: 0 0 5px;
+  }
+
+  p {
+    margin: 0;
+    font-size: 18px;
+    line-height: 20px;
+    color: $primary;
+    padding-#{$right}: 20px;
+    // TODO This is not right-to-left enabled yet, image wise
+    background: transparent url('/i/click-map-chevron-small.gif') $right center no-repeat;
+    display: inline-block;
+  }
+
+  img {
+    // the little chevron icon
+    vertical-align: -1px;
+    margin-#{$left}: 0.2em;
+  }
+}
+
+body.frontpage {
+    .issue-list-a {
+        li .text {
+            padding-#{$left}: 3em;
+        }
+    }
+}
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index 63ef7324d..3cd54bc23 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -552,13 +552,10 @@ OpenLayers.Format.FixMyStreet = OpenLayers.Class(OpenLayers.Format.JSON, {
         } else {
             obj = json;
         }
-        var current, current_near;
+        var current;
         if (typeof(obj.current) != 'undefined' && (current = document.getElementById('current'))) {
             current.innerHTML = obj.current;
         }
-        if (typeof(obj.current_near) != 'undefined' && (current_near = document.getElementById('current_near'))) {
-            current_near.innerHTML = obj.current_near;
-        }
         return fms_markers_list( obj.pins, false );
     },
     CLASS_NAME: "OpenLayers.Format.FixMyStreet"