"Report" button in default mobile header, fixes #931

The new button will be inherited by any cobrand that extends
fixmystreet/header_logo.html. Styling has been checked in all
current cobrands.

Also includes a minor fix to header logo margins on narrow screens.

7 files changed, 65 insertions, 2 deletions

diff --git a/templates/web/fixmystreet/header_logo.html b/templates/web/fixmystreet/header_logo.html
index 6e4ad9e21..3ae706730 100644
--- a/templates/web/fixmystreet/header_logo.html
+++ b/templates/web/fixmystreet/header_logo.html
@@ -1 +1,2 @@
                     <a href="/" id="site-logo">[%- PROCESS 'site-name.html' -%]</a>
+                    <a href="/" id="report-cta" title="[%- loc('Report a problem') -%]">[%- loc('Report') -%]</a>
diff --git a/web/cobrands/eastsussex/base.scss b/web/cobrands/eastsussex/base.scss
index 7e9c57b06..5a6b5295f 100644
--- a/web/cobrands/eastsussex/base.scss
+++ b/web/cobrands/eastsussex/base.scss
@@ -69,6 +69,17 @@ h1.main {
   height: 48px;
 }
 
+#report-cta {
+  top: 24px; // height of header
+  margin-top: -0.7em;
+  font-size: 1em;
+  border-color: mix(#fff, $primary, 20%);
+
+  &:hover, &:focus {
+    background-color: mix(#fff, $primary, 10%);
+  }
+}
+
 #breadcrumb_breadcrumbTrail ol li {
     list-style: none;
 }
diff --git a/web/cobrands/fixamingata/base.scss b/web/cobrands/fixamingata/base.scss
index 9850cdf97..01aa46c71 100644
--- a/web/cobrands/fixamingata/base.scss
+++ b/web/cobrands/fixamingata/base.scss
@@ -28,6 +28,19 @@ $image-sprite: '/cobrands/fixamingata/images/sprite.png';
     background-image: url(/cobrands/fixmystreet/images/menu-black.svg), none;
 }
 
+#report-cta {
+    font-size: 0.8em;
+    margin-top: -0.25em;
+    border-color: #999;
+    color: #000;
+    padding-bottom: 0.2em;
+    padding-top: 0.5em;
+
+    &:hover, &:focus {
+      background-color: #bbb;
+    }
+}
+
 #front-main {
     a#geolocate_link {
         font-size: 0.9em;
diff --git a/web/cobrands/fixmindelo/base.scss b/web/cobrands/fixmindelo/base.scss
index 4d3a53f0a..486c66672 100644
--- a/web/cobrands/fixmindelo/base.scss
+++ b/web/cobrands/fixmindelo/base.scss
@@ -28,6 +28,10 @@ $image-sprite: 'images/sprite.png';
   background: url('images/sprite.png') -8px -915px no-repeat;
 }
 
+#report-cta {
+  display: none;
+}
+
 #footer-help ul li {
   padding-right: 3em;
   a {
diff --git a/web/cobrands/harrogate/base.scss b/web/cobrands/harrogate/base.scss
index 5e498dd89..f0bb1daa1 100644
--- a/web/cobrands/harrogate/base.scss
+++ b/web/cobrands/harrogate/base.scss
@@ -24,6 +24,15 @@ body.frontpage #site-logo,
     background-image: url(/cobrands/fixmystreet/images/menu-black.svg), none;
 }
 
+#report-cta {
+    border-color: #ddd;
+    color: #000;
+
+    &:hover, &:focus {
+      background-color: #eee;
+    }
+}
+
 #main-nav ul#main-menu li {
 
     // blue button background, darker if selected
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 2721edb26..ffff213fc 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -439,6 +439,7 @@ p.label-valid {
   width: 175px;
   height: 40px;
   top: 0.4em;
+  left: 0.5em;
   background: url($image-sprite) -3px -3px no-repeat;
   text-indent: -999999px;
   position: absolute;
@@ -462,6 +463,27 @@ p.label-valid {
   top: 0.25em; // same as border-top on #site-header
 }
 
+// A shortcut to the Reporting page, in the mobile header
+#report-cta {
+  display: block;
+  position: absolute;
+  top: (3em / 2); // half the height of #site-header
+  right: 3.5em;
+  margin-top: -0.5em;
+
+  font-size: 0.9em;
+  line-height: 1em;
+  border: 1px solid #666;
+  color: #fff;
+  padding: 0.4em;
+  border-radius: 0.3em;
+
+  &:hover, &:focus {
+    text-decoration: none;
+    background-color: #444;
+  }
+}
+
 
 #main-nav{
   ul{
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 162bf30e1..67756ca5b 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -100,6 +100,7 @@ h1 {
 }
 #site-logo {
   top: 0.9em;
+  left: auto;
   position: absolute;
   z-index: 3;
 }
@@ -117,8 +118,10 @@ h1 {
     top:-3.25em;
   }
 }
-#nav-link {
-  left:-999999px;
+#nav-link,
+#report-cta {
+  right: auto;
+  left: -999999px;
 }
 #main-nav{
   margin: 0 auto;