More styling on report and around pages

Signed-off-by: Josh Angell <josh@supercooldesign.co.uk>

6 files changed, 123 insertions, 40 deletions

diff --git a/templates/web/fixmystreet/around/display_location.html b/templates/web/fixmystreet/around/display_location.html
index 7010ff93e..b1c6b3723 100755
--- a/templates/web/fixmystreet/around/display_location.html
+++ b/templates/web/fixmystreet/around/display_location.html
@@ -69,12 +69,12 @@
 
     <div id="side">
 
-        <h1>[% loc( 'Click on the map to report a problem.' ) %]</h1>
+        <h1 class="big-green-banner">[% loc( 'Click map to report a problem' ) %]</h1>
 
-        <p>
+        <p id="skip-this-step">
             [%
                 tprintf(
-                    loc("<small>Can't see the map? <a href='%s' rel='nofollow'>Skip this step</a>.</small>"),
+                    loc("Can't see the map? <a href='%s' rel='nofollow'>Skip this step</a>"),
                     url_skip
                 )
             %]
@@ -82,8 +82,14 @@
 
         <div class="shadow-wrap">
             <ul id="key-tools">
+                <li><a id="email_alert" class="feed" href="#">Recieve Updates</a></li>
+            </ul>
+        </div>
+
+        <div id="email_alert_box">
+            <ul>
                 <li><a href="[% rss_url | html %]" id="rss_alert">[% rss_alt %]</a></li>
-                <li><a id="email_alert" rel="nofollow" href="[% email_url | html %]">[%- loc('Email me new local problems') -%]</a></li>
+                <li><a rel="nofollow" href="[% email_url | html %]">[%- loc('Email me new local problems') -%]</a></li>
             </ul>
         </div>
 
diff --git a/templates/web/fixmystreet/report/display.html b/templates/web/fixmystreet/report/display.html
index f8224ab12..da4c75f01 100644
--- a/templates/web/fixmystreet/report/display.html
+++ b/templates/web/fixmystreet/report/display.html
@@ -25,9 +25,9 @@
 
 <div class="shadow-wrap">
     <ul id="key-tools">
-        <li><a rel="nofollow" href="[% c.uri_for( '/contact', { id => problem.id } ) %]">[% loc('Offensive? Unsuitable?' ) %]</a></li>
-        <li><a rel="nofollow" id="email_alert" href="[% c.uri_for( '/alert/subscribe', { id => problem.id } ) %]">[% loc('Receive updates' ) %]</a></li>
-        <li><a href="[% c.uri_for( '/around', { lat => short_latitude, lon => short_longitude } ) %]">[% loc( 'More problems nearby' ) %]</a></li>
+        <li><a rel="nofollow" class="abuse" href="[% c.uri_for( '/contact', { id => problem.id } ) %]">[% loc('Report abuse' ) %]</a></li>
+        <li><a rel="nofollow" id="email_alert" class="feed" href="[% c.uri_for( '/alert/subscribe', { id => problem.id } ) %]">[% loc('Receive updates' ) %]</a></li>
+        <li><a class="chevron" href="[% c.uri_for( '/around', { lat => short_latitude, lon => short_longitude } ) %]">[% loc( 'Problems nearby' ) %]</a></li>
     </ul>
 </div>
 
diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss
index 2fc7f6940..a87d9e7e9 100644
--- a/web/cobrands/fixmystreet/base.scss
+++ b/web/cobrands/fixmystreet/base.scss
@@ -355,7 +355,7 @@ label{
 
 // Use full width to reverse .container margins
 .full-width{
-  margin: 0em -1em 0 -1em;
+  margin: 0 -1em;
 }
 
 // #header creates grey bar in mobile, .nav-wrapper-2 is used on desktop
@@ -419,22 +419,49 @@ label{
 
 // #key-tools is the list that's pulled out an stick to the bottom of the page of desktop, below is mostly just aesthetic
 
-ul#key-tools{
-  display: block;
-  margin: 0px;
-  padding: 0px;
-  li{
-    display: table-cell;
-    padding: 0em;
-    margin:0em;
-    width: 33.333%;
-    float: left;
-    vertical-align: bottom;
-    text-align: center;
-    a{
-      display: block;
-      background: #444;
-      color:#fff;      
+.shadow-wrap {
+  @extend .full-width;
+  ul#key-tools{
+    @include list-reset-soft;
+    display: table;
+    width:100%;
+    li{
+      display: table-cell;
+      vertical-align: bottom;
+      text-align: center;
+      border-right:0.25em solid #fff;
+      &:last-child {
+        border-right:none;
+      }
+      a {
+        display: block;
+        background-color: #f5f5f5;
+        background-repeat: no-repeat;
+        color:#333;
+        padding:4em 2em 1em 2em;
+        text-transform:uppercase;
+        font: {
+          size:0.6875em;
+          family: 'helvetica', 'arial', sans-serif;
+        }
+        &:hover {
+          text-decoration:none;
+          background-color:#333;
+          color:#fff;
+        }
+        &.abuse {
+          background-image:url(images/sprite.png);
+          background-position:center -2424px;
+        }
+        &.feed {
+          background-image:url(images/sprite.png);
+          background-position:center -2563px;
+        }
+        &.chevron {
+          background-image:url(images/sprite.png);
+          background-position:center -2716px;
+        }
+      }
     }
   }
 }
@@ -672,6 +699,28 @@ a:hover.rap-notes-trigger {
   }
 }
 
+.big-green-banner {
+  position: relative;
+  background: $contrast1;
+  color: #fff;
+  padding:1em;
+  text: {
+    transform:uppercase;
+    align:center;
+  }
+  font-size:0.875em;
+  &:before {
+    content: "";
+    left:-0.5em;
+    top:0;
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-left: 0.5em solid transparent;
+    border-bottom: 0.5em solid #4B8304;
+  }
+}
+
 // this is a bit of a hack to get some differentation between desk and mobile
 .desk-only {
   display:none !important;
diff --git a/web/cobrands/fixmystreet/images/sprite.png b/web/cobrands/fixmystreet/images/sprite.png
index e031d82ad..bd350d0e9 100644
--- a/web/cobrands/fixmystreet/images/sprite.png
+++ b/web/cobrands/fixmystreet/images/sprite.png
diff --git a/web/cobrands/fixmystreet/layout.scss b/web/cobrands/fixmystreet/layout.scss
index d25c3e9bc..88ba90768 100644
--- a/web/cobrands/fixmystreet/layout.scss
+++ b/web/cobrands/fixmystreet/layout.scss
@@ -168,33 +168,58 @@ body {
 }
 
 // Wraps around #key-tools box
-.shadow-wrap{
+.shadow-wrap {
   position:fixed;
-  bottom: 0em;
-  margin-left: -1em;
+  bottom: 0;
   width: 29em;
   overflow: hidden;
   padding-top: 3em;
   // List sticks to the bottom of the page on desktop
-  ul#key-tools{
+  ul#key-tools {
     border-top: 0.25em solid $primary;
     @include box-shadow(-0em 0px 1em 1em #fff);
-    display: block;
-    overflow:hidden;
-    background: #f6f6f6;
-    li{
-      display: inline;
-      a{
-        font-family: 'helvetica', 'arial',sans-serif;
+    li {
+      border:none;
+      a {
         font-size: 0.75em;
         color:#888888;  
-        background: none;      
-        padding: 0.5em 0;
+        padding: 0.5em 1em 0.5em 0;
+        text-transform:none;
+        &.abuse {
+          background-image:url(images/sprite.png);
+          background-position:right -2935px;
+        }
+        &.feed {
+          background-image:url(images/sprite.png);
+          background-position:right -3074px;
+        }
+        &.chevron {
+          background-image:url(images/sprite.png);
+          background-position:right -3225px;
+        }
       }
     }
   }
 }
 
+
+.big-green-banner {
+  right:-1.25em;
+  margin-left:-2em;
+  font-size:1.375em;
+  padding:1em 3em 1em 1em;
+  background: $contrast1 url(images/sprite.png) right -2188px no-repeat;
+  &:before {
+    right:0;
+    left:auto;
+    top:-0.5em;
+    position: absolute;
+    border-top: 0.5em solid transparent;
+    border-left: 0.5em solid #4B8304;
+    border-bottom:none;
+  }
+}
+
 .full-width{
   margin: 0 0 0em -1em;
   width: 29em;
diff --git a/web/js/fixmystreet.js b/web/js/fixmystreet.js
index 7a512fdf5..9cb48bb9d 100644
--- a/web/js/fixmystreet.js
+++ b/web/js/fixmystreet.js
@@ -240,7 +240,7 @@ $(function(){
         heightFix('#report-a-poblem-sidebar:visible', '.content', 26);
     }
 
-    //show/hide on mobile
+    //show/hide notes on mobile
     $('.mobile #report-a-poblem-sidebar').after('<a href="#" class="rap-notes-trigger button-right">How to send successful reports</a>').hide();
     $('.mobile').on('click', '.rap-notes-trigger', function(e){
         e.preventDefault();
@@ -255,14 +255,17 @@ $(function(){
             $('#report-a-poblem-sidebar').appendTo('.rap-notes').show().after('<a href="#" class="rap-notes-close button-left">BACK</a>');
         }
     });
-
     $('.mobile').on('click', '.rap-notes-close', function(e){
-        //hide notes, show .content
         e.preventDefault();
+        //hide notes, show .content
         $('.mobile .content').show();
         $('.rap-notes').hide();
+        $('html, body').animate({scrollTop:0}, 1000);
     });
 
+    //move 'skip this step' link on mobile
+    $('.mobile #skip-this-step').hide();
+    $('.mobile #skip-this-step a').appendTo('#key-tools').addClass('chevron').wrap('<li>');
 
     /*
      * Tabs