Merge branch 'issues/forcouncils/99-sorting'

5 files changed, 36 insertions, 26 deletions

diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index c9acb823d..fed983a2c 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -1249,7 +1249,7 @@ $(function() {
                     // location.href is something like foo.com/around?pc=abc-123,
                     // which we pass into fixmystreet.display.reports_list() as a fallback
                     // in case the list isn't already in the DOM.
-                    $('#filter_categories').add('#statuses').find('option')
+                    $('#filter_categories').add('#statuses').add('#sort').find('option')
                         .prop('selected', function() { return this.defaultSelected; })
                         .trigger('change.multiselect');
                     fixmystreet.display.reports_list(location.href);
@@ -1260,6 +1260,7 @@ $(function() {
                 } else if ('filter_change' in e.state) {
                     $('#filter_categories').val(e.state.filter_change.filter_categories);
                     $('#statuses').val(e.state.filter_change.statuses);
+                    $('#sort').val(e.state.filter_change.sort);
                     $('#filter_categories').add('#statuses')
                         .trigger('change.filters').trigger('change.multiselect');
                 } else if ('hashchange' in e.state) {
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index f75a53c33..7cb47af6a 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -10,7 +10,7 @@ $itemlist_item_background: #f6f6f6 !default;
 $itemlist_item_background_hover: #e6e6e6 !default;
 $col_big_numbers: #ccc !default;
 
-$form-control-border-color: #aaaaaa;
+$form-control-border-color: #aaaaaa !default;
 
 @import "_mixins";
 @import "_report_list";
diff --git a/web/cobrands/sass/_multiselect.scss b/web/cobrands/sass/_multiselect.scss
index 5ee15ead8..9dda17fea 100644
--- a/web/cobrands/sass/_multiselect.scss
+++ b/web/cobrands/sass/_multiselect.scss
@@ -47,7 +47,7 @@
     text-overflow: ellipsis;
     vertical-align: -0.5em;
     background-color: #fff;
-    border: 1px solid #aaa;
+    border: 1px solid $form-control-border-color;
     border-radius: 4px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
     cursor: default;
diff --git a/web/cobrands/sass/_report_list.scss b/web/cobrands/sass/_report_list.scss
index 54c2d4bf2..87af99c0f 100644
--- a/web/cobrands/sass/_report_list.scss
+++ b/web/cobrands/sass/_report_list.scss
@@ -6,6 +6,10 @@
   font-size: 0.85em;
   line-height: 1.8em;
 
+  & + & {
+    padding-top: 0.25em;
+  }
+
   label {
     // Override default label styling
     font-weight: normal;
@@ -18,23 +22,24 @@
     vertical-align: top;
   }
 
-  select {
+  .form-control {
     display: inline-block;
-    width: auto;
-    color: inherit;
-    font-family: inherit;
-    font-size: 1em;
-    border: 1px solid #ced7c4;
-    max-width: 13em;
     margin: 0 0.2em;
-  }
 
-  .form-control {
-    margin-bottom: 0;
+    // Visually match the teeny tiny .multi-select-buttons
+    font-size: 0.875em;
+    background-color: #fff;
+    color: #000;
+    max-width: 10em;
+    vertical-align: top;
+    height: 1.8em;
+    line-height: 1.8em;
+    padding: 0;
   }
 
   .multi-select-container {
     margin: 0 0.2em;
+    color: #000;
   }
 
   .multi-select-menu {
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index 02a0d7727..3de8e4d1f 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -286,7 +286,11 @@ var fixmystreet = fixmystreet || {};
 
     function replace_query_parameter(qs, id, key) {
         var value = $('#' + id).val();
-        value ? qs[key] = value.join(',') : delete qs[key];
+        if (value) {
+            qs[key] = (typeof value === 'string') ? value : value.join(',');
+        } else {
+            delete qs[key];
+        }
         return value;
     }
 
@@ -297,6 +301,7 @@ var fixmystreet = fixmystreet || {};
         var qs = parse_query_string();
         var filter_categories = replace_query_parameter(qs, 'filter_categories', 'filter_category');
         var filter_statuses = replace_query_parameter(qs, 'statuses', 'status');
+        var sort_key = replace_query_parameter(qs, 'sort', 'sort');
         delete qs['p'];
         var new_url;
         if ($.isEmptyObject(qs)) {
@@ -307,7 +312,7 @@ var fixmystreet = fixmystreet || {};
             new_url = location.href + '?' + $.param(qs);
         }
         history.pushState({
-            filter_change: { 'filter_categories': filter_categories, 'statuses': filter_statuses }
+            filter_change: { 'filter_categories': filter_categories, 'statuses': filter_statuses, 'sort': sort_key }
         }, null, new_url);
     }
 
@@ -522,8 +527,10 @@ var fixmystreet = fixmystreet || {};
             // Set up the event handlers to populate the filters and react to them changing
             $("#filter_categories").on("change.filters", categories_or_status_changed);
             $("#statuses").on("change.filters", categories_or_status_changed);
+            $("#sort").on("change.filters", categories_or_status_changed);
             $("#filter_categories").on("change.user", categories_or_status_changed_history);
             $("#statuses").on("change.user", categories_or_status_changed_history);
+            $("#sort").on("change.user", categories_or_status_changed_history);
         } else if (fixmystreet.page == 'new') {
             drag.activate();
         }
@@ -792,17 +799,14 @@ OpenLayers.Strategy.FixMyStreetFixed = OpenLayers.Class(OpenLayers.Strategy.Fixe
 // 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;
-        }
+        // Pass the values of the category, status, and sort fields as query params
+        $.each({ filter_category: 'filter_categories', status: 'statuses', sort: 'sort' }, function(key, id) {
+            var val = $('#' + id).val();
+            if (val !== undefined) {
+                options.params = options.params || {};
+                options.params[key] = val;
+            }
+        });
         return OpenLayers.Protocol.HTTP.prototype.read.apply(this, [options]);
     },
     CLASS_NAME: "OpenLayers.Protocol.FixMyStreet"