Merge branch 'master' of ssh://git.mysociety.org/data/git/public/fixmystreet into open311-consumer

Conflicts:
	t/app/model/problem.t
	templates/web/default/report/new/fill_in_details.html
	web/css/core.css

7 files changed, 214 insertions, 64 deletions

diff --git a/web/cobrands/fiksgatami/css.css b/web/cobrands/fiksgatami/css.css
index 54513fb34..6c2a4e16b 100644
--- a/web/cobrands/fiksgatami/css.css
+++ b/web/cobrands/fiksgatami/css.css
@@ -43,6 +43,13 @@ select, input, textarea {
 #mysociety #front_stats div {
   background-color: #99bfe1;
 }
+#mysociety p.promo {
+  border-top: 1px solid #bbb;
+  border-bottom: 1px solid #bbb;
+  background-color: #eee;
+  text-align: center;
+  padding: 0 0.5em;
+}
 
 #header {
   font-size: 200%;
@@ -73,11 +80,28 @@ select, input, textarea {
   position: relative;
   margin: 0 auto;
   max-width: 60em;
+  overflow: auto;
 }
 
 /* Can't put the margin in #mysociety because of above IE craziness */
 #wrapper {
-  margin: 2em;
+  margin: 1em 2em;
+}
+
+#meta {
+  list-style-type: none;
+  margin: 0.25em 0 0 1em;
+  padding: 0;
+  font-size: 0.875em;
+}
+#meta li {
+  display: inline;
+  margin: 0;
+  padding: 0 0 0 0.25em;
+  border-left: solid 1px #1a4f7f;
+}
+#meta li:first-child {
+  border-left: none;
 }
 
 .v {
@@ -108,6 +132,12 @@ select, input, textarea {
 #navigation a:hover, #navigation a:active {
   background-color: #1a4f7f;
   color: #99bfe1;
+  -moz-border-radius-topleft: 0.5em;
+  -webkit-border-top-left-radius: 0.5em;
+  border-radius-top-left: 0.5em;
+  -moz-border-radius-topright: 0.5em;
+  -webkit-border-top-right-radius: 0.5em;
+  border-radius-top-right: 0.5em;
 }
 
 #nav_new a {
@@ -125,12 +155,23 @@ select, input, textarea {
 
 #footer {
   clear: both;
-  text-align: right;
-  font-size: 83%;
-  border-top: solid 1px #1a4f7f;
-  display: table;
-  margin: 2em 0 1em auto;
-  padding: 2px 4px;
+  text-align: center;
+  border-top: solid 2px #ccc;
+  width: 50%;
+  margin: 1em auto 0;
+  padding: 0;
+  color: #333333;
+}
+#footer .l, #footer .r {
+  margin-top: 0;
+  text-align: left;
+  width: 45%;
+}
+#footer .l {
+  float: left;
+}
+#footer .r {
+  float: right;
 }
 
 body {
diff --git a/web/css/_main.scss b/web/css/_main.scss
index 19d9b5a40..b4e4a13f0 100644
--- a/web/css/_main.scss
+++ b/web/css/_main.scss
@@ -161,11 +161,11 @@ select, input, textarea {
 #footer {
     clear: both;
     text-align: center;
-    border-top: solid 2px $header_back;
+    border-top: solid 2px #ccc;
     width: 50%;
     margin: 1em auto 0;
     padding: 0;
-    color: $header_darker;
+    color: #333333;
 
     .l, .r {
         margin-top: 0;
diff --git a/web/css/core.css b/web/css/core.css
index ac29dfe7a..88181e3e8 100644
--- a/web/css/core.css
+++ b/web/css/core.css
@@ -172,21 +172,38 @@
 #mysociety form#mapForm #map {
   cursor: pointer; }
 #mysociety form#mapForm .olTileImage {
-  cursor: crosshair; }
-#mysociety #compass {
-  background-color: #ffffff;
-  border: solid 1px #000000;
-  border-width: 0 1px 1px 0;
-  color: #000000;
-  position: absolute;
-  top: 0px;
-  left: 0px; }
-  #mysociety #compass img {
-    border: 0; }
+  cursor: crosshair;
+}
 #mysociety #text_map {
-  margin-top: 0.5em;
-  margin-bottom: 1em;
-  font-size: 110%; }
+  margin: 0 530px 1em 0;
+  padding: 5px;
+  text-align: center;
+  position: relative;
+  padding-left: 0.5em;
+  text-align: left;
+  margin-top: 0;
+  font-size: 110%;
+  background-color: #eeeeee;
+  -moz-border-radius-topleft: 1em;
+  -moz-border-radius-bottomleft: 1em;
+  -webkit-border-top-left-radius: 1em;
+  -webkit-border-bottom-left-radius: 1em;
+  border-top-left-radius: 1em;
+  border-bottom-left-radius: 1em;
+}
+#mysociety #text_map_arrow {
+  display: block;
+  position: absolute;
+  top: 0;
+  right: -28px;
+  width: 0;
+  height: 0;
+  line-height: 0;
+  font-size: 0;
+  border-style: solid;
+  border-width: 26px 14px 26px 14px;
+  border-color: #fff #fff #fff #eee;
+}
 #mysociety #text_no_map {
   margin-top: 0; }
 #mysociety #sub_map_links {
@@ -206,7 +223,24 @@
   text-align: center;
   position: relative;
   background-color: #ffcccc;
-  border: solid 2px #990000; }
+  border: solid 2px #990000;
+}
+#mysociety #closed {
+  margin: 0 530px 1em 0;
+  padding: 5px;
+  text-align: center;
+  position: relative;
+  background-color: #ccccff;
+  border: solid 2px #000099;
+}
+#mysociety #progress {
+  margin: 0 530px 1em 0;
+  padding: 5px;
+  text-align: center;
+  position: relative;
+  background-color: #ffffcc;
+  border: solid 2px #999900;
+}
 #mysociety #updates div {
   padding: 0 0 0.5em;
   margin: 0 0 0.25em;
@@ -218,18 +252,19 @@
 #mysociety #updates p {
   margin: 0; }
 #mysociety #nearby_lists h2 {
-  margin-top: 0.5em;
-  margin-bottom: 0; }
+  margin-top: 1em;
+  margin-bottom: 0;
+}
 #mysociety #nearby_lists li small {
   color: #666666; }
 #mysociety #alert_links {
   float: right; }
 #mysociety #alert_links_area {
-  background-color: #ffeecc;
-  border: solid 1px #ff9900;
-  border-width: 1px 0;
-  padding: 3px 10px;
-  margin: 0; }
+  padding-left: 0.5em;
+  margin: 0;
+  color: #666;
+  font-size: smaller;
+}
 #mysociety #rss_alert {
   text-decoration: none; }
   #mysociety #rss_alert span {
@@ -303,6 +338,11 @@
   bottom: 3px !important;
   left: 3px; }
 
+.olControlPermalink {
+  bottom: 3px !important;
+  right: 3px;
+}
+
 @media print {
   #mysociety #map_box {
     float: none;
diff --git a/web/css/core.scss b/web/css/core.scss
index 4e8d732d5..b962b38ae 100644
--- a/web/css/core.scss
+++ b/web/css/core.scss
@@ -276,24 +276,34 @@ $map_width: 500px;
         cursor: crosshair;
     }
 
-    #compass {
-        background-color: #ffffff;
-        border: solid 1px #000000;
-        border-width: 0 1px 1px 0;
-        color: #000000;
-        position: absolute;
-        top: 0px;
-        left: 0px;
-        img {
-            border: 0;
-        }
-    }
-
     #text_map {
-        margin-top: 0.5em;
-        margin-bottom: 1em;
+        @include problem-banner;
+        padding-left: 0.5em;
+        text-align: left;
+        margin-top: 0;
         font-size: 110%;
+        background-color: #eeeeee;
+        -moz-border-radius-topleft: 1em;
+        -moz-border-radius-bottomleft: 1em;
+        -webkit-border-top-left-radius: 1em;
+        -webkit-border-bottom-left-radius: 1em;
+        border-top-left-radius: 1em;
+        border-bottom-left-radius: 1em;
+    }
+    #text_map_arrow {
+        display: block;
+        position: absolute;
+        top: 0;
+        right: -28px;
+        width: 0;
+        height: 0;
+        line-height: 0;
+        font-size: 0;
+        border-style: solid;
+        border-width: 26px 14px 26px 14px;
+        border-color: #fff #fff #fff #eee;
     }
+
     #text_no_map {
         margin-top: 0;
         // background-color: #ffeecc;
@@ -320,6 +330,18 @@ $map_width: 500px;
         border: solid 2px #990000;
     }
 
+    #closed {
+        @include problem-banner;
+        background-color: #ccccff;
+        border: solid 2px #000099;
+    }
+
+    #progress {
+        @include problem-banner;
+        background-color: #ffffcc;
+        border: solid 2px #999900;
+    }
+
     #updates {
         div {
             padding: 0 0 0.5em;
@@ -339,7 +361,7 @@ $map_width: 500px;
     }
 
     #nearby_lists h2 {
-        margin-top: 0.5em;
+        margin-top: 1em;
         margin-bottom: 0;
     }
 
@@ -351,12 +373,10 @@ $map_width: 500px;
         float: right;
     }
     #alert_links_area {
-        background-color: #ffeecc;
-        border: solid 1px #ff9900;
-        border-width: 1px 0;
-        padding: 3px 10px;
-        // padding: 0 3px;
+        padding-left: 0.5em;
         margin: 0;
+        color: #666;
+        font-size: smaller;
     }
     #rss_alert {
         text-decoration: none;
@@ -517,6 +537,10 @@ $map_width: 500px;
     bottom: 3px !important;
     left: 3px;
 }
+.olControlPermalink {
+    bottom: 3px !important;
+    right: 3px;
+}
 
 // Printing, SCSS doesn't handle @media nesting
 
diff --git a/web/css/main.css b/web/css/main.css
index 65fd5eae3..a3fe3b400 100644
--- a/web/css/main.css
+++ b/web/css/main.css
@@ -156,11 +156,11 @@ select, input, textarea {
 #footer {
   clear: both;
   text-align: center;
-  border-top: solid 2px #e3d595;
+  border-top: solid 2px #ccc;
   width: 50%;
   margin: 1em auto 0;
   padding: 0;
-  color: #4e451b;
+  color: #333333;
 }
 #footer .l, #footer .r {
   margin-top: 0;
diff --git a/web/js/jquery.ba-hashchange.min.js b/web/js/jquery.ba-hashchange.min.js
new file mode 100644
index 000000000..3c607bae3
--- /dev/null
+++ b/web/js/jquery.ba-hashchange.min.js
@@ -0,0 +1,9 @@
+/*
+ * jQuery hashchange event - v1.3 - 7/21/2010
+ * http://benalman.com/projects/jquery-hashchange-plugin/
+ * 
+ * Copyright (c) 2010 "Cowboy" Ben Alman
+ * Dual licensed under the MIT and GPL licenses.
+ * http://benalman.com/about/license/
+ */
+(function($,e,b){var c="hashchange",h=document,f,g=$.event.special,i=h.documentMode,d="on"+c in e&&(i===b||i>7);function a(j){j=j||location.href;return"#"+j.replace(/^[^#]*#?(.*)$/,"$1")}$.fn[c]=function(j){return j?this.bind(c,j):this.trigger(c)};$.fn[c].delay=50;g[c]=$.extend(g[c],{setup:function(){if(d){return false}$(f.start)},teardown:function(){if(d){return false}$(f.stop)}});f=(function(){var j={},p,m=a(),k=function(q){return q},l=k,o=k;j.start=function(){p||n()};j.stop=function(){p&&clearTimeout(p);p=b};function n(){var r=a(),q=o(m);if(r!==m){l(m=r,q);$(e).trigger(c)}else{if(q!==m){location.href=location.href.replace(/#.*/,"")+q}}p=setTimeout(n,$.fn[c].delay)}$.browser.msie&&!d&&(function(){var q,r;j.start=function(){if(!q){r=$.fn[c].src;r=r&&r+a();q=$('<iframe tabindex="-1" title="empty"/>').hide().one("load",function(){r||l(a());n()}).attr("src",r||"javascript:0").insertAfter("body")[0].contentWindow;h.onpropertychange=function(){try{if(event.propertyName==="title"){q.document.title=h.title}}catch(s){}}}};j.stop=k;o=function(){return a(q.location.href)};l=function(v,s){var u=q.document,t=$.fn[c].domain;if(v!==s){u.title=h.title;u.open();t&&u.write('<script>document.domain="'+t+'"<\/script>');u.close();q.location.hash=v}}})();return j})()})(jQuery,this);
\ No newline at end of file
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index f8bd9c31e..d3914a128 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -41,6 +41,17 @@ $(function(){
         return false;
     });
 
+    $(window).hashchange(function(){
+        if (location.hash) return;
+        // Okay, back to around view.
+        fixmystreet.bbox_strategy.activate();
+        fixmystreet.markers.refresh( { force: true } );
+        fixmystreet.drag.deactivate();
+        $('#side-form').hide();
+        $('#side').show();
+        fixmystreet.page = 'around';
+    });
+
     // Vector layers must be added onload as IE sucks
     if ($.browser.msie) {
         $(window).load(fixmystreet_onload);
@@ -79,7 +90,8 @@ function fixmystreet_onload() {
         })
     };
     if (fixmystreet.page == 'around') {
-        pin_layer_options.strategies = [ new OpenLayers.Strategy.BBOX() ];
+        fixmystreet.bbox_strategy = new OpenLayers.Strategy.BBOX();
+        pin_layer_options.strategies = [ fixmystreet.bbox_strategy ];
         pin_layer_options.protocol = new OpenLayers.Protocol.HTTP({
             url: '/ajax',
             params: fixmystreet.all_pins ? { all_pins: 1 } : { },
@@ -92,20 +104,16 @@ function fixmystreet_onload() {
     fixmystreet.markers.addFeatures( markers );
     if (fixmystreet.page == 'around' || fixmystreet.page == 'reports' || fixmystreet.page == 'my') {
         fixmystreet.markers.events.register( 'featureselected', fixmystreet.markers, function(evt) {
-            window.location = '/report/' + evt.feature.attributes.id;
+            if (evt.feature.attributes.id) {
+                window.location = '/report/' + evt.feature.attributes.id;
+            }
             OpenLayers.Event.stop(evt);
         });
         var select = new OpenLayers.Control.SelectFeature( fixmystreet.markers );
         fixmystreet.map.addControl( select );
         select.activate();
     } else if (fixmystreet.page == 'new') {
-        var drag = new OpenLayers.Control.DragFeature( fixmystreet.markers, {
-            onComplete: function(feature, e) {
-                fixmystreet_update_pin( feature.geometry.clone() );
-            }
-        } );
-        fixmystreet.map.addControl( drag );
-        drag.activate();
+        fixmystreet_activate_drag();
     }
     fixmystreet.map.addLayer(fixmystreet.markers);
 
@@ -287,13 +295,30 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
     trigger: function(e) {
         var lonlat = fixmystreet.map.getLonLatFromViewPortPx(e.xy);
         if (fixmystreet.page == 'new') {
+            /* Already have a purple pin */
             fixmystreet.markers.features[0].move(lonlat);
+        } else {
+            var markers = fms_markers_list( [ [ lonlat.lat, lonlat.lon, 'purple' ] ], false );
+            fixmystreet.bbox_strategy.deactivate();
+            fixmystreet.markers.removeAllFeatures();
+            fixmystreet.markers.addFeatures( markers );
+            fixmystreet_activate_drag();
         }
         fixmystreet_update_pin(lonlat);
         if (fixmystreet.page == 'new') {
             return;
         }
-        document.getElementById('mapForm').submit();
+        $.getJSON('/report/new/ajax', {
+                latitude: $('#fixmystreet\\.latitude').val(),
+                longitude: $('#fixmystreet\\.longitude').val()
+        }, function(data) {
+            $('#councils_text').html(data.councils_text);
+            $('#form_category_row').html(data.category);
+        });
+        $('#side-form').show();
+        $('#side').hide();
+        fixmystreet.page = 'new';
+        location.hash = 'report';
     }
 });
 
@@ -307,3 +332,14 @@ function fixmystreet_update_pin(lonlat) {
     document.getElementById('fixmystreet.latitude').value = lonlat.lat || lonlat.y;
     document.getElementById('fixmystreet.longitude').value = lonlat.lon || lonlat.x;
 }
+
+function fixmystreet_activate_drag() {
+    fixmystreet.drag = new OpenLayers.Control.DragFeature( fixmystreet.markers, {
+        onComplete: function(feature, e) {
+            fixmystreet_update_pin( feature.geometry.clone() );
+        }
+    } );
+    fixmystreet.map.addControl( fixmystreet.drag );
+    fixmystreet.drag.activate();
+}
+