[Oxfordshire] Full screen map design

 - Replace .big-green-banner with .click-the-map
    Design follows similar change in Collideoscope. #skip-this-step link
    is hidden for normal users, shown when tabbed to, or when javascript
    is disabled.
 - Move RSS link to bottom of sidebar
 - Combine 'on the map' and 'nearby' tabs into a single list

8 files changed, 303 insertions, 137 deletions

diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index fdecee9db..31925e977 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -463,7 +463,8 @@ $.fn.drawer = function(id, ajax) {
                 offset = -110;
             }
             if (cobrand == 'oxfordshire') {
-                offset = -13 * 16;
+                // Oxfordshire uses box-sizing:border-box and padding to work out height
+                offset = 0;
             }
             heightFix(window, '.content', offset, 1);
             // in case we have a map that isn't full screen
diff --git a/web/cobrands/oxfordshire/_colours.scss b/web/cobrands/oxfordshire/_colours.scss
index 900f96d3d..ed494674a 100644
--- a/web/cobrands/oxfordshire/_colours.scss
+++ b/web/cobrands/oxfordshire/_colours.scss
@@ -2,6 +2,8 @@
 
 $oxfordshire_dk_green: #114500;
 $oxfordshire_lt_green: #339E00;
+$oxfordshire_very_light_green: #f6fcf0;
+$oxfordshire_mid_grey_green: #e0e5da;
 
 $primary: $oxfordshire_lt_green;
 $primary_b: $oxfordshire_dk_green;
@@ -10,6 +12,9 @@ $primary_text: #fff;
 $base_bg: #fff;
 $base_fg: #000;
 
+// Taken from the OCC website
+$oxfordshire_link_colour: #0c62ba;
+
 /* Unused here */
 $map_nav_bg: #222;
 $nav_fg: #fff;
@@ -19,7 +24,7 @@ $col_click_map: $oxfordshire_lt_green;
 $col_click_map_dark: $primary_text;
 
 $col_fixed_label: $oxfordshire_lt_green;
-$col_fixed_label_dark: $primary_text;
+$col_fixed_label_dark: mix(#000, $oxfordshire_lt_green, 50%);
 
 // Oxfordshire have toasty orange buttons
 
diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss
index c3242dbec..dae1e02f0 100644
--- a/web/cobrands/oxfordshire/base.scss
+++ b/web/cobrands/oxfordshire/base.scss
@@ -45,3 +45,15 @@ dd, p {
   line-height: 1.4em;
 }
 
+// TODO: Should this be applied to the base base stylesheet, to prevent possible similar issues in other cobrands?
+#sub_map_links {
+  line-height: 1em;
+}
+
+body.frontpage {
+    .issue-list-a, .list-a {
+        li .text {
+            padding-left: 3em;
+        }
+    }
+}
diff --git a/web/cobrands/oxfordshire/images/click-map-chevron-small.gif b/web/cobrands/oxfordshire/images/click-map-chevron-small.gif
new file mode 100644
index 000000000..fdc871c41
--- /dev/null
+++ b/web/cobrands/oxfordshire/images/click-map-chevron-small.gif
diff --git a/web/cobrands/oxfordshire/images/logo-light-green.gif b/web/cobrands/oxfordshire/images/logo-light-green.gif
new file mode 100644
index 000000000..6bf7b6940
--- /dev/null
+++ b/web/cobrands/oxfordshire/images/logo-light-green.gif
diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss
index 9b6308e09..93361ad95 100644
--- a/web/cobrands/oxfordshire/layout.scss
+++ b/web/cobrands/oxfordshire/layout.scss
@@ -1,8 +1,9 @@
 @import "_colours";
 @import "../sass/layout";
+@import "../sass/report_list";
 
 body, body a {
-  font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; 
+  font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
 }
 
 #front-main {
@@ -65,23 +66,6 @@ body.twothirdswidthpage {
     }
 }
 
-//-------------------------------------------------
-// following declarations concern the map display:
-//-------------------------------------------------
-// So that map appears underneath the header
-.wrapper {
-    position: relative;
-    .table-cell {
-      padding-left: 13px; // added 13px to match Oxfordshire's normal look
-      padding-right: 13px;
-    }
-}
-.ie6, .ie7 {
-    .wrapper {
-        padding-top: 1em;
-    }
-}
-
 // To prevent font size larger interfering with the fixed Oxfordshire layout
 .container { width: auto; }
 .full-width { width: 464px; }
@@ -110,59 +94,204 @@ body.twothirdswidthpage .content {
 }
 
 body.mappage {
-    .content {
-        width: 345px;
-        padding: 1em;
-        position: relative;
-        z-index: 1;
+  $mappage-header-height: 60px;
+
+  #oxford-wrapper {
+    width: auto;
+    padding: 0;
+    background: transparent;
+  }
+
+  #oxford-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 2; // 1 more than `body.mappage .content`
+    width: auto;
+    min-height: $mappage-header-height;
+    padding: 0;
+    background-color: #069b01; // picked from header.jpg
+    background-position: 100% 40%;
+    overflow: auto;
+    box-shadow: 0 0 5px rgba(0,0,0,0.3);
+
+    & > * {
+      display: none;
     }
 
-    .container {
-        width: auto;
-        min-height: 635px;
-        z-index: auto;
+    a.logo {
+      display: block;
+      float: left;
+      height: $mappage-header-height;
+      width: 200px;
+      margin: 0;
+      background: transparent url("/cobrands/oxfordshire/images/logo-light-green.gif") no-repeat 50% 50%;
+      text-indent: -999px;
+
+      * {
+        display: none;
+      }
     }
-    .full-width { width: 377px; }
-    .shadow-wrap { width: 377px; }
 
-    #report-a-problem-sidebar {
-        top: 1em;
-        left: 23.5em;
+    #navigation {
+      display: block;
+      position: static;
+      float: right;
     }
-}
 
-.ie6, .ie7 {
-    body.mappage .container {
-        width: 464px;
-        margin-left: 0;
+    .menubar {
+      display: block;
+      width: auto;
+      border-top: none;
+      padding: 0;
+
+      // override super-specific "#navigation .menubar .menu-inner .menu>li>a"
+      // selector from OCC header styles in oxfordshire.scss
+      .menu-inner .menu {
+        li {
+          margin-bottom: 0;
+        }
+
+        a, span {
+          line-height: 20px;
+          padding-top: ($mappage-header-height - 20px) / 2;
+          padding-bottom: ($mappage-header-height - 20px) / 2;
+        }
+      }
     }
-}
 
-// As map can scroll and isn't at the top, give it an edge
-#map_box {
-    border: solid 1px #999;
-    top: 1em;
-    right: 0;
-    left: 0;
-    margin: 0 1em;
+    .oxford-user {
+      display: block;
+      font-size: 13px;
+      margin: 0;
+      color: mix(#ddd, #069b01, 80%);
+
+      p {
+          margin: 0;
+          padding-top: ($mappage-header-height - 20px) / 2;
+          padding-bottom: ($mappage-header-height - 20px) / 2;
+          line-height: 20px;
+      }
+
+      a {
+        padding: 0 10px;
+        text-decoration: none;
+      }
+    }
+  }
+
+  .wrapper .table-cell {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .container {
+    width: auto;
+  }
+
+  .content {
+    padding: 1em;
+    padding-top: $mappage-header-height + 10px;
+    position: relative;
+    z-index: 1;
+    box-shadow: 0 0 5px rgba(0,0,0,0.3);
+    background-color: $oxfordshire_very_light_green;
+
+    // fixmystreet.js gives this element a min-height equal to the window height.
+    // Set border-box sizing, so that our padding doesn't get added onto height.
+    box-sizing: border-box;
+
+    .extra-text {
+      padding: 1em;
+      margin: 0 -1em;
+      border-bottom: 1px solid $oxfordshire_mid_grey_green;
+
+      p:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .full-width {
+      width: auto;
+      margin: 0 -1em;
+    }
+
+    input[type="file"] {
+      background-color: transparent;
+    }
+  }
+
+  // Space between green header and sidebar content
+  #report-a-problem-main,
+  .problem-header {
+    padding-top: 1em;
+  }
+
+  // The "Fixed" / "Unknown" tabs on Oxford report pages are "folded"
+  // round right edge of the sidebar, rather than over the top of it.
+  .banner {
+    margin: 0 -1em; // line tab up with right edge of 1em padded sidebar
+
+    // Float the tab, rather than absolute positioning, to benefit
+    // from text wrapping and stop content being hidden behind it.
+    p {
+      position: relative; // still required for :before positioning
+      top: auto;
+      right: auto;
+      float: right;
+      margin: 1em -0.75em 0.5em 1em;
+
+      // Swap "fold" triangle to bottom right corner of box, rather than top left.
+      &:before {
+        left: auto;
+        right: 0;
+        top: auto;
+        bottom: -0.75em;
+        border-left: none;
+        border-bottom: none !important; // override default id selectors
+        border-top: 0.75em solid #888;
+        border-right: 0.75em solid transparent;
+      }
+
+      &#fixed:before {
+        border-top-color: #1D4D05; // dark green
+        border-top-color: $col_fixed_label_dark;
+      }
+    }
+  }
+
+  #oxford-footer {
+    display: none;
+  }
 }
 
-// Perhaps fix map location (should be in central?)
-.ie6 #map_box, .ie7 #map_box {
-    right: -480px;
+.report-list, .issue-list-a {
+    li:after {
+        background-color: $oxfordshire_mid_grey_green;
+    }
+
+    h3 {
+        color: $oxfordshire_link_colour;
+    }
 }
 
-// So as not to interfere with the Oxfordshire footer, make the fixed nav ("get updates" etc) static.
 .shadow-wrap {
-    position: static;
-    padding-top: 0;
-    margin-bottom: 1em;
+    width: 432px;
+
     ul#key-tools {
-        border-top: none;
-        border-bottom: 1px solid $primary;
+        -webkit-box-shadow: 0em 0px 1em 1em $oxfordshire_very_light_green;
+        -moz-box-shadow: 0em 0px 1em 1em $oxfordshire_very_light_green;
+        box-shadow: 0em 0px 1em 1em $oxfordshire_very_light_green;
+        border-top-width: 2px;
     }
 }
 
+// Stop bottom of update form disappearing behind the #key-tools shadow
+#update_form {
+  padding-bottom: 4em;
+}
+
 #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
 
@@ -195,21 +324,48 @@ input.green-btn{
   cursor: pointer;
 }
 
-.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;
+.click-the-map {
+    border-bottom-color: $oxfordshire_mid_grey_green;
 
-    .ie6 &, .ie7 & {
-        zoom: 1;
-        position: relative;
+    p {
+        color: $oxfordshire_lt_green;
+        background-image: url(/cobrands/oxfordshire/images/click-map-chevron-small.gif);
     }
 }
 
+#skip-this-step {
+  display: block;
+  color: inherit;
+  margin: 0 -15px;
+  padding: 16px;
+  font-size: 18px;
+  line-height: 20px;
+  border-bottom: 1px solid #E7E1C0;
+  background: #FDF4C5;
+
+  em {
+    font-style: normal;
+    text-decoration: underline;
+    color: $primary;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  html.js & {
+    // If javascript is enabled, hide the skip link off-screen,
+    // but keep it visible for screen readers.
+    position: absolute;
+    top: -999px;
+
+    &:focus {
+      // And show it again if it receives focus (eg: via tab key)
+      position: static;
+    }
+  }
+}
+
 .extra-text__image {
     float: left;
     margin-right: 1em;
diff --git a/web/cobrands/oxfordshire/oxfordshire.scss b/web/cobrands/oxfordshire/oxfordshire.scss
index d6b31586c..46de1f22b 100644
--- a/web/cobrands/oxfordshire/oxfordshire.scss
+++ b/web/cobrands/oxfordshire/oxfordshire.scss
@@ -7,9 +7,9 @@
 
 
 body {
-  font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; 
-  line-height:18px; 
-  a {text-decoration:none; color:#0c62ba}
+  font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
+  line-height:18px;
+  a, a:visited {text-decoration:none; color:$oxfordshire_link_colour}
   a { font-size: 1em; } // mySociety
   a:hover {text-decoration:underline}
   margin:0;
@@ -27,15 +27,15 @@ body {
 }
 
 #oxford-header {
-  padding:0 16px 7px 16px; 
-  clear:both; 
-  overflow:hidden; 
-  position:relative; 
+  padding:0 16px 7px 16px;
+  clear:both;
+  overflow:hidden;
+  position:relative;
   width:958px;
 
   /* note================= */
   height: 133px;
-  height:auto !important; 
+  height:auto !important;
   min-height:133px;
   /* note================= */
 
@@ -47,7 +47,7 @@ body {
   a.logo,  a.logo span {width:173px; height:38px; background: url("/cobrands/oxfordshire/images/logo.jpg") no-repeat 0 0;}
 
   h1 {
-    float:left; padding:8px 0 0 10px; margin:0; font-size:1.25em; line-height:normal; 
+    float:left; padding:8px 0 0 10px; margin:0; font-size:1.25em; line-height:normal;
     font-weight:bold; color:#ffffff; white-space:nowrap;font-family:"Trebuchet MS",Tahoma,Arial,sans-serif;
   }
   span.header {
@@ -76,73 +76,71 @@ body {
   }
 }
 
-
-
 #oxford-main-menu {
   clear: both;
   margin: 0;
   padding: 0;
   font-size: 1em;
   position: relative;
-  ul { 
+  ul {
     margin: 0 0 0 330px;
     position: relative;
     li {
       margin: 0;
-      list-style-type: none; 
-      float:left; 
+      list-style-type: none;
+      float:left;
       width:126px;
       text-align:center;
       background: #e0e0e0;
       padding: 8px 0;
-      margin: 0 0 0 2px;  
+      margin: 0 0 0 2px;
     }
   }
   // from occ.css (client site): #main .view-features-for-homepage ul.tabs
   ul.tabs {
-    float:left; 
-    position:relative; 
-    padding:0; 
+    float:left;
+    position:relative;
+    padding:0;
     margin:0.5em 0 0 0;
-    z-index:10; 
+    z-index:10;
     width: 990px;
-    //width:635px; 
-    min-height:32px; 
-    overflow:hidden; 
-    clear:both; 
+    //width:635px;
+    min-height:32px;
+    overflow:hidden;
+    clear:both;
     background: #939393 url("/cobrands/oxfordshire/images/tabs-featured.png") repeat 0 0;
     li {
-      float:left; 
-      padding:0 0 0px 1px; 
-      margin:0; 
-      font:0.813em/27px "Trebuchet MS"; 
-      color:#ffffff; 
-      height:32px; 
+      float:left;
+      padding:0 0 0px 1px;
+      margin:0;
+      font:0.813em/27px "Trebuchet MS";
+      color:#ffffff;
+      height:32px;
       background: #666 url("/cobrands/oxfordshire/images/divider1x32.png") no-repeat 0 0;
     }
     li.first {padding:0; background:none}
     span, // mySociety
     a {
-      display:block; 
-      position:relative; 
-      padding:8px 0 0 0; 
-      font:bold 1em "Trebuchet MS"; 
-      height:24px; 
-      color:#ffffff; 
-      text-align:center; 
-      background: #939393 url("/cobrands/oxfordshire/images/tabs-featured.png") repeat-x 0 0; 
+      display:block;
+      position:relative;
+      padding:8px 0 0 0;
+      font:bold 1em "Trebuchet MS";
+      height:24px;
+      color:#ffffff;
+      text-align:center;
+      background: #939393 url("/cobrands/oxfordshire/images/tabs-featured.png") repeat-x 0 0;
       white-space:nowrap;
     }
     a:hover,
     a:focus {
-      background: none #EA6C18; 
-      background:-moz-linear-gradient(100% 100% 90deg, #ff4401, #EA6C18); 
-      background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#EA6C18), to(#ff4401)); 
+      background: none #EA6C18;
+      background:-moz-linear-gradient(100% 100% 90deg, #ff4401, #EA6C18);
+      background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#EA6C18), to(#ff4401));
       color: #ffffff;
     }
     li span, // mySociety
     li.active a {
-      text-decoration:none; 
+      text-decoration:none;
       background: #4c4c4c url("/cobrands/oxfordshire/images/tabs-featured-on.png") repeat-x 0 0;
     }
     li.active a:hover,
@@ -154,13 +152,13 @@ body {
 }
 
 #oxford-footer {
-  float:left; 
-  display:inline; 
-  margin:0 -8px 0 -8px; 
-  padding:10px 25px 30px 21px; 
-  clear:both; 
-  overflow:hidden; 
-  width:960px; 
+  float:left;
+  display:inline;
+  margin:0 -8px 0 -8px;
+  padding:10px 25px 30px 21px;
+  clear:both;
+  overflow:hidden;
+  width:960px;
   background:#000000 url(/cobrands/oxfordshire/images/footer.jpg) no-repeat bottom left;
   address {float:left; padding:11px 0 0 0; margin:0; color:#989898; font:0.813em arial}
   a {font:1em arial; color:#ffffff; margin:0px 5px 0px 5px}
@@ -190,7 +188,7 @@ body {
 }
 
  /* ---------------------------------------------------------------------------------
-    oxfordshire nav menubar from e.g., 
+    oxfordshire nav menubar from e.g.,
     http://fisd.oxfordshire.gov.uk/kb5/oxfordshire/fsd/includes/css/wireframe/navbar.css
   ---------------------------------------------------------------------------------*/
 
diff --git a/web/cobrands/oxfordshire/position_map.js b/web/cobrands/oxfordshire/position_map.js
index 9e299ea72..bcd0e0c12 100644
--- a/web/cobrands/oxfordshire/position_map.js
+++ b/web/cobrands/oxfordshire/position_map.js
@@ -1,28 +1,22 @@
-/**
- * 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;
-    if ($html.hasClass('ie6') || $html.hasClass('ie7')) {
-        oxfordshire_right = '-480px';
+    if ($html.hasClass('ie6')) {
+        $('#map_box').prependTo('body').css({
+            zIndex: 0, position: 'absolute',
+            top: 0, left: 0, right: 0, bottom: 0,
+            width: '100%', height: $(window).height(),
+            margin: 0
+        });
     } else {
-        oxfordshire_right = '0em';
+        $('#map_box').prependTo('body').css({
+            zIndex: 0, position: 'fixed',
+            top: 0, left: 0, right: 0, bottom: 0,
+            width: '100%', height: '100%',
+            margin: 0
+        });
     }
-
-    var map_box_width = "956px";
-    var map_box_height = "600px";
-    // Do the same as CSS (in case resized from mobile).
-    $('#map_box').prependTo('.wrapper').css({
-        zIndex: 1, position: 'absolute',
-        top: '1em', left: '', right: oxfordshire_right, bottom: '',
-        width: map_box_width, height: map_box_height,
-        margin: "0 1em"
-    });
 }
 
 function map_fix() {}
-var slide_wards_down = 1;
+var slide_wards_down = 0;
+