Merge remote-tracking branch 'origin/issues/commercial/1835-geolocati…

…on-button-styling'
mysociety · May 15, 2020 · 2b0e62e · 2b0e62e
2 parents 1511970 + 5bf3d1b
commit 2b0e62e
Show file tree

Hide file tree

Showing 36 changed files with 125 additions and 235 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,9 @@
     - Admin improvements:
         - Display user name/email for contributed as reports. #2990
         - Interface for enabling anonymous reports for certain categories. #2989
+    - Development improvements:
+        - `#geolocate_link` is now easier to re-style. #3006
+        - Links inside `#front-main` can be customised using `$primary_link_*` Sass variables. #3007
 
 * v3.0.1 (6th May 2020)
     - New features:

diff --git a/templates/web/buckinghamshire/front/pre-steps.html b/templates/web/buckinghamshire/front/pre-steps.html
@@ -1,4 +1,4 @@
-<p style="margin: -1em -1em 1em; padding: 20px 30px; background-color: #f79f73; color: #000;">
+<p style="margin: 1em -20px; padding: 20px; background-color: #f79f73; color: #000;">
 In light of the ongoing COVID 19 crisis an element of TfB workforce has reduced
 by the need for self-isolation. This regrettably means that for the immediate
 future some work will have to be delayed. We apologise for any possible delay

diff --git a/web/cobrands/bathnes/_colours.scss b/web/cobrands/bathnes/_colours.scss
@@ -18,9 +18,11 @@ $site-width: 60em;
 
 @import "pattern-lib/colours";
 
-$primary: #00728F;
+$primary: $bathnes-primary;
 $primary_b: #0b0b0c;
-$primary_text: #0b0c0c;
+$primary_text: #fff;
+$primary_link_color: $primary_text;
+$primary_link_hover_color: rgba($primary_text, 0.8);
 
 $base_bg: white;
 $base_fg: #0b0c0c;

diff --git a/web/cobrands/bexley/base.scss b/web/cobrands/bexley/base.scss
@@ -39,7 +39,7 @@ small {
 .mobile-map-banner {
     font-size: 0.89em;
 }
-#front-main a#geolocate_link {
+a#geolocate_link {
     font-size: 0.89em;
 }
 #front_stats div {

diff --git a/web/cobrands/bristol/base.scss b/web/cobrands/bristol/base.scss
@@ -109,10 +109,6 @@ dl dt {
   }
 }
 
-a#geolocate_link {
-  color: $b3;
-}
-
 label {
   @extend %bold-font;
 }

diff --git a/web/cobrands/bristol/layout.scss b/web/cobrands/bristol/layout.scss
@@ -54,10 +54,6 @@ body.frontpage, body.twothirdswidthpage, body.fullwidthpage, body.authpage {
       }
     }
 
-    a#geolocate_link {
-      color: $b3;
-    }
-
     h1 {
       font-size: 3em;
     }

diff --git a/web/cobrands/bromley/_colours.scss b/web/cobrands/bromley/_colours.scss
@@ -9,6 +9,8 @@ $bromley_dark_green: #505050;
 $primary: $bromley_blue;
 $primary_b: #ffffff;
 $primary_text: #ffffff;
+$primary_link_color: $primary_text;
+$primary_link_hover_color: rgba($primary_text, 0.8);
 
 $link-color: $bromley_green;
 $link-hover-color: $bromley_green;

diff --git a/web/cobrands/buckinghamshire/base.scss b/web/cobrands/buckinghamshire/base.scss
@@ -102,26 +102,15 @@ dl dt {
   }
 
   #postcodeForm {
-    margin-top: 1em;
+    margin: 1em 0 0 0;
+    padding: 0;
     background: #fff;
+
     div input#sub {
       @include bucks-button();
       box-shadow: 0;
     }
   }
-  a#geolocate_link {
-    background: transparent;
-    color: $bucks_links;
-    padding: 0;
-    font-size: 1em;
-    &:hover,
-    &:active,
-    &:focus { 
-      background: transparent;
-      color: $link-hover-color;
-      text-decoration: underline;
-    }
-  }
 }
 
 .btn-primary, .green-btn, .btn--primary {
@@ -137,7 +126,13 @@ dl dt {
 }
 
 a#geolocate_link {
-  color: $b3;
+  color: $bucks_links;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: $link-hover-color;
+  }
 }
 
 label {

diff --git a/web/cobrands/buckinghamshire/layout.scss b/web/cobrands/buckinghamshire/layout.scss
@@ -90,19 +90,14 @@ body.twothirdswidthpage .content .sticky-sidebar aside {
     background-color: white;
     text-align: left;
     padding-top: 40px;
+    padding-bottom: 0;
 
     #postcodeForm {
-      margin-top: 0;
-
       div {
         margin: 0;
       }
     }
 
-    a#geolocate_link {
-      color: $b3;
-    }
-
     h1 {
       font-size: 2.5em;
     }

diff --git a/web/cobrands/cheshireeast/_colours.scss b/web/cobrands/cheshireeast/_colours.scss
@@ -27,6 +27,7 @@ $col_button_hover: $green;
 $primary: $white;
 $primary_b: $green;
 $primary_text: $text_black;
+$primary_link_decoration: none;
 
 $base_bg: $white;
 $base_fg: $text_black;

diff --git a/web/cobrands/cheshireeast/base.scss b/web/cobrands/cheshireeast/base.scss
@@ -90,15 +90,12 @@ a,
     background-color: #ecf3ec;
 }
 
-#front-main a#geolocate_link {
-    color: #2e3191;
-    background: transparent;
+a#geolocate_link {
     border-bottom: 1px solid #a6a7da;
-    padding: 0;
-    margin-top: 0.5em;
-    font-size: inherit;
+    padding: 0; // remove padding so that border-bottom looks like an underline
+    margin: 0 0 1em 0;
+
     &:hover {
-        background: transparent;
         border-bottom: 1px solid #2e3191;
         transition: border-color 0.5s;
     }

diff --git a/web/cobrands/cheshireeast/layout.scss b/web/cobrands/cheshireeast/layout.scss
@@ -29,11 +29,9 @@ body.frontpage .content {
     margin: 0;
     width: 30em;
 }
-#front-main a#geolocate_link {
-    color: #2e3191;
-    &:hover {
-        text-decoration: none;
-    }
+
+a#geolocate_link {
+    margin-top: 1em;
 }
 
 .ce-footer {

diff --git a/web/cobrands/eastherts/layout.scss b/web/cobrands/eastherts/layout.scss
@@ -116,10 +116,6 @@
         }
     }
 
-    a#geolocate_link {
-        color: $eh_green;
-    }
-
     h1 {
         font-size: 2.5em;
     }

diff --git a/web/cobrands/fiksgatami/_colours.scss b/web/cobrands/fiksgatami/_colours.scss
@@ -7,6 +7,8 @@ $bg: #1a4f7f;
 $primary: #99bfe1;
 $primary_b: #000000;
 $primary_text: #222222;
+$primary_link_color: $primary_text;
+$primary_link_hover_color: rgba($primary_text, 0.8);
 
 $base_bg: $bg;
 $base_fg: #fff;

diff --git a/web/cobrands/fixamingata/_colours.scss b/web/cobrands/fixamingata/_colours.scss
@@ -5,6 +5,8 @@ $menu-image: 'menu-black';
 $primary: #00b1da;
 $primary_b: #0087a6;
 $primary_text: #222;
+$primary_link_color: $primary_text;
+$primary_link_hover_color: rgba($primary_text, 0.8);
 
 $base_bg: #eee url(images/tile.jpg) 0 0 repeat;
 $base_fg: $primary_text;

diff --git a/web/cobrands/fixamingata/layout.scss b/web/cobrands/fixamingata/layout.scss
@@ -122,26 +122,23 @@ body.mappage {
 
 .content footer .tablewrapper { background: #fff; }
 
-#front-main {
-    a#geolocate_link {
+a#geolocate_link {
+    background: url(images/locate-me.png) $left 0 no-repeat;
+    height: 34px;
+    padding-#{$left}: 24px;
+    margin-top: 0.25em;
+    @media ($high-dpi-screen) {
+        background-image: url(images/locate-me@2.png);
+        background-size: 22px 34px;
+    }
+    &:hover {
+        text-decoration:underline;
         background: url(images/locate-me.png) $left 0 no-repeat;
-        height: 34px;
-        padding-#{$left}: 24px;
-        margin-top: 0.25em;
-        font-size: 1em;
+
         @media ($high-dpi-screen) {
             background-image: url(images/locate-me@2.png);
             background-size: 22px 34px;
         }
-        &:hover {
-            text-decoration:underline;
-            background: url(images/locate-me.png) $left 0 no-repeat;
-
-            @media ($high-dpi-screen) {
-                background-image: url(images/locate-me@2.png);
-                background-size: 22px 34px;
-            }
-        }
     }
 }
 

diff --git a/web/cobrands/fixmystreet.com/_colours.scss b/web/cobrands/fixmystreet.com/_colours.scss
@@ -3,6 +3,8 @@
 $primary: #FFD000;
 $primary_b: #F3B11E; // For the box around the front page postcode form only
 $primary_text: #222;
+$primary_link_color: $primary_text;
+$primary_link_hover_color: rgba($primary_text, 0.8);
 
 // Tiled main body background
 $base_bg: #272727 url(images/tile.jpg) 0 0 repeat;

diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss
@@ -152,20 +152,23 @@ body.fullwidthpage {
                 }
             }
         }
-        a#geolocate_link {
-            font-family: $body-font;
-            background: url(images/locate-me.png) $left 0 no-repeat;
-            height: 34px;
-            padding-#{$left}: 24px;
-            margin-top: 0.25em;
-            @media ($high-dpi-screen) {
-                background-image: url(images/locate-me@2.png);
-                background-size: 22px 34px;
-            }
-        }
-        a#geolocate_link.loading {
-            background: url("/cobrands/fixmystreet/images/spinner-yellow.gif") 100% 33% no-repeat
-        }
+    }
+}
+
+a#geolocate_link {
+    font-family: $body-font;
+    background: url(images/locate-me.png) $left 0 no-repeat;
+    height: 34px;
+    padding-#{$left}: 24px;
+    margin-top: 0.25em;
+
+    @media ($high-dpi-screen) {
+        background-image: url(images/locate-me@2.png);
+        background-size: 22px 34px;
+    }
+
+    &.loading {
+        background: url("/cobrands/fixmystreet/images/spinner-yellow.gif") 100% 33% no-repeat
     }
 }
 

diff --git a/web/cobrands/greenwich/base.scss b/web/cobrands/greenwich/base.scss
@@ -28,6 +28,10 @@
     background-color: $greenwich_light_grey;
 }
 
+#front-main #postcodeForm {
+    margin-top: 1em;
+}
+
 label[for=pc] {
     color: $greenwich_dark_red;
 }

diff --git a/web/cobrands/hart/_colours.scss b/web/cobrands/hart/_colours.scss
@@ -8,6 +8,8 @@ $col_fixed_label: $hart_primary;
 
 $primary_b: #000000;
 $primary_text: #ffffff;
+$primary_link_color: $primary_text;
+$primary_link_hover_color: rgba($primary_text, 0.8);
 
 $link-color: #369;
 $link-hover-color: #369;

diff --git a/web/cobrands/hounslow/_colours.scss b/web/cobrands/hounslow/_colours.scss
@@ -21,6 +21,8 @@ $primary: $purple;
 //$primary: #dce6f2; // From bexley.gov.uk/services
 $primary_b: #222;
 $primary_text: $white;
+$primary_link_color: $primary_text;
+$primary_link_hover_color: rgba($primary_text, 0.8);
 
 $base_bg: $white;
 $base_fg: #222;

diff --git a/web/cobrands/isleofwight/_colours.scss b/web/cobrands/isleofwight/_colours.scss
@@ -11,9 +11,11 @@ $green: #75c044;
 
 //Any 20% tint of the above
 
-$primary_text: #fff;
 $primary: $cyan;
 $primary_b: #222;
+$primary_text: #fff;
+$primary_link_color: $primary_text;
+$primary_link_hover_color: rgba($primary_text, 0.8);
 
 $base_bg: #fff;
 $base_fg: #222;

diff --git a/web/cobrands/oxfordshire/_colours.scss b/web/cobrands/oxfordshire/_colours.scss
@@ -14,6 +14,7 @@ $color-oxfordshire-link-blue: #0a549d;
 $primary: $color-oxfordshire-bright-green;
 $primary_b: $color-oxfordshire-dark-green;
 $primary_text: #fff;
+$primary_link_decoration: none;
 
 $link-color: $color-oxfordshire-link-blue;
 $link-hover-color: $color-oxfordshire-bright-yellow;

diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss
@@ -99,29 +99,15 @@ a:not([class]):focus {
             }
         }
     }
+}
 
-    a#geolocate_link {
-        padding: 0;
-        background: transparent;
-        font-size: inherit;
-        color: $link-color;
-        margin-top: 0.5em;
-
-        &:hover {
-            background-color: transparent;
-            color: $link-hover-color;
-        }
-
-        &:focus {
-            background-color: $color-oxfordshire-bright-yellow;
-            outline: 2px solid $color-oxfordshire-bright-yellow;
-        }
+a#geolocate_link {
+    padding: 0;
+    margin-top: 0.5em;
 
-        &.loading {
-            background: transparent url("/cobrands/fixmystreet/images/spinner-white.gif") 100% 50% no-repeat;
-            padding: 0 1.5em 0 0;
-            border: none;
-        }
+    &.loading {
+        background: transparent url("/cobrands/fixmystreet/images/spinner-white.gif") 100% 50% no-repeat;
+        padding: 0 1.5em 0 0;
     }
 }