Merge remote-tracking branch 'origin/bromley' into bromley

11 files changed, 192 insertions, 103 deletions

diff --git a/web/cobrands/bromley/_colours.scss b/web/cobrands/bromley/_colours.scss
index b76a37609..e178c9db2 100644
--- a/web/cobrands/bromley/_colours.scss
+++ b/web/cobrands/bromley/_colours.scss
@@ -1,8 +1,9 @@
 /* COLOURS */
 
-$primary: rgb(76,120,168);
+$primary: rgb(91,120,147);
 $primary_b: #000000;
 $primary_text: #ffffff;
 
-$contrast1: rgb(76,120,168);
+$contrast1: rgb(91,120,147);
+$contrast1_dark: darken(rgb(91,120,147), 10%);
 $contrast2: #AA8D11;
diff --git a/web/cobrands/bromley/base.scss b/web/cobrands/bromley/base.scss
index 36815e6e5..9c5ff2b0f 100644
--- a/web/cobrands/bromley/base.scss
+++ b/web/cobrands/bromley/base.scss
@@ -5,6 +5,19 @@
 
 @import "../fixmystreet/_base";
 
+a, a:visited {
+    color: #369;
+    &:hover, &:active {
+        color: #369;
+    }
+}
+
+h1.main {
+    color: $primary;
+    text-align: center;
+    margin: 0.5em 0;
+}
+
 // Want a white header, and logo is slightly bigger
 #site-header {
     @include background(linear-gradient(#ddd, #fff 10%, #fff));
@@ -41,3 +54,7 @@
 .big-green-banner {
     text-transform: none;
 }
+
+#form_sign_in {
+    margin-top: 1em;
+}
diff --git a/web/cobrands/bromley/bromley.scss b/web/cobrands/bromley/bromley.scss
index 89ab08fd1..d6b2d370d 100644
--- a/web/cobrands/bromley/bromley.scss
+++ b/web/cobrands/bromley/bromley.scss
@@ -5,6 +5,23 @@
 
 @import "compass";
 
+// Bits of Bromley's forms.css, adjusted
+input[type=text],
+input[type=password],
+input[type=email],
+input[type=file],
+textarea, 
+select { background: #fff; border: 1px solid #768b9a; border-color: #768b9a #d1dee8 #d1dee8 #768b9a; color: #333; font: 12px/18px Arial, 'Helvetica Neue', Helvetica, sans-serif; padding: 8px; width: 300px;
+@include border-radius(0); }
+
+.green-btn, button.green-btn, input.green-btn {
+    background: #5b7189 url("http://www.bromley.gov.uk/site/styles/css_img/button.gif") repeat-x 0 -1px; border: 1px solid #8e9eb0; color: #fff; font-family: 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; font-weight: normal; margin: 0; min-height: 23px; outline: 1px solid #405062; padding: 4px 8px; text-transform: uppercase; }
+.green-btn:hover, button.green-btn:hover, input.green-btn:hover { background: #5b7189; border: 1px solid #8e9eb0; }
+.form-txt-submit-box input[type=submit] {
+    padding-top: 0; padding-bottom: 0; width: auto;
+}
+
+
 h1, h2, h3, h4, h5, h6, legend { font-family: 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; }
 body { color: #333; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; line-height: 1.4; }
 
@@ -35,13 +52,13 @@ body { color: #333; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
 .main-menu li a:hover, .main-menu li a:active {background:url('http://www.bromley.gov.uk/site/styles/css_img/main-menu-hover.gif') repeat-x;}
 .main-menu li.home a:hover, .main-menu li.home a:active {background:url('http://www.bromley.gov.uk/site/styles/css_img/main-menu-hover-home.gif') repeat-x;}
 
-#search { float: right; padding: 10px 17px; width: 270px; }
-#search label {display:none;}
-#search input { background: #ececec; border: 1px solid #768b9a; border-color: #768b9a #d1dee8 #d1dee8 #768b9a; line-height: 9px; padding: 6px 5px 4px; width: 184px; }
-#search input.button { background: #fff; border: 1px solid #8596a8; color: #333; font-family: 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; font-size:133%; height: 27px; line-height: 27px; padding: 0; vertical-align: top; width: 70px; }
+//#search { float: right; padding: 10px 17px; width: 270px; }
+//#search label {display:none;}
+//#search input { background: #ececec; border: 1px solid #768b9a; border-color: #768b9a #d1dee8 #d1dee8 #768b9a; line-height: 9px; padding: 6px 5px 4px; width: 184px; }
+//#search input.button { background: #fff; border: 1px solid #8596a8; color: #333; font-family: 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; font-size:133%; height: 27px; line-height: 27px; padding: 0; vertical-align: top; width: 70px; }
 
-// #footer renamed to #bromley-footer, image removed from background, width removed for no scrollbar, fixed font size.
-#bromley-footer { background: #666; clear: both; padding:15px 15px 50px; margin-left:-15px; color:#fff; font-size:11px;}
+// #footer renamed to #bromley-footer, fixed font size.
+#bromley-footer { background: #666 url('http://www.bromley.gov.uk/site/styles/css_img/footer.gif') top center no-repeat; clear: both; width:100%; padding:30px 15px 50px; margin-left:-15px; color:#fff; font-size:92%;}
 #bromley-footer a:link, 
 #bromley-footer a:visited 				{ color: #fff; text-decoration: none; }
 #bromley-footer a:hover,
@@ -53,33 +70,41 @@ body { color: #333; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
 
 // Bromley IE specific CSS
 .ie6 {
-    #search input { padding: 8px 5px 2px; }
-    #search input.button { padding: 0; width: 68px; line-height: 24px; }
+    div { zoom: 1; }
+    #bromley-wrapper { padding: 0; }
+    #bromley-footer { margin: 0; }
+    //#search input { padding: 8px 5px 2px; }
+    //#search input.button { padding: 0; width: 68px; line-height: 24px; }
     input.button { overflow: visible; width: 1%; }
 }
 .ie7 {
-    #search input { padding: 8px 5px 2px; }
-    #search input.button { padding: 0; width: 68px; line-height: 24px; }
+    div { zoom: 1; }
+    //#search input { padding: 8px 5px 2px; }
+    //#search input.button { padding: 0; width: 68px; line-height: 24px; }
     input.button { overflow: visible; }
 }
 .ie8 {
-    #search input { padding: 8px 5px 2px; }
-    #search input.button { padding: 0; line-height: 24px; }
+    //#search input { padding: 8px 5px 2px; }
+    //#search input.button { padding: 0; line-height: 24px; }
 }
 
 // mySociety additions
 #bromley-header { font-size: 12px; }
 .header-nav ul { margin: 0; }
 .header-nav li { list-style-type: none; }
+// Width is actually 637, but that causes wrap-around, need to ask for fixes and corner image
+.main-menu { background: url('/cobrands/bromley/main-menu1.gif') no-repeat; width: 638px; }
 .main-menu ul { margin: 0; }
 .main-menu li { list-style-type: none; }
-#search input { display: inline; margin: 0; @include border-radius(0em); }
-#search input.button { font-weight: normal; text-transform: none; }
-#bromley-footer { margin: 2em 0 0; }
+.main-menu li.last { padding-right: 0; }
+.main-menu li.last a:hover, .main-menu li.last a:active {background:url('/cobrands/bromley/main-menu-hover-home-right.gif') repeat-x;}
+//#search input { display: inline; margin: 0; @include border-radius(0em); }
+//#search input.button { font-weight: normal; text-transform: none; }
+#bromley-footer { padding-bottom: 60px; }
 #bromley-footer .footer-nav li { list-style-type: none; }
 #bromley-footer p { margin: 0; }
 
 #bromley-powered-by {
-    text-align: right;
+    clear: both;
 }
 
diff --git a/web/cobrands/bromley/layout.scss b/web/cobrands/bromley/layout.scss
index e74aab1a3..f773b47f1 100644
--- a/web/cobrands/bromley/layout.scss
+++ b/web/cobrands/bromley/layout.scss
@@ -1,6 +1,10 @@
 @import "_colours";
 @import "../fixmystreet/_layout";
 
+body { background: #9b9b9b url('http://www.bromley.gov.uk/site/styles/css_img/repeater.gif') repeat-x; }
+#bromley-wrapper { background: #fff url('http://www.bromley.gov.uk/site/styles/css_img/header-corners.gif') center 110px no-repeat; margin: 1px auto 0; padding: 0 15px; width: 955px;}
+.offline #bromley-wrapper { padding: 0 15px 20px; }
+
 // So that map appears underneath the header
 .wrapper {
     position: relative;
@@ -11,23 +15,17 @@
     }
 }
 
-body {
-    background: #fff;
-}
-
 #front-main {
     background: $primary;
     @include border-radius(1em 1em 0 0);
+    margin-bottom: 1em;
+    padding-top: 0;
     // layout sets this because base has it slightly lighter
     h2 {
         color: $primary_text;
     }
 }
 
-.tablewrapper {
-    padding-top: 1em;
-}
-
 // Don't want gap that normal site has
 body.frontpage {
     .table-cell {
@@ -36,18 +34,6 @@ body.frontpage {
         }
     }
 }
-#user-meta {
-    p {
-        top: -1em;
-    }
-}
-body.frontpage {
-    #user-meta {
-        p {
-            top: -2em;
-        }
-    }
-}
 
 // Don't want FixMyStreet logo on desktop, and we have a skip to content in
 // Bromley header
@@ -55,14 +41,18 @@ body.frontpage {
     display: none;
 }
 
+#user-meta {
+    display: none;
+}
+
 // Currently hiding, but do want some internal navigation somewhere at the end
 .nav-wrapper {
     display: none;
 }
 
-// White background, so no shadow needed.
+// White background, so no shadow or margin needed.
 .content {
-    margin-top: 1em;
+    margin: 0;
     @include box-shadow(none);
 }
 .ie6, .ie7, .ie8  {
@@ -70,26 +60,38 @@ body.frontpage {
         border: none;
     }
 }
-// Except on map pages
-body.mappage .content {
-    @include box-shadow(0px 0px 6px 1px #000);
-}
-.ie6, .ie7, .ie8  {
-    body.mappage .content {
-        border: solid 1px #666;
-    }
-}
 
 // As map can scroll and isn't at the top, give it an edge
 #map_box {
-    border-top: solid 1px #999;
-    border-bottom: solid 1px #999;
+    border: solid 1px #999;
+    top: 1em;
+    right: 0em;
+    margin: 0;
 }
 
 // Perhaps fix map location (should be in central?)
 .ie6 #map_box, .ie7 #map_box {
-    right: -30em;
-    top: 0;
+    right: -32em;
+}
+
+.general-sidebar-notes,
+#report-a-problem-sidebar {
+  position: static;
+  width: auto;
+  @include box-shadow(rgba(0, 0, 0, 0), 0, 0, 0);
+  .sidebar-tips,
+  .sidebar-notes {
+    font-size:1em;
+  }
+}
+
+.ie7 .big-green-banner {
+    right: 0;
+}
+
+// Pull OpenLayers navigation down a bit
+#fms_pan_zoom {
+    top: 0.5em !important;
 }
 
 // Fix location of aside sidebar
@@ -116,3 +118,14 @@ body.twothirdswidthpage {
     }
 }
 
+// So as not to interfere with the Bromley footer, make the fixed nav static.
+.shadow-wrap {
+  position: static;
+  padding-top: 0;
+  margin-bottom: 1em;
+  ul#key-tools {
+    border-top: none;
+    border-bottom: 1px solid $primary;
+  }
+}
+
diff --git a/web/cobrands/bromley/main-menu-hover-home-right.gif b/web/cobrands/bromley/main-menu-hover-home-right.gif
new file mode 100644
index 000000000..80c11c782
--- /dev/null
+++ b/web/cobrands/bromley/main-menu-hover-home-right.gif
diff --git a/web/cobrands/bromley/main-menu1.gif b/web/cobrands/bromley/main-menu1.gif
new file mode 100644
index 000000000..21ab45668
--- /dev/null
+++ b/web/cobrands/bromley/main-menu1.gif
diff --git a/web/cobrands/fixmystreet/_base.scss b/web/cobrands/fixmystreet/_base.scss
index c453da80c..4ac6d7d59 100644
--- a/web/cobrands/fixmystreet/_base.scss
+++ b/web/cobrands/fixmystreet/_base.scss
@@ -144,6 +144,10 @@ img {
   height:auto;
   max-width: 100%;
 }
+// So that map popups display correctly
+#popup img {
+    max-width: none;
+}
 
 select, input, textarea {
   font-size: 99%;
@@ -305,7 +309,7 @@ label{
     margin:0.5em 0;
   }
   h5 {
-    margin:0;
+    margin:0 0 1em;
     font: {
       size:1.125em;
       weight:normal;
@@ -536,7 +540,7 @@ p.label-valid {
           size:0.6875em;
           family: 'helvetica', 'arial', sans-serif;
         }
-        &:hover, &.hover, &.active {
+        &:hover, &.hover {
           text-decoration:none;
           background-color:#333;
           color:#fff;
@@ -553,7 +557,7 @@ p.label-valid {
           background-image:url('/cobrands/fixmystreet/images/sprite.png');
           background-position:center -2716px;
         }
-        &.hover, &.active {
+        &.hover {
           background-image:url('/cobrands/fixmystreet/images/sprite.png');
           background-position:center -2064px;
         }
@@ -724,7 +728,7 @@ a:hover.button-left {
     width: 0;
     height: 0;
     border-left: 0.5em solid transparent;
-    border-bottom: 0.5em solid #4B8304;
+    border-bottom: 0.5em solid $contrast1_dark;
   }
 }
 
@@ -760,7 +764,7 @@ a:hover.button-left {
       color:#fff;
       background: $contrast1;
       &:before {
-        border-bottom: 0.5em solid #4B8304;
+        border-bottom: 0.5em solid $contrast1_dark;
       }
     }
   }
diff --git a/web/cobrands/fixmystreet/_colours.scss b/web/cobrands/fixmystreet/_colours.scss
index 2463cdeeb..1a62d0282 100644
--- a/web/cobrands/fixmystreet/_colours.scss
+++ b/web/cobrands/fixmystreet/_colours.scss
@@ -5,4 +5,5 @@ $primary_b: #F3B11E;
 $primary_text: #222;
 
 $contrast1: #00BD08;
+$contrast1_dark: #4B8304;
 $contrast2: #AA8D11;
diff --git a/web/cobrands/fixmystreet/_layout.scss b/web/cobrands/fixmystreet/_layout.scss
index 57b26f42d..af422c790 100644
--- a/web/cobrands/fixmystreet/_layout.scss
+++ b/web/cobrands/fixmystreet/_layout.scss
@@ -198,14 +198,13 @@ h1 {
 // .content Is the white box
 
 // The narrow single column box
-.content{
+.content {
   width: 27em;
   margin-top: 3em;
-  background: #fff;
-  padding: 1em;
-  padding-bottom: 3em;
-  margin-left: 0.5em;
   margin-bottom: -1em;
+  margin-left: 0.5em;
+  padding: 1em 1em 3em;
+  background: #fff;
   @include box-shadow(0px 0px 6px 1px #000);
 }
 .ie6, .ie7, .ie8  {
@@ -653,9 +652,14 @@ body.twothirdswidthpage {
     top:-0.5em;
     position: absolute;
     border-top: 0.5em solid transparent;
-    border-left: 0.5em solid #4B8304;
+    border-left: 0.5em solid $contrast1_dark;
     border-bottom:none;
   }
+  span {
+    display: block;
+    font-size: 80%;
+    padding-top: 0.5em;
+  }
 }
 .ie6 .big-green-banner {
   background: $contrast1 url(/cobrands/fixmystreet/images/ie_green_chevron.gif) right center no-repeat;
@@ -677,7 +681,7 @@ body.twothirdswidthpage {
       background-position:-324px -326px;
       background-repeat:no-repeat;
       &:before {
-        border-bottom: 0.75em solid #4B8304;
+        border-bottom: 0.75em solid $contrast1_dark;
       }
     }
   }
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index be5be08cb..fe2d1a496 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -104,16 +104,17 @@ $(function(){
             // Make map full screen on non-mobile sizes.
             $html.removeClass('mobile');
             if (cobrand == 'bromley') {
-                var $window = $(window), $content = $('.content'), o = $content.offset();
-                var map_height = $window.height() - o.top;
-                if ($html.hasClass('ie6')) {
-                    map_height = $window.height() - o.top + 32;
+                var bromley_right;
+                if ($html.hasClass('ie6') || $html.hasClass('ie7')) {
+                    bromley_right = '-32em';
+                } else {
+                    bromley_right = '0em';
                 }
-                $('#map_box').prependTo('.wrapper').css({
-                    zIndex: 0, position: 'absolute',
-                    right: 0, top: '1em',
-                    width: $window.width() - o.left - $content.outerWidth(),
-                    height: map_height,
+                // Do the same as CSS (in case resized from mobile).
+                $('#map_box').prependTo('.content').css({
+                    zIndex: 1, position: 'absolute',
+                    top: '1em', left: '', right: bromley_right, bottom: '',
+                    width: '29em', height: '29em',
                     margin: 0
                 });
             } else if ($html.hasClass('ie6')) {
@@ -133,20 +134,25 @@ $(function(){
             }
             if (typeof fixmystreet !== 'undefined') {
                 if (cobrand == 'bromley') {
-                    $('#bromley-footer').hide();
+                    //$('#bromley-footer').hide();
+                } else {
+                    fixmystreet.state_map = 'full';
                 }
-                fixmystreet.state_map = 'full';
             }
             if (typeof fixmystreet !== 'undefined' && fixmystreet.page == 'around') {
                 // Remove full-screen-ness
-                if (cobrand != 'bromley') {
+                var banner_text;
+                if (cobrand == 'bromley') {
+                    banner_text = 'Click map to report a problem<span>Yellow pins show existing reports</span>';
+                } else {
                     $('#site-header').show();
+                    banner_text = 'Click map to report a problem';
                 }
                 $('#fms_pan_zoom').css({ top: '4.75em !important' });
                 $('.big-green-banner')
                     .removeClass('mobile-map-banner')
                     .prependTo('#side')
-                    .text('Click map to report a problem');
+                    .html(banner_text);
             }
             $('span.report-a-problem-btn').css({ cursor:'' }).off('.reportBtn');
         }
@@ -224,10 +230,15 @@ $(function(){
     /*
      * Show stuff on input focus
      */
-    $('.form-focus-hidden').hide();
-    $('.form-focus-trigger').on('focus', function(){
-        $('.form-focus-hidden').fadeIn(500);
-    });
+    var form_focus_data = $('.form-focus-trigger').map(function() {
+        return $(this).val();
+    }).get().join('');
+    if (!form_focus_data) {
+        $('.form-focus-hidden').hide();
+        $('.form-focus-trigger').on('focus', function(){
+            $('.form-focus-hidden').fadeIn(500);
+        });
+    }
 
     /*
      * Show on click - pretty generic
@@ -342,12 +353,12 @@ $.fn.drawer = function(id, ajax) {
     });
 };
 
-    if ($('html.mobile').length) {
+    if ($('html.mobile').length || cobrand == 'bromley') {
         $('#council_wards').hide().removeClass('hidden-js').find('h2').hide();
         $('#key-tool-wards').click(function(e){
             e.preventDefault();
             $('#council_wards').slideToggle('800', function(){
-              $('#key-tool-wards').toggleClass('active');
+              $('#key-tool-wards').toggleClass('hover');
             });
         });
     } else {
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index 8ea54cac3..a92d02c84 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -7,6 +7,32 @@ function fixmystreet_update_pin(lonlat) {
     );
     document.getElementById('fixmystreet.latitude').value = lonlat.lat || lonlat.y;
     document.getElementById('fixmystreet.longitude').value = lonlat.lon || lonlat.x;
+
+    $.getJSON('/report/new/ajax', {
+            latitude: $('#fixmystreet\\.latitude').val(),
+            longitude: $('#fixmystreet\\.longitude').val()
+    }, function(data) {
+        if (data.error) {
+            if (!$('#side-form-error').length) {
+                $('<div id="side-form-error"/>').insertAfter($('#side-form'));
+            }
+            $('#side-form-error').html('<h1>Reporting a problem</h1><p>' + data.error + '</p>').show();
+            $('#side-form').hide();
+            return;
+        }
+        $('#side-form, #site-logo').show();
+        $('#councils_text').html(data.councils_text);
+        $('#form_category_row').html(data.category);
+        if ( data.extra_name_info ) {
+            // there might be a first name field on some cobrands
+            var lb = $('#form_first_name').prev() || $('#form_name').prev();
+            lb.before(data.extra_name_info);
+        }
+    });
+
+    if (!$('#side-form-error').is(':visible')) {
+        $('#side-form, #site-logo').show();
+    }
 }
 
 function fixmystreet_activate_drag() {
@@ -420,7 +446,7 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
             fixmystreet.markers.addFeatures( markers );
             fixmystreet_activate_drag();
         }
-        fixmystreet_update_pin(lonlat);
+
         // check to see if markers are visible. We click the
         // link so that it updates the text in case they go
         // back
@@ -428,28 +454,15 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
             fixmystreet.state_pins_were_hidden = true;
             $('#hide_pins_link').click();
         }
+
+        // Store pin location in form fields, and check coverage of point
+        fixmystreet_update_pin(lonlat);
+
+        // Already did this first time map was clicked, so no need to do it again.
         if (fixmystreet.page == 'new') {
             return;
         }
-        $.getJSON('/report/new/ajax', {
-                latitude: $('#fixmystreet\\.latitude').val(),
-                longitude: $('#fixmystreet\\.longitude').val()
-        }, function(data) {
-            if (data.error) {
-                // XXX If they then click back and click somewhere in the area, this error will still show.
-                $('#side-form').html('<h1>Reporting a problem</h1><p>' + data.error + '</p>');
-                return;
-            }
-            $('#councils_text').html(data.councils_text);
-            $('#form_category_row').html(data.category);
-            if ( data.extra_name_info ) {
-                // there might be a first name field on some cobrands
-                var lb = $('#form_first_name').prev() || $('#form_name').prev();
-                lb.before(data.extra_name_info);
-            }
-        });
 
-        $('#side-form, #site-logo').show();
         fixmystreet.map.updateSize(); // might have done, and otherwise Firefox gets confused.
         /* For some reason on IOS5 if you use the jQuery show method it
          * doesn't display the JS validation error messages unless you do this