Fix/tidy front-only hover behaviour.

5 files changed, 25 insertions, 15 deletions

diff --git a/web/cobrands/buckinghamshire/base.scss b/web/cobrands/buckinghamshire/base.scss
index 2baf738bc..50cc1a03c 100644
--- a/web/cobrands/buckinghamshire/base.scss
+++ b/web/cobrands/buckinghamshire/base.scss
@@ -36,7 +36,7 @@
 }
 
 .nav-menu {
-    a:hover, span.hover {
+    a:hover, span.report-a-problem-btn:hover {
         color: $bucks_green;
     }
 }
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 0f63674b9..9059a9c9a 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -190,15 +190,6 @@ fixmystreet.resize_to = {
                 $(this).toggleClass('btn--forward btn--cancel');
             });
     }
-
-    // On the front page, make it so that the "report a problem" menu item
-    // scrolls to the top of the page, and has a hover effect, rather than
-    // just being an innert span.
-    $('span.report-a-problem-btn').on('click.reportBtn', function() {
-        $('html, body').animate({scrollTop:0}, 500);
-    }).css({ cursor:'pointer' }).on('hover.reportBtn', function() {
-        $(this).toggleClass('hover');
-    });
   },
 
   desktop_page: function() {
@@ -209,10 +200,6 @@ fixmystreet.resize_to = {
     // been put into place by previous mobile UI.
     $('#report-a-problem-sidebar').show();
     $('.rap-notes-trigger').remove();
-
-    // On a desktop, so reset the "Report a problem" nav item to act
-    // like an innert span again.
-    $('span.report-a-problem-btn').css({ cursor:'' }).off('.reportBtn');
   }
 };
 
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 04562dffb..9a34c4e18 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -551,7 +551,7 @@ ul.error {
   a:visited {
     color: #333;
   }
-  a:hover, span.hover {
+  a:hover {
     background-color: #333;
     color: #fff;
     text-decoration: none;
@@ -559,6 +559,14 @@ ul.error {
   span {
     background-color: #ccc;
   }
+  span.report-a-problem-btn {
+    cursor: pointer;
+  }
+  span.report-a-problem-btn:hover {
+    background-color: #333;
+    color: #fff;
+    text-decoration: none;
+  }
 }
 
 .shadow-wrap {
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 1955c6660..e996dd123 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -132,6 +132,14 @@ h1 {
   span {
     color:$primary;
   }
+  /* Stop mobile-only things */
+  span.report-a-problem-btn {
+    cursor: auto;
+  }
+  span.report-a-problem-btn:hover {
+    background-color: transparent;
+    color: $primary;
+  }
 }
 
 // .content Is the white box
diff --git a/web/js/front.js b/web/js/front.js
index 8471972d4..67486888b 100644
--- a/web/js/front.js
+++ b/web/js/front.js
@@ -15,4 +15,11 @@ document.getElementById('pc').focus();
         var link = around_links[i];
         link.href = link.href + (link.href.indexOf('?') > -1 ? '&js=1' : '?js=1');
     }
+
+    var lk = document.querySelector('span.report-a-problem-btn');
+    if (lk.addEventListener) {
+        lk.addEventListener('click', function(){
+            scrollTo(0,0);
+        });
+    }
 })();