20 files changed, 272 insertions, 6 deletions

diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index a26f67ee8..a9ffe7295 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -976,6 +976,19 @@ a:hover.button-left {
     margin-bottom: 0.5em;
 }
 
+.report_meta_info,
+.council_sent_info {
+  font-size: 0.9em;
+}
+
+.council_sent_info {
+  color: #666;
+
+  p + & {
+    margin-top: -0.6em; // partly counteract margin-bottom on previous paragraph
+  }
+}
+
 // map stuff
 #map_box{
   @extend .full-width;
diff --git a/web/cobrands/sass/_report_list.scss b/web/cobrands/sass/_report_list.scss
new file mode 100644
index 000000000..b4e150d03
--- /dev/null
+++ b/web/cobrands/sass/_report_list.scss
@@ -0,0 +1,155 @@
+// 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 1em;
+  margin-bottom: 0.5em;
+  color: #666;
+  font-size: 0.85em;
+
+  label, select {
+    display: inline-block;
+    width: auto;
+  }
+
+  label {
+    font-weight: normal;
+    margin: 0;
+
+    & + label {
+      margin-left: 0.2em;
+    }
+  }
+
+  select {
+    color: inherit;
+    font-family: inherit;
+    font-size: 1em;
+
+    border: 1px solid #ced7c4;
+    box-shadow: 0 1px 0 #fff;
+    height: 2em;
+    margin-left: 0.2em;
+    max-width: 13em;
+  }
+}
+
+.report-list, .issue-list-a {
+  margin-left: 0;
+
+  li {
+    list-style: none;
+    position: relative;
+    margin: 0;
+    background: none;
+
+    a {
+      display: block;
+      padding: 1em;
+      padding-left: 4em;
+      background: transparent url(/i/pin-yellow-small.png) no-repeat 1em center;
+
+      &:hover, &:focus {
+        background-color: #fff;
+        background-repeat: no-repeat;
+        background-position: 1em center;
+        background: transparent url(/i/pin-yellow-small.png) no-repeat 1em center;
+        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;
+  }
+}
+
+.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 -1em; // overlap padding on parents
+  padding: 18px;
+  border-bottom: 1px solid #e5e5e5;
+  background: #fff url('/i/click-map-chevron-big.gif') 90% 12px no-repeat;
+
+  h2 {
+    font-family: inherit;
+    margin: 0 0 5px 0;
+  }
+
+  p {
+    margin: 0;
+    font-size: 18px;
+    line-height: 20px;
+    color: $primary;
+    padding-right: 20px;
+    background: transparent url('/i/click-map-chevron-small.gif') 100% center no-repeat;
+    display: inline-block;
+  }
+
+  img {
+    // the little chevron icon
+    vertical-align: -1px;
+    margin-left: 0.2em;
+  }
+}
+
+body.frontpage {
+    .issue-list-a, .list-a {
+        li .text {
+            padding-left: 3em;
+        }
+    }
+}
diff --git a/web/i/click-map-chevron-big.gif b/web/i/click-map-chevron-big.gif
new file mode 100644
index 000000000..3610c50c8
--- /dev/null
+++ b/web/i/click-map-chevron-big.gif
diff --git a/web/i/click-map-chevron-small.gif b/web/i/click-map-chevron-small.gif
new file mode 100644
index 000000000..4ffd2a95f
--- /dev/null
+++ b/web/i/click-map-chevron-small.gif
diff --git a/web/i/pin-green-big.png b/web/i/pin-green-big.png
index 16d73230a..69815463e 100644
--- a/web/i/pin-green-big.png
+++ b/web/i/pin-green-big.png
diff --git a/web/i/pin-green-mini.png b/web/i/pin-green-mini.png
new file mode 100644
index 000000000..32d57a807
--- /dev/null
+++ b/web/i/pin-green-mini.png
diff --git a/web/i/pin-green-small.png b/web/i/pin-green-small.png
new file mode 100644
index 000000000..4813ceb58
--- /dev/null
+++ b/web/i/pin-green-small.png
diff --git a/web/i/pin-green.png b/web/i/pin-green.png
index 47a0a6cc1..597bfc6b7 100644
--- a/web/i/pin-green.png
+++ b/web/i/pin-green.png
diff --git a/web/i/pin-grey-mini.png b/web/i/pin-grey-mini.png
new file mode 100644
index 000000000..152b0a60f
--- /dev/null
+++ b/web/i/pin-grey-mini.png
diff --git a/web/i/pin-grey-small.png b/web/i/pin-grey-small.png
new file mode 100644
index 000000000..14b1f9b03
--- /dev/null
+++ b/web/i/pin-grey-small.png
diff --git a/web/i/pin-red-big.png b/web/i/pin-red-big.png
index 2d970b9e2..fb51b6c78 100644
--- a/web/i/pin-red-big.png
+++ b/web/i/pin-red-big.png
diff --git a/web/i/pin-red-mini.png b/web/i/pin-red-mini.png
new file mode 100644
index 000000000..d91aac979
--- /dev/null
+++ b/web/i/pin-red-mini.png
diff --git a/web/i/pin-red-small.png b/web/i/pin-red-small.png
new file mode 100644
index 000000000..a0e8fb0d2
--- /dev/null
+++ b/web/i/pin-red-small.png
diff --git a/web/i/pin-red.png b/web/i/pin-red.png
index 298f4d3f6..882446a22 100644
--- a/web/i/pin-red.png
+++ b/web/i/pin-red.png
diff --git a/web/i/pin-shadow-small.png b/web/i/pin-shadow-small.png
new file mode 100644
index 000000000..911e3a66c
--- /dev/null
+++ b/web/i/pin-shadow-small.png
diff --git a/web/i/pin-yellow-big.png b/web/i/pin-yellow-big.png
index d1642d644..cfae00afc 100644
--- a/web/i/pin-yellow-big.png
+++ b/web/i/pin-yellow-big.png
diff --git a/web/i/pin-yellow-mini.png b/web/i/pin-yellow-mini.png
new file mode 100644
index 000000000..8181bce96
--- /dev/null
+++ b/web/i/pin-yellow-mini.png
diff --git a/web/i/pin-yellow-small.png b/web/i/pin-yellow-small.png
new file mode 100644
index 000000000..53cfb654a
--- /dev/null
+++ b/web/i/pin-yellow-small.png
diff --git a/web/i/pin-yellow.png b/web/i/pin-yellow.png
index 196cb0f5f..67ccc546a 100644
--- a/web/i/pin-yellow.png
+++ b/web/i/pin-yellow.png
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index 3088cc764..a0ab4f34c 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -29,6 +29,13 @@ function fixmystreet_update_pin(lonlat) {
             if ( lb.length === 0 ) { lb = $('#form_name').prev(); }
             lb.before(data.extra_name_info);
         }
+        // If the category filter appears on the map and the user has selected
+        // something from it, then pre-fill the category field in the report,
+        // if it's a value already present in the drop-down.
+        var category = $("#filter_categories").val();
+        if (category !== undefined && $("#form_category option[value="+category+"]").length) {
+            $("#form_category").val(category);
+        }
     });
 
     if (!$('#side-form-error').is(':visible')) {
@@ -69,6 +76,7 @@ function fixmystreet_zoomToBounds(bounds) {
 
 function fms_markers_list(pins, transform) {
     var markers = [];
+    var size = fms_marker_size_for_zoom(fixmystreet.map.getZoom() + fixmystreet.zoomOffset);
     for (var i=0; i<pins.length; i++) {
         var pin = pins[i];
         var loc = new OpenLayers.Geometry.Point(pin[1], pin[0]);
@@ -81,7 +89,7 @@ function fms_markers_list(pins, transform) {
         }
         var marker = new OpenLayers.Feature.Vector(loc, {
             colour: pin[2],
-            size: pin[5] || 'normal',
+            size: pin[5] || size,
             id: pin[3],
             title: pin[4] || ''
         });
@@ -90,6 +98,29 @@ function fms_markers_list(pins, transform) {
     return markers;
 }
 
+function fms_marker_size_for_zoom(zoom) {
+    if (zoom >= 15) {
+        return 'normal';
+    } else if (zoom >= 13) {
+        return 'small';
+    } else {
+        return 'mini';
+    }
+}
+
+function fms_markers_resize() {
+    var size = fms_marker_size_for_zoom(fixmystreet.map.getZoom() + fixmystreet.zoomOffset);
+    for (var i = 0; i < fixmystreet.markers.features.length; i++) {
+        fixmystreet.markers.features[i].attributes.size = size;
+    }
+    fixmystreet.markers.redraw();
+}
+
+function fms_categories_or_status_changed() {
+    // If the category or status has changed we need to re-fetch map markers
+    fixmystreet.markers.refresh({force: true});
+}
+
 function fixmystreet_onload() {
     if ( fixmystreet.area.length ) {
         for (var i=0; i<fixmystreet.area.length; i++) {
@@ -131,7 +162,8 @@ function fixmystreet_onload() {
             backgroundWidth: 60,
             backgroundHeight: 30,
             backgroundXOffset: -7,
-            backgroundYOffset: -30
+            backgroundYOffset: -30,
+            popupYOffset: -40
         },
         'big': {
             externalGraphic: fixmystreet.pin_prefix + "pin-${colour}-big.png",
@@ -144,6 +176,27 @@ function fixmystreet_onload() {
             backgroundHeight: 40,
             backgroundXOffset: -10,
             backgroundYOffset: -35
+        },
+        'small': {
+            externalGraphic: fixmystreet.pin_prefix + "pin-${colour}-small.png",
+            graphicWidth: 24,
+            graphicHeight: 32,
+            graphicXOffset: -12,
+            graphicYOffset: -32,
+            backgroundGraphic: fixmystreet.pin_prefix + "pin-shadow-small.png",
+            backgroundWidth: 30,
+            backgroundHeight: 15,
+            backgroundXOffset: -4,
+            backgroundYOffset: -15,
+            popupYOffset: -20
+        },
+        'mini': {
+            externalGraphic: fixmystreet.pin_prefix + "pin-${colour}-mini.png",
+            graphicWidth: 16,
+            graphicHeight: 20,
+            graphicXOffset: -8,
+            graphicYOffset: -20,
+            popupYOffset: -10
         }
     });
     var pin_layer_options = {
@@ -155,7 +208,7 @@ function fixmystreet_onload() {
     if (fixmystreet.page == 'around') {
         fixmystreet.bbox_strategy = fixmystreet.bbox_strategy || new OpenLayers.Strategy.BBOX({ ratio: 1 });
         pin_layer_options.strategies = [ fixmystreet.bbox_strategy ];
-        pin_layer_options.protocol = new OpenLayers.Protocol.HTTP({
+        pin_layer_options.protocol = new OpenLayers.Protocol.FixMyStreet({
             url: '/ajax',
             params: fixmystreet.all_pins ? { all_pins: 1 } : { },
             format: new OpenLayers.Format.FixMyStreet()
@@ -186,17 +239,29 @@ function fixmystreet_onload() {
         fixmystreet.markers.events.register( 'featureselected', fixmystreet.markers, function(evt) {
             var feature = evt.feature;
             selectedFeature = feature;
+            var popupYOffset = feature.layer.styleMap.createSymbolizer(feature).popupYOffset || -40;
             var popup = new OpenLayers.Popup.FramedCloud("popup",
                 feature.geometry.getBounds().getCenterLonLat(),
                 null,
                 feature.attributes.title + "<br><a href=/report/" + feature.attributes.id + ">" + translation_strings.more_details + "</a>",
-                { size: new OpenLayers.Size(0,0), offset: new OpenLayers.Pixel(0,-40) },
+                { size: new OpenLayers.Size(0, 0), offset: new OpenLayers.Pixel(0, popupYOffset) },
                 true, onPopupClose);
             feature.popup = popup;
             fixmystreet.map.addPopup(popup);
         });
         fixmystreet.map.addControl( fixmystreet.select_feature );
         fixmystreet.select_feature.activate();
+        fixmystreet.map.events.register( 'zoomend', null, fms_markers_resize );
+
+        // If the category filter dropdown exists on the page set up the
+        // event handlers to populate it and react to it changing
+        if ($("select#filter_categories").length) {
+            $("body").on("change", "#filter_categories", fms_categories_or_status_changed);
+        }
+        // Do the same for the status dropdown
+        if ($("select#statuses").length) {
+            $("body").on("change", "#statuses", fms_categories_or_status_changed);
+        }
     } else if (fixmystreet.page == 'new') {
         fixmystreet_activate_drag();
     }
@@ -354,6 +419,16 @@ $(function(){
         fixmystreet.page = 'around';
     });
 
+    // Hide the pin filter submit button. Not needed because we'll use JS
+    // to refresh the map when the filter inputs are changed.
+    $(".report-list-filters [type=submit]").hide();
+
+    if (fixmystreet.page == "my" || fixmystreet.page == "reports") {
+        $(".report-list-filters select").change(function() {
+            $(this).closest("form").submit();
+        });
+    }
+
     // Vector layers must be added onload as IE sucks
     if ($.browser.msie) {
         $(window).load(fixmystreet_onload);
@@ -447,6 +522,30 @@ OpenLayers.Control.PermalinkFMSz = OpenLayers.Class(OpenLayers.Control.Permalink
     }
 });
 
+/* Pan data request handler */
+// This class is used to get a JSON object from /ajax that contains
+// pins for the map and HTML for the sidebar. It does a fetch whenever the map
+// is dragged (modulo a buffer extending outside the viewport).
+// This subclass is required so we can pass the 'filter_category' and 'status' query
+// params to /ajax if the user has filtered the map.
+OpenLayers.Protocol.FixMyStreet = OpenLayers.Class(OpenLayers.Protocol.HTTP, {
+    read: function(options) {
+        // Pass the values of the category and status fields as query params
+        var filter_category = $("#filter_categories").val();
+        if (filter_category !== undefined) {
+            options.params = options.params || {};
+            options.params.filter_category = filter_category;
+        }
+        var status = $("#statuses").val();
+        if (status !== undefined) {
+            options.params = options.params || {};
+            options.params.status = status;
+        }
+        return OpenLayers.Protocol.HTTP.prototype.read.apply(this, [options]);
+    },
+    CLASS_NAME: "OpenLayers.Protocol.FixMyStreet"
+});
+
 /* Pan data handler */
 OpenLayers.Format.FixMyStreet = OpenLayers.Class(OpenLayers.Format.JSON, {
     read: function(json, filter) {
@@ -462,8 +561,7 @@ OpenLayers.Format.FixMyStreet = OpenLayers.Class(OpenLayers.Format.JSON, {
         if (typeof(obj.current_near) != 'undefined' && (current_near = document.getElementById('current_near'))) {
             current_near.innerHTML = obj.current_near;
         }
-        var markers = fms_markers_list( obj.pins, false );
-        return markers;
+        return fms_markers_list( obj.pins, false );
     },
     CLASS_NAME: "OpenLayers.Format.FixMyStreet"
 });