Merge pull request #502 from mysociety/oxfordshire-usability-recommendations

Oxfordshire: Implement usability recommendations

13 files changed, 176 insertions, 95 deletions

diff --git a/perllib/FixMyStreet/Cobrand/Oxfordshire.pm b/perllib/FixMyStreet/Cobrand/Oxfordshire.pm
index 173d5a09f..33611b219 100644
--- a/perllib/FixMyStreet/Cobrand/Oxfordshire.pm
+++ b/perllib/FixMyStreet/Cobrand/Oxfordshire.pm
@@ -53,6 +53,9 @@ sub example_places {
 # don't send questionnaires to people who used the OCC cobrand to report their problem
 sub send_questionnaires { return 0; }
 
+# increase map zoom level so street names are visible
+sub default_map_zoom { return 3; }
+
 # let staff hide OCC reports
 sub users_can_hide { return 1; }
 
diff --git a/templates/web/default/common_header_tags.html b/templates/web/default/common_header_tags.html
index bec3844be..2c93a866c 100644
--- a/templates/web/default/common_header_tags.html
+++ b/templates/web/default/common_header_tags.html
@@ -1,6 +1,8 @@
 [% USE date %][% USE Math %]
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 
+<meta name="cobrand" content="[% c.cobrand.moniker %]">
+
 <script type="text/javascript" src="/js/validation_rules.js?[% Math.int( date.now / 3600 ) %]"></script>
 <script type="text/javascript" src="/js/translation_strings.[% lang_code %].js?[% Math.int( date.now / 3600 ) %]"></script>
 
diff --git a/templates/web/default/report/_council_sent_info.html b/templates/web/default/report/_council_sent_info.html
new file mode 100644
index 000000000..958562dc2
--- /dev/null
+++ b/templates/web/default/report/_council_sent_info.html
@@ -0,0 +1,5 @@
+[% IF problem.whensent || problem.can_display_external_id %]
+    <small class="council_sent_info"><br>
+        [% problem.processed_summary_string(c) %]
+    </small>
+[% END %]
diff --git a/templates/web/default/report/_main.html b/templates/web/default/report/_main.html
index 789f8e43e..0124052c0 100644
--- a/templates/web/default/report/_main.html
+++ b/templates/web/default/report/_main.html
@@ -5,11 +5,7 @@
     [% problem.meta_line(c) | html %]
     [%- IF !problem.used_map AND c.cobrand.moniker != 'emptyhomes' %]; <strong>[% loc('there is no pin shown as the user did not use the map') %]</strong>[% END %]
     [% IF problem.bodies_str %]
-        [% IF problem.whensent || problem.can_display_external_id %]
-            <small class="council_sent_info"><br>
-                [% problem.processed_summary_string(c) %]
-            </small>
-        [% END %]
+        [% INCLUDE 'report/_council_sent_info.html' %]
     [% ELSE %]
         <br><small>[% loc('Not reported to council') %]</small>
     [% END %]
diff --git a/templates/web/oxfordshire/around/extra_text.html b/templates/web/oxfordshire/around/extra_text.html
new file mode 100644
index 000000000..439bf00a2
--- /dev/null
+++ b/templates/web/oxfordshire/around/extra_text.html
@@ -0,0 +1,5 @@
+<div class="extra-text">
+    <p>Please do not use this form for reporting <a href="/faq#pothole" target="_blank">emergencies and urgent problems</a>.</p>
+
+    <p><img src="/i/pin-yellow.png" class="extra-text__image" width="48" height="64" /> - <b>these are problems that have already been reported</b>.<br>Click them to see more details.</p>
+</div>
diff --git a/templates/web/oxfordshire/around/intro.html b/templates/web/oxfordshire/around/intro.html
index 3b96ec82f..68c38c030 100644
--- a/templates/web/oxfordshire/around/intro.html
+++ b/templates/web/oxfordshire/around/intro.html
@@ -1 +1 @@
-            <h1 class="main">Report a street or road problem</h1>
+            <h1 class="main">Find and report road or street problems</h1>
diff --git a/templates/web/oxfordshire/footer.html b/templates/web/oxfordshire/footer.html
index 2b8a066e7..29146d935 100644
--- a/templates/web/oxfordshire/footer.html
+++ b/templates/web/oxfordshire/footer.html
@@ -32,17 +32,18 @@
 
 <!-- [% INCLUDE 'debug_footer.html' %] -->
     </div> <!-- .wrapper -->
-	<div id="oxford-footer" class="desk-only">
-		<address>
-			<strong>Oxfordshire County Council</strong><br>
-			<a href="http://www.oxfordshire.gov.uk/cms/public-site/contact-oxfordshire-county-council" title="Contac the council">Contact the council</a>
-		</address>
-		<ul><!-- use | between items -->
-			<li class="powered-by-fms">
-				<a href="http://www.fixmystreet.com/">Powered&nbsp;by&nbsp;<img src="/cobrands/oxfordshire/images/fms-logo-inverse.png" alt="FixMyStreet"></a>
-			</li>
-		</ul>
-	</div>
+    <div id="oxford-footer" class="desk-only">
+        <address>
+            <strong>Oxfordshire County Council</strong><br>
+            <a href="http://www.oxfordshire.gov.uk/cms/public-site/contact-oxfordshire-county-council" title="Contact the council">Contact the council</a><br>
+            <a href="/privacy">View our terms and conditions</a>
+        </address>
+        <ul><!-- use | between items -->
+            <li class="powered-by-fms">
+                <a href="http://www.fixmystreet.com/">Powered&nbsp;by&nbsp;<img src="/cobrands/oxfordshire/images/fms-logo-inverse.png" alt="FixMyStreet"></a>
+            </li>
+        </ul>
+    </div>
 </div> <!-- oxford-wrapper -->
 </body>
 </html>
diff --git a/templates/web/oxfordshire/js/translation_strings.html b/templates/web/oxfordshire/js/translation_strings.html
new file mode 100644
index 000000000..e326da0a8
--- /dev/null
+++ b/templates/web/oxfordshire/js/translation_strings.html
@@ -0,0 +1,40 @@
+    translation_strings = {
+        update: '[% loc('Please enter a message') | replace("'", "\\'") %]',
+        title: '[% loc('Please enter a subject') | replace("'", "\\'") %]',
+        detail: '[% loc('Please enter some details') | replace("'", "\\'") %]',
+        name: {
+            required: '[% loc('Please enter your name') | replace("'", "\\'") %]',
+            validName: '[% loc('Please enter your full name, councils need this information – if you do not wish your name to be shown on the site, untick the box below') | replace("'", "\\'") %]'
+        },
+        category: '[% loc('Please choose a category') | replace("'", "\\'") %]',
+        rznvy: {
+            required: '[% loc('Please enter your email') | replace("'", "\\'") %]',
+            email: '[% loc('Please enter a valid email') | replace("'", "\\'") %]'
+        },
+        email: {
+            required: '[% loc('Please enter your email') | replace("'", "\\'") %]',
+            email: '[% loc('Please enter a valid email') | replace("'", "\\'") %]'
+        },
+        fms_extra_title: '[% loc('Please enter your title') | replace("'", "\\'") %]',
+        first_name: '[% loc('Please enter your first name') | replace("'", "\\'") %]',
+        last_name: '[% loc('Please enter your second name') | replace("'", "\\'") %]',
+        geolocate: '[% loc('or locate me automatically') | replace("'", "\\'") %]',
+        right_place: '[% loc('Right place?') | replace("'", "\\'") %]',
+        try_again: '[% loc('Try again') | replace("'", "\\'") %]',
+        place_pin_on_map: '[% loc('Place pin on map') | replace("'", "\\'") %]',
+        home: '[% loc('Home') | replace("'", "\\'") %]',
+        back: '[% loc('Back') | replace("'", "\\'") %]',
+        how_to_send: '[% loc('How to send successful reports') | replace("'", "\\'") %]',
+        more_details: '[% loc('Details') | replace("'", "\\'") %]',
+
+        geolocation_declined: '[% loc('You declined; please fill in the box above') | replace("'", "\\'") %]',
+        geolocation_no_position: '[% loc('Could not look up location') | replace("'", "\\'") %]',
+        geolocation_no_result: '[% loc('No result returned') | replace("'", "\\'") %]',
+        geolocation_unknown: '[% loc('Unknown error') | replace("'", "\\'") %]',
+
+        reporting_a_problem: '[% loc('Reporting a problem') | replace("'", "\\'") %]',
+        ok: '[% loc('OK') | replace("'", "\\'") %]',
+        map: '[% loc('MAP') | replace("'", "\\'") %]',
+
+        report_problem_heading: '[% loc('Click on the map to report a problem') | replace("'", "\\'") %]'
+    };
diff --git a/templates/web/oxfordshire/report/_council_sent_info.html b/templates/web/oxfordshire/report/_council_sent_info.html
new file mode 100644
index 000000000..464c10256
--- /dev/null
+++ b/templates/web/oxfordshire/report/_council_sent_info.html
@@ -0,0 +1,16 @@
+[% IF problem.whensent || problem.can_display_external_id %]
+    <small class="council_sent_info"><br>
+        [% IF problem.whensent %]
+        [% problem.duration_string(c) %]<br>
+        [% END %]
+        <strong>
+        [% IF problem.can_display_external_id %]
+            [% IF problem.whensent %]
+                Council ref:&nbsp;[% problem.external_id %]
+            [% ELSE %]
+                [% problem.external_body %] ref:&nbsp;[% problem.external_id %]
+            [% END %]
+        [% END %]
+        </strong>
+    </small>
+[% END %]
diff --git a/templates/web/oxfordshire/report/new/councils_text_all.html b/templates/web/oxfordshire/report/new/councils_text_all.html
index 638c9d7de..f205418d7 100644
--- a/templates/web/oxfordshire/report/new/councils_text_all.html
+++ b/templates/web/oxfordshire/report/new/councils_text_all.html
@@ -1,24 +1,5 @@
-<div class="oxfordshire-preamble">
-    <p>
-        Please <strong>do not</strong> use this form for reporting 
-        <strong>emergencies and urgent</strong> problems. 
-        You should report these by contacting 0845&nbsp;310&nbsp;11&nbsp;11.
-    </p>
-    <p>
-        Our opening hours are 8.30&nbsp;to&nbsp;5, Monday to Thursday and 8.30&nbsp;to&nbsp;4 on Fridays. 
-    </p>
-        If your enquiry is related to Highways and is outside of our opening hours and 
-        cannot wait, please contact Thames Valley Police on 101.
-    </p>
-</div>
-
-<p>You can use this form to report a problem or to make an enquiry about roads
-and pavements in your area.
-The subject and details of the problem will be public, plus your name if you
-give us permission. If you report a fault on a road that is not owned by
-Oxfordshire County Council we will pass the report on to the relevant body. 
-
-<p>Please use <a href="/faq#pothole" target="_blank">our chart</a> to determine
-the size of any pot holes being reported and whether to submit a report using
-this online form or by telephone.</p>
-
+<p>
+    All the information you provide here will be sent to the
+    <strong>relevant department</strong>. The subject and details of the
+    problem will be public, plus your name if you give us permission.
+</p>
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 1bcb8f3c0..d4dfdf99f 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -53,16 +53,10 @@ function tabs(elem, indirect) {
 $(function(){
     var $html = $('html');
 
-    var cobrand;
+    var cobrand = $('meta[name="cobrand"]').attr('content');
     var is_small_map = false;
-    if (window.location.href.indexOf('bromley') != -1) {
-        cobrand = 'bromley';
+    if (cobrand === 'bromley' || cobrand === 'oxfordshire') {
         is_small_map = true;
-    } else if (window.location.href.indexOf('oxfordshire') != -1) {
-        cobrand = 'oxfordshire';
-        is_small_map = true;
-    } else if (window.location.href.indexOf('zurich') != -1 || window.location.href.indexOf('zueri') != -1) {
-        cobrand = 'zurich';
     }
 
     // Deal with switching between mobile and desktop versions on resize
@@ -447,8 +441,6 @@ $.fn.drawer = function(id, ajax) {
             var offset = -18 * 16;
             if (cobrand == 'bromley') {
                 offset = -110;
-            } else if (cobrand == 'oxfordshire') {
-                offset = -110;
             }
             heightFix(window, '.content', offset, 1);
             // in case we have a map that isn't full screen
diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss
index 8e6b9f227..7dc6b8be6 100644
--- a/web/cobrands/oxfordshire/layout.scss
+++ b/web/cobrands/oxfordshire/layout.scss
@@ -89,15 +89,14 @@ body.twothirdswidthpage {
 
 // show the sidebar tips and notices in the document flow, i.e., in the
 // left-hand column, rather than in smaller text above the map
-.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;
-  }
+.general-sidebar-notes {
+    position: static;
+    width: auto;
+    @include box-shadow(rgba(0, 0, 0, 0), 0, 0, 0);
+    .sidebar-tips,
+    .sidebar-notes {
+        font-size:1em;
+    }
 }
 
 // To prevent font size larger interfering with the fixed Oxfordshire layout
@@ -105,7 +104,10 @@ body.twothirdswidthpage {
 .full-width { width: 464px; }
 .shadow-wrap { width: 464px; }
 
-#map_box { width: 464px; }
+#map_box {
+    width: 956px;
+    height: 600px;
+}
 .content { width: 432px; }
 
 body.fullwidthpage .content { width: auto; }
@@ -123,6 +125,39 @@ body.twothirdswidthpage .content {
         }
     }
 }
+
+body.mappage {
+    .content {
+        width: 345px;
+        padding: 1em;
+        position: relative;
+        z-index: 1;
+    }
+
+    .content, .ie7 .content, .ie9 .content {
+        margin: 3em 0 0 1em;
+        @include box-shadow(0px 0px 6px 1px #000);
+    }
+
+    .container {
+        width: auto;
+        min-height: 635px;
+        z-index: auto;
+    }
+    .full-width { width: 377px; }
+    .shadow-wrap { width: 377px; }
+
+    .general-sidebar-notes,
+    #report-a-problem-sidebar {
+        top: 1em;
+        left: 23.5em;
+    }
+
+    #forgotten-pw {
+        left: 21.6em;
+    }
+}
+
 .ie6, .ie7 {
     body.mappage .container {
         width: 464px;
@@ -134,8 +169,9 @@ body.twothirdswidthpage .content {
 #map_box {
     border: solid 1px #999;
     top: 1em;
-    right: 0em;
-    margin: 0;
+    right: 0;
+    left: 0;
+    margin: 0 1em;
 }
 
 // Perhaps fix map location (should be in central?)
@@ -154,8 +190,14 @@ body.twothirdswidthpage .content {
     }
 }
 
-#front-main #postcodeForm div {
+#oxford-wrapper #front-main #postcodeForm div {
   border: 1px solid #fff; // because orange "Go" button (see below) abuts this border, looks a tiny bit better if it's not dark green
+
+  #pc {
+    padding: 0 2%;
+    width: 89%;
+    height: 38px;
+  }
 }
 
 // styled Oxfordshire buttons -- including the "Go" button on the postcode form -- to be orange:
@@ -180,16 +222,24 @@ input.green-btn{
   cursor: pointer;
 }
 
-// map instructions (click on 'details' to see details) are a specific requirement from OCC management
-// populated dynamically by position_map.js
-#occ-map-instructions {
-    display: none;
-    position: absolute;
-    color: #666;
-    margin: 0;
-    p {
-      padding: 0.5em;
+.big-green-banner {
+    text-align: left;
+    text-transform: inherit;
+    font-family: inherit;
+    font-size: 1.5em;
+    padding: 0.5em 2em 0.5em 0.5em;
+    line-height: 1.3;
+    background: #339e00 url("/cobrands/fixmystreet/images/sprite.png") right -2177px no-repeat;
+
+    .ie6 &, .ie7 & {
+        zoom: 1;
+        position: relative;
     }
 }
 
+.extra-text__image {
+    float: left;
+    margin-right: 1em;
+}
+
 @import "oxfordshire";
diff --git a/web/cobrands/oxfordshire/position_map.js b/web/cobrands/oxfordshire/position_map.js
index c0e7e6399..9e299ea72 100644
--- a/web/cobrands/oxfordshire/position_map.js
+++ b/web/cobrands/oxfordshire/position_map.js
@@ -1,3 +1,9 @@
+/**
+ * Position the map box correctly on window resize.
+ *
+ * Called from fixmystreet.js when the window 'resize' event is fired
+ * and the page is transitioning to a desktop version.
+ */
 function position_map_box() {
     var $html = $('html');
     var oxfordshire_right;
@@ -6,33 +12,17 @@ function position_map_box() {
     } else {
         oxfordshire_right = '0em';
     }
-    
-    var map_box_width = 464;
-    var map_box_height = 464;
+
+    var map_box_width = "956px";
+    var map_box_height = "600px";
     // Do the same as CSS (in case resized from mobile).
-    $('#map_box').prependTo('.content').css({
+    $('#map_box').prependTo('.wrapper').css({
         zIndex: 1, position: 'absolute',
         top: '1em', left: '', right: oxfordshire_right, bottom: '',
-        width: map_box_width + 'px', height: map_box_height +'px',
-        margin: 0
+        width: map_box_width, height: map_box_height,
+        margin: "0 1em"
     });
-    if($('#map_box').length) {
-        if (! $('#occ-map-instructions').length) {
-            $('#map_box').after("<div id='occ-map-instructions'><p>" +
-                "Click on a pin and then on the &ldquo;details&rdquo; link to see an individual report detail.</p></div>");
-        }
-        var mb_y = $('#map_box').position().top + map_box_height ;
-        $('#occ-map-instructions').show().css({
-            left: '',
-            right: oxfordshire_right,
-            bottom: '',
-            top: mb_y +'px',
-            width: map_box_width
-        });
-    }
-    
 }
 
 function map_fix() {}
 var slide_wards_down = 1;
-