From 8142ab98cb9e0c095f628e2d413fb0cc67753073 Mon Sep 17 00:00:00 2001 From: Zarino Zappia Date: Fri, 29 Apr 2016 17:36:26 +0100 Subject: [fixmystreet.com] Add standard mySociety footer. Like a number of recent council cobrands, we remove parts of the default desktop footer and append our own responsive one in `footer_extra.html`. This also updates the FixMyStreet app logos (for fixmystreet.com and any other cobrands that use them) to the most recent style of Apple / Google sanctioned badges. Fixes #1385. --- web/cobrands/fixmystreet.com/_mysoc_footer.scss | 230 +++++++++++++++++++++ web/cobrands/fixmystreet.com/base.scss | 108 +++++++++- .../images/mysoc-footer/icon-facebook.png | Bin 0 -> 344 bytes .../images/mysoc-footer/icon-facebook.svg | 1 + .../images/mysoc-footer/icon-facebook@2x.png | Bin 0 -> 612 bytes .../images/mysoc-footer/icon-github.png | Bin 0 -> 526 bytes .../images/mysoc-footer/icon-github.svg | 1 + .../images/mysoc-footer/icon-github@2x.png | Bin 0 -> 994 bytes .../images/mysoc-footer/icon-twitter.png | Bin 0 -> 436 bytes .../images/mysoc-footer/icon-twitter.svg | 1 + .../images/mysoc-footer/icon-twitter@2x.png | Bin 0 -> 836 bytes .../images/mysoc-footer/logo-fms-platform.png | Bin 0 -> 2123 bytes .../images/mysoc-footer/logo-fms-platform.svg | 1 + .../images/mysoc-footer/logo-fms-platform@2x.png | Bin 0 -> 4787 bytes .../images/mysoc-footer/logo-mysociety.png | Bin 0 -> 2178 bytes .../images/mysoc-footer/logo-mysociety.svg | 1 + .../images/mysoc-footer/logo-mysociety@2x.png | Bin 0 -> 4340 bytes web/cobrands/fixmystreet.com/layout.scss | 75 +++---- .../fixmystreet/images/google_play_logo.png | Bin 4650 -> 3008 bytes .../fixmystreet/images/google_play_logo@2.png | Bin 0 -> 6575 bytes .../fixmystreet/images/itunes_store_logo.png | Bin 2123 -> 1793 bytes .../fixmystreet/images/itunes_store_logo@2.png | Bin 0 -> 3921 bytes 22 files changed, 372 insertions(+), 46 deletions(-) create mode 100644 web/cobrands/fixmystreet.com/_mysoc_footer.scss create mode 100644 web/cobrands/fixmystreet.com/images/mysoc-footer/icon-facebook.png create mode 100644 web/cobrands/fixmystreet.com/images/mysoc-footer/icon-facebook.svg create mode 100644 web/cobrands/fixmystreet.com/images/mysoc-footer/icon-facebook@2x.png create mode 100644 web/cobrands/fixmystreet.com/images/mysoc-footer/icon-github.png create mode 100644 web/cobrands/fixmystreet.com/images/mysoc-footer/icon-github.svg create mode 100644 web/cobrands/fixmystreet.com/images/mysoc-footer/icon-github@2x.png create mode 100644 web/cobrands/fixmystreet.com/images/mysoc-footer/icon-twitter.png create mode 100644 web/cobrands/fixmystreet.com/images/mysoc-footer/icon-twitter.svg create mode 100644 web/cobrands/fixmystreet.com/images/mysoc-footer/icon-twitter@2x.png create mode 100644 web/cobrands/fixmystreet.com/images/mysoc-footer/logo-fms-platform.png create mode 100644 web/cobrands/fixmystreet.com/images/mysoc-footer/logo-fms-platform.svg create mode 100644 web/cobrands/fixmystreet.com/images/mysoc-footer/logo-fms-platform@2x.png create mode 100644 web/cobrands/fixmystreet.com/images/mysoc-footer/logo-mysociety.png create mode 100644 web/cobrands/fixmystreet.com/images/mysoc-footer/logo-mysociety.svg create mode 100644 web/cobrands/fixmystreet.com/images/mysoc-footer/logo-mysociety@2x.png create mode 100644 web/cobrands/fixmystreet/images/google_play_logo@2.png create mode 100644 web/cobrands/fixmystreet/images/itunes_store_logo@2.png (limited to 'web') diff --git a/web/cobrands/fixmystreet.com/_mysoc_footer.scss b/web/cobrands/fixmystreet.com/_mysoc_footer.scss new file mode 100644 index 000000000..383ec5716 --- /dev/null +++ b/web/cobrands/fixmystreet.com/_mysoc_footer.scss @@ -0,0 +1,230 @@ +// Standard mySociety Footer v1.0.2 +// https://github.com/mysociety/standard-footer + +$mysoc-footer-background-color: #fff !default; +$mysoc-footer-text-color: #333 !default; +$mysoc-footer-site-name-text-color: $mysoc-footer-text-color !default; + +$mysoc-footer-link-text-color: #4FADED !default; +$mysoc-footer-link-hover-text-color: darken($mysoc-footer-link-text-color, 10%) !default; + +$mysoc-footer-site-name-font-size: 1.5em !default; +$mysoc-footer-site-name-margin-bottom: 0.5em !default; +$mysoc-footer-site-name-line-height: 1em !default; + +$mysoc-footer-border-top: none !default; +$mysoc-footer-divider-color: #E2DFD9 !default; + +$mysoc-footer-donate-background-color: #F3F1EB !default; +$mysoc-footer-donate-text-color: $mysoc-footer-text-color !default; +$mysoc-footer-donate-button-background-color: #999 !default; +$mysoc-footer-donate-button-text-color: #fff !default; +$mysoc-footer-donate-button-hover-background-color: darken($mysoc-footer-donate-button-background-color, 5%) !default; +$mysoc-footer-donate-button-hover-text-color: $mysoc-footer-donate-button-text-color !default; + +$mysoc-footer-legal-text-color: #6C6B68 !default; + +$mysoc-footer-image-path: '../img/mysoc-footer/' !default; +$mysoc-footer-breakpoint-sm: 768px !default; + +$high-dpi-screen: '-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi' !default; + +.mysoc-footer { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + background-color: $mysoc-footer-background-color; + color: $mysoc-footer-text-color; + padding: 2em 0; + font-size: 1em; + line-height: 1.5em; + border-top: $mysoc-footer-border-top; + + @media (min-height: 700px) { + padding: 3em 0; + } + + @media (min-height: 900px) { + padding: 4em 0; + } + + *, *:before, *:after { + -webkit-box-sizing: inherit; + -moz-box-sizing: inherit; + box-sizing: inherit; + } + + a { + color: $mysoc-footer-link-text-color; + + &:hover, + &:focus { + color: $mysoc-footer-link-hover-text-color; + } + } +} + +.mysoc-footer__divider { + border-top: 1px solid $mysoc-footer-divider-color; + margin: 2em 0; + + @media (min-height: 900px) { + margin: 3em 0; + } +} + +.mysoc-footer__site-name { + font-size: $mysoc-footer-site-name-font-size; + line-height: $mysoc-footer-site-name-line-height; + font-weight: bold; + margin: 0 0 $mysoc-footer-site-name-margin-bottom 0; + color: $mysoc-footer-site-name-text-color; +} + +.mysoc-footer__links { + font-size: 1em; + line-height: 1.2em; + + @media (min-width: $mysoc-footer-breakpoint-sm){ + overflow: auto; + margin: 0 -1em; + + // Line up top of .mysoc-footer__links with top of .mysoc-footer__site-description + $factor: $mysoc-footer-site-name-font-size / 1em; + padding-top: ( $mysoc-footer-site-name-line-height*$factor + $mysoc-footer-site-name-margin-bottom*$factor ); + } + + ul { + margin: 0; + padding: 0; + list-style: none; + + @media (min-width: $mysoc-footer-breakpoint-sm){ + float: left; + width: 50%; + padding: 0 1em; + } + } + + li { + margin: 0 0 0.5em 0; + } + + a { + display: block; + } +} + +.mysoc-footer__donate { + background-color: $mysoc-footer-donate-background-color; + color: $mysoc-footer-donate-text-color; + padding: 1.5em; + border-radius: 0.3em; + margin-top: 1em; + + @media (min-width: $mysoc-footer-breakpoint-sm){ + margin-top: 0; + } +} + +.mysoc-footer__donate__button { + display: inline-block; + background-color: $mysoc-footer-donate-button-background-color; + color: $mysoc-footer-donate-button-text-color !important; + padding: 0.5em 1em; + border-radius: 0.3em; + font-weight: bold; + text-decoration: none; + + &:hover, + &:focus { + text-decoration: none; + background-color: $mysoc-footer-donate-button-hover-background-color; + color: $mysoc-footer-donate-button-hover-text-color !important; + } +} + +.mysoc-footer__orgs { + overflow: auto; + margin: 0 -1em; +} + +.mysoc-footer__org { + float: left; + padding: 0 1em; +} + +.mysoc-footer__org__logo { + display: block; + margin-top: 0.5em; + height: 0; + overflow: hidden; + padding-top: 32px; +} + +.mysoc-footer__org__logo--mysociety { + width: 152px; + background: transparent url('#{$mysoc-footer-image-path}logo-mysociety.png') 0 0 no-repeat; + background-size: 152px 32px; + @media ($high-dpi-screen) { + background-image: url('#{$mysoc-footer-image-path}logo-mysociety@2x.png'); + } + background-image: url('#{$mysoc-footer-image-path}logo-mysociety.svg'), none; +} + +.mysoc-footer__legal { + font-size: 0.8em; + line-height: 1.5em; + color: $mysoc-footer-legal-text-color; +} + +.mysoc-footer__badges { + margin: 0 -4px; + padding: 0; + list-style: none; + + @media (min-width: $mysoc-footer-breakpoint-sm){ + text-align: right; + } + + li { + margin: 0 4px; + display: inline-block; + } +} + +.mysoc-footer__badge { + display: inline-block; + width: 32px; + height: 0; + padding-top: 32px; + overflow: hidden; + border-radius: 100%; +} + +.mysoc-footer__badge--github { + background: transparent url('#{$mysoc-footer-image-path}icon-github.png') 0 0 no-repeat; + background-size: 32px 32px; + @media ($high-dpi-screen) { + background-image: url('#{$mysoc-footer-image-path}icon-github@2x.png'); + } + background-image: url('#{$mysoc-footer-image-path}icon-github.svg'), none; +} + +.mysoc-footer__badge--twitter { + background: transparent url('#{$mysoc-footer-image-path}icon-twitter.png') 0 0 no-repeat; + background-size: 32px 32px; + @media ($high-dpi-screen) { + background-image: url('#{$mysoc-footer-image-path}icon-twitter@2x.png'); + } + background-image: url('#{$mysoc-footer-image-path}icon-twitter.svg'), none; +} + +.mysoc-footer__badge--facebook { + background: transparent url('#{$mysoc-footer-image-path}icon-facebook.png') 0 0 no-repeat; + background-size: 32px 32px; + @media ($high-dpi-screen) { + background-image: url('#{$mysoc-footer-image-path}icon-facebook@2x.png'); + } + background-image: url('#{$mysoc-footer-image-path}icon-facebook.svg'), none; +} diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss index 820d5ffb5..223669b6d 100644 --- a/web/cobrands/fixmystreet.com/base.scss +++ b/web/cobrands/fixmystreet.com/base.scss @@ -9,10 +9,6 @@ @import "compass"; @import "../sass/base"; -#footer-nav { - display: none; -} - .top_banner { color: $primary_text; background: $primary; @@ -239,3 +235,107 @@ background: transparent; } } + +// Avoid double border between mobile nav and footer +.nav-menu--main > :last-child a { + border-bottom: none; +} + + +$mysoc-footer-background-color: #222; +$mysoc-footer-text-color: #acacac; +$mysoc-footer-site-name-text-color: #fff; + +$mysoc-footer-link-text-color: #fff; +$mysoc-footer-link-hover-text-color: #fff; + +$mysoc-footer-border-top: 0.25em solid $primary; + +$mysoc-footer-divider-color: #4b4b4b; + +$mysoc-footer-donate-background-color: #333; +$mysoc-footer-donate-text-color: #fff; +$mysoc-footer-donate-button-background-color: $primary; +$mysoc-footer-donate-button-text-color: #000; + +$mysoc-footer-legal-text-color: #9a9a9a; + +$mysoc-footer-image-path: 'images/mysoc-footer/'; +$mysoc-footer-breakpoint-sm: 48em; + +$grid-max-width: 60em; +$grid-gutter: 2em; +$grid-breakpoint-sm: $mysoc-footer-breakpoint-sm; + +@import "mysoc_footer"; + +.mysoc-footer { + li { + list-style: none; + } + + .container { + margin: 0 auto; + } + + .container { + margin-right: auto; + margin-left: auto; + padding-left: $grid-gutter / 2; + padding-right: $grid-gutter / 2; + max-width: $grid-max-width; + } + + .row { + @include clearfix(); + margin-left: $grid-gutter / -2; + margin-right: $grid-gutter / -2; + } + + %col { + padding-left: $grid-gutter / 2; + padding-right: $grid-gutter / 2; + } + + @for $i from 1 through 12 { + .col-sm-#{$i} { + @extend %col; + } + } + + @media(min-width: $grid-breakpoint-sm) { + %col-float { + float: left; + } + + @for $i from 1 through 12 { + .col-sm-#{$i} { + @extend %col-float; + width: 100% / 12 * $i; + } + } + } +} + +.mysoc-footer__org__logo--fms-platform { + width: 205px; + background: transparent url('#{$mysoc-footer-image-path}logo-fms-platform.png') 0 0 no-repeat; + background-size: 205px 32px; + @media ($high-dpi-screen) { + background-image: url('#{$mysoc-footer-image-path}logo-fms-platform@2x.png'); + } + background-image: url('#{$mysoc-footer-image-path}logo-fms-platform.svg'), none; +} + +.fms-app-badges { + margin: 1em 0; + + a { + text-decoration: none; + } + + img { + border: none; + margin-right: 0.5em; + } +} diff --git a/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-facebook.png b/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-facebook.png new file mode 100644 index 000000000..2459b1fb8 Binary files /dev/null and b/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-facebook.png differ diff --git a/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-facebook.svg b/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-facebook.svg new file mode 100644 index 000000000..002a243a7 --- /dev/null +++ b/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-facebook.svg @@ -0,0 +1 @@ +icon-facebook-white \ No newline at end of file diff --git a/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-facebook@2x.png b/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-facebook@2x.png new file mode 100644 index 000000000..137878d77 Binary files /dev/null and b/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-facebook@2x.png differ diff --git a/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-github.png b/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-github.png new file mode 100644 index 000000000..179f29ec9 Binary files /dev/null and b/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-github.png differ diff --git a/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-github.svg b/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-github.svg new file mode 100644 index 000000000..09cc2f40e --- /dev/null +++ b/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-github.svg @@ -0,0 +1 @@ +icon-github-white \ No newline at end of file diff --git a/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-github@2x.png b/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-github@2x.png new file mode 100644 index 000000000..e6d0d4124 Binary files /dev/null and b/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-github@2x.png differ diff --git a/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-twitter.png b/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-twitter.png new file mode 100644 index 000000000..5fb0578ab Binary files /dev/null and b/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-twitter.png differ diff --git a/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-twitter.svg b/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-twitter.svg new file mode 100644 index 000000000..bc2dc1e08 --- /dev/null +++ b/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-twitter.svg @@ -0,0 +1 @@ +icon-twitter-white \ No newline at end of file diff --git a/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-twitter@2x.png b/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-twitter@2x.png new file mode 100644 index 000000000..1bd1d4bb6 Binary files /dev/null and b/web/cobrands/fixmystreet.com/images/mysoc-footer/icon-twitter@2x.png differ diff --git a/web/cobrands/fixmystreet.com/images/mysoc-footer/logo-fms-platform.png b/web/cobrands/fixmystreet.com/images/mysoc-footer/logo-fms-platform.png new file mode 100644 index 000000000..dda825fc2 Binary files /dev/null and b/web/cobrands/fixmystreet.com/images/mysoc-footer/logo-fms-platform.png differ diff --git a/web/cobrands/fixmystreet.com/images/mysoc-footer/logo-fms-platform.svg b/web/cobrands/fixmystreet.com/images/mysoc-footer/logo-fms-platform.svg new file mode 100644 index 000000000..ae1dad681 --- /dev/null +++ b/web/cobrands/fixmystreet.com/images/mysoc-footer/logo-fms-platform.svg @@ -0,0 +1 @@ +logo-fms-platform \ No newline at end of file diff --git a/web/cobrands/fixmystreet.com/images/mysoc-footer/logo-fms-platform@2x.png b/web/cobrands/fixmystreet.com/images/mysoc-footer/logo-fms-platform@2x.png new file mode 100644 index 000000000..bdb8eb121 Binary files /dev/null and b/web/cobrands/fixmystreet.com/images/mysoc-footer/logo-fms-platform@2x.png differ diff --git a/web/cobrands/fixmystreet.com/images/mysoc-footer/logo-mysociety.png b/web/cobrands/fixmystreet.com/images/mysoc-footer/logo-mysociety.png new file mode 100644 index 000000000..51596b929 Binary files /dev/null and b/web/cobrands/fixmystreet.com/images/mysoc-footer/logo-mysociety.png differ diff --git a/web/cobrands/fixmystreet.com/images/mysoc-footer/logo-mysociety.svg b/web/cobrands/fixmystreet.com/images/mysoc-footer/logo-mysociety.svg new file mode 100644 index 000000000..aa3484c3f --- /dev/null +++ b/web/cobrands/fixmystreet.com/images/mysoc-footer/logo-mysociety.svg @@ -0,0 +1 @@ +mysociety-logo-white \ No newline at end of file diff --git a/web/cobrands/fixmystreet.com/images/mysoc-footer/logo-mysociety@2x.png b/web/cobrands/fixmystreet.com/images/mysoc-footer/logo-mysociety@2x.png new file mode 100644 index 000000000..600a20fd6 Binary files /dev/null and b/web/cobrands/fixmystreet.com/images/mysoc-footer/logo-mysociety@2x.png differ diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss index 14eccfd1e..3802d96d7 100644 --- a/web/cobrands/fixmystreet.com/layout.scss +++ b/web/cobrands/fixmystreet.com/layout.scss @@ -207,41 +207,6 @@ body.twothirdswidthpage { } } -#footer-nav { - display: block; - border: 0px; - border-top: 0.25em solid #ffd000; - border-image: url(images/tile-y.jpg) 30 0 repeat; - - .tablewrapper { - max-width: 60em; - margin: 0 auto; - background: $base_bg; - ul { - @include list-reset-soft; - float: $left; - li { - display: inline; - float: $left; - a, span { - display: block; - color: $nav_fg; - background: none; - border-bottom: none; - padding: 0.75em; - font-size: 0.9em; - } - } - } - #footer-main-nav { - display: block; - } - #footer-help-nav { - float: $right; - } - } -} - .next-steps { @include clearfix; margin-bottom: 2em; // add some space between this and the footer @@ -324,6 +289,33 @@ body.unresponsive-council { } } +// FMS.com has a slightly different version of the +// footer-help / footer-marketing widgets that appear +// at the bottom of pages with `pagefooter` set. +#footer-help { + border: none; + + ul { + margin: 0 auto; + + li { + max-width: 19em; + + &:last-child { + border: none; + padding-left: 3em; + } + } + } +} + +.mysoc-footer { + margin-top: 3em; +} +body.mappage .mysoc-footer { + display: none; +} + .variant1 { body { background: #fad52a url(/cobrands/fixmystreet.com/images/friendly-homepage.jpg) top center no-repeat; @@ -422,21 +414,20 @@ body.unresponsive-council { color: #222; background: #fad52a; } - body.fullwidthpage .container .content footer .tablewrapper, - #footer-nav .tablewrapper { + body.fullwidthpage .container .content footer .tablewrapper { color: #222; background: transparent; } - #footer-nav .tablewrapper ul li a, - #footer-nav .tablewrapper ul li span { - color: #222; - } - .nav-menu--mysoc { background: #fff; } + #footer-help a { + color: inherit; + text-decoration: underline; + } + #mysoc-logo { background-image: url(/cobrands/fixmystreet.com/images/friendly-mysoc-logo.png); background-position: 50% 0%; diff --git a/web/cobrands/fixmystreet/images/google_play_logo.png b/web/cobrands/fixmystreet/images/google_play_logo.png index 893ec5727..b1e774859 100644 Binary files a/web/cobrands/fixmystreet/images/google_play_logo.png and b/web/cobrands/fixmystreet/images/google_play_logo.png differ diff --git a/web/cobrands/fixmystreet/images/google_play_logo@2.png b/web/cobrands/fixmystreet/images/google_play_logo@2.png new file mode 100644 index 000000000..dfeb5a9a4 Binary files /dev/null and b/web/cobrands/fixmystreet/images/google_play_logo@2.png differ diff --git a/web/cobrands/fixmystreet/images/itunes_store_logo.png b/web/cobrands/fixmystreet/images/itunes_store_logo.png index 395769502..b65d5a5a4 100644 Binary files a/web/cobrands/fixmystreet/images/itunes_store_logo.png and b/web/cobrands/fixmystreet/images/itunes_store_logo.png differ diff --git a/web/cobrands/fixmystreet/images/itunes_store_logo@2.png b/web/cobrands/fixmystreet/images/itunes_store_logo@2.png new file mode 100644 index 000000000..af616aada Binary files /dev/null and b/web/cobrands/fixmystreet/images/itunes_store_logo@2.png differ -- cgit v1.2.3