Style fixed flap

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

4 files changed, 69 insertions, 24 deletions

diff --git a/templates/web/fixmystreet/report/display.html b/templates/web/fixmystreet/report/display.html
index 914e60e50..f157b42bc 100644
--- a/templates/web/fixmystreet/report/display.html
+++ b/templates/web/fixmystreet/report/display.html
@@ -14,7 +14,10 @@
 
 
 [% IF banner.id %]
-    <p class="banner" id="[% banner.id %]">[% banner.text %]</p>
+    <!-- This text needs to change: [% banner.text %] -->
+    <div class="banner">
+        <p id="[% banner.id %]">Fixed</p>
+    </div>
 [% END %]
 
 [% INCLUDE 'report/_main.html' %]
diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss
index fc6f8f5aa..1c66093c8 100644
--- a/web/cobrands/fixmystreet/base.scss
+++ b/web/cobrands/fixmystreet/base.scss
@@ -613,7 +613,57 @@ a:hover.button-left {
   background-position:-18px -802px;
 }
 
+.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;
+  }
+}
 
+.banner {
+  position: relative;
+  z-index:1000;
+  #fixed {
+    position: absolute;
+    top:-1.95em;
+    right:0;
+    @include inline-block;
+    font-size:0.6875em;//11px
+    line-height:1em;
+    padding:0.5em 1em;
+    color:#fff;
+    background: $contrast1;
+    text: {
+      transform:uppercase;
+      align:center;
+    }
+    &: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;
+    }
+  }
+}
 
 /*OTHER*/
 
@@ -815,28 +865,6 @@ 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 de11cf88f..f27956214 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 97e1e4785..f84bba604 100644
--- a/web/cobrands/fixmystreet/layout.scss
+++ b/web/cobrands/fixmystreet/layout.scss
@@ -252,7 +252,6 @@ body {
   }
 }
 
-
 .big-green-banner {
   right:-1.25em;
   margin-left:-2em;
@@ -270,6 +269,21 @@ body {
   }
 }
 
+.banner {
+  #fixed {
+    top:-2.25em;
+    padding-top:5em;
+    background-image:url(images/sprite.png);
+    background-position:-324px -326px;
+    background-repeat:no-repeat;
+    &:before {
+      left:-0.75em;
+      border-left: 0.75em solid transparent;
+      border-bottom: 0.75em solid #4B8304;
+    }
+  }
+}
+
 .full-width{
   margin: 0 0 0em -1em;
   width: 29em;