From c258df35ef80c6a09804d717b3298d129839394a Mon Sep 17 00:00:00 2001 From: Zarino Zappia Date: Thu, 7 Jun 2018 10:50:16 +0100 Subject: [Oxfordshire] Update cobrand to match new OCCLSS style guide MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The change to web/js/front.js was required because Oxfordshire has no `.report-a-problem-btn`, so the front.js shouldn’t assume it’s there. --- .../web/oxfordshire/around/postcode_form.html | 32 +++ templates/web/oxfordshire/footer.html | 33 +-- templates/web/oxfordshire/front/recent.html | 25 ++ templates/web/oxfordshire/header.html | 29 +- templates/web/oxfordshire/index-steps.html | 13 + templates/web/oxfordshire/main_nav.html | 22 ++ templates/web/oxfordshire/main_nav_items.html | 48 ++++ web/cobrands/oxfordshire/_colours.scss | 52 ++-- web/cobrands/oxfordshire/_oxfordshire-footer.scss | 61 ++++ web/cobrands/oxfordshire/_oxon.scss | 237 ---------------- web/cobrands/oxfordshire/base.scss | 273 ++++++++++++++++-- web/cobrands/oxfordshire/images/bg-y.jpg | Bin 1287 -> 0 bytes web/cobrands/oxfordshire/images/bg.jpg | Bin 1590 -> 0 bytes web/cobrands/oxfordshire/images/divider1x32.png | Bin 167 -> 0 bytes .../oxfordshire/images/fms-logo-105x20.png | Bin 2348 -> 0 bytes web/cobrands/oxfordshire/images/footer.jpg | Bin 16093 -> 0 bytes web/cobrands/oxfordshire/images/header.jpg | Bin 112470 -> 0 bytes .../oxfordshire/images/logo-light-green.gif | Bin 2671 -> 0 bytes web/cobrands/oxfordshire/images/logo.jpg | Bin 12774 -> 0 bytes .../oxfordshire/images/occ-badge-nav-bg.png | Bin 0 -> 93616 bytes .../oxfordshire/images/site-logo-mobile.png | Bin 0 -> 5271 bytes .../oxfordshire/images/site-logo-mobile.svg | 1 + .../oxfordshire/images/tabs-featured-on.png | Bin 162 -> 0 bytes web/cobrands/oxfordshire/images/tabs-featured.png | Bin 175 -> 0 bytes web/cobrands/oxfordshire/layout.scss | 313 +++++++++++++-------- 25 files changed, 680 insertions(+), 459 deletions(-) create mode 100644 templates/web/oxfordshire/around/postcode_form.html create mode 100644 templates/web/oxfordshire/front/recent.html create mode 100644 templates/web/oxfordshire/index-steps.html create mode 100644 templates/web/oxfordshire/main_nav.html create mode 100644 templates/web/oxfordshire/main_nav_items.html create mode 100644 web/cobrands/oxfordshire/_oxfordshire-footer.scss delete mode 100644 web/cobrands/oxfordshire/_oxon.scss delete mode 100755 web/cobrands/oxfordshire/images/bg-y.jpg delete mode 100755 web/cobrands/oxfordshire/images/bg.jpg delete mode 100644 web/cobrands/oxfordshire/images/divider1x32.png delete mode 100644 web/cobrands/oxfordshire/images/fms-logo-105x20.png delete mode 100755 web/cobrands/oxfordshire/images/footer.jpg delete mode 100755 web/cobrands/oxfordshire/images/header.jpg delete mode 100644 web/cobrands/oxfordshire/images/logo-light-green.gif delete mode 100755 web/cobrands/oxfordshire/images/logo.jpg create mode 100644 web/cobrands/oxfordshire/images/occ-badge-nav-bg.png create mode 100644 web/cobrands/oxfordshire/images/site-logo-mobile.png create mode 100644 web/cobrands/oxfordshire/images/site-logo-mobile.svg delete mode 100644 web/cobrands/oxfordshire/images/tabs-featured-on.png delete mode 100644 web/cobrands/oxfordshire/images/tabs-featured.png diff --git a/templates/web/oxfordshire/around/postcode_form.html b/templates/web/oxfordshire/around/postcode_form.html new file mode 100644 index 000000000..f598f1f98 --- /dev/null +++ b/templates/web/oxfordshire/around/postcode_form.html @@ -0,0 +1,32 @@ +
+
+ [% UNLESS possible_location_matches %] + [% INCLUDE 'around/intro.html' %] + [% END %] + + [% + question = c.cobrand.enter_postcode_text || loc('Enter a nearby street name and area'); + %] + +
+ +
+ + +
+ + [% IF partial_token %] + + [% END %] + + [% IF c.user_exists AND c.user.categories.size %] + + [% END %] +
+ [% loc('Or locate me automatically') %] + + [% UNLESS possible_location_matches %] + [% INCLUDE 'around/_postcode_form_post.html' %] + [% END %] +
+
diff --git a/templates/web/oxfordshire/footer.html b/templates/web/oxfordshire/footer.html index 7dd6b6254..c9c02bb5d 100644 --- a/templates/web/oxfordshire/footer.html +++ b/templates/web/oxfordshire/footer.html @@ -1,8 +1,3 @@ - [% IF pagefooter %] - - [% END %] @@ -11,25 +6,23 @@
- + + + [% INCLUDE 'common_footer_tags.html' %] diff --git a/templates/web/oxfordshire/front/recent.html b/templates/web/oxfordshire/front/recent.html new file mode 100644 index 000000000..fbd9b8eb7 --- /dev/null +++ b/templates/web/oxfordshire/front/recent.html @@ -0,0 +1,25 @@ +[% recent_photos = c.cobrand.recent_photos('front', 5); %] + +[% IF recent_photos.size %] +
+

+ [%- IF c.cobrand.moniker == 'hart' %] + Recently reported + [% ELSE %] + [% loc('Recently reported problems') %] + [% END -%] +

+ +
+ [% INCLUDE "front/stats.html" %] +
+ +
+
    + [% FOREACH problem IN recent_photos %] + [% INCLUDE 'front/_list-entry.html' %] + [% END %] +
+
+
+[% END %] diff --git a/templates/web/oxfordshire/header.html b/templates/web/oxfordshire/header.html index 6bb6436bc..eaf601b1b 100644 --- a/templates/web/oxfordshire/header.html +++ b/templates/web/oxfordshire/header.html @@ -12,6 +12,7 @@ + [% INCLUDE 'header/css.html' %] [% INCLUDE 'common_header_tags.html' %] @@ -25,41 +26,17 @@ height="0" width="0" style="display:none;visibility:hidden">
-
- - - Oxfordshire County Council home - -
- Report a road or street problem - - - -
-
- [% IF c.req.uri.path == '/' %] -

- This weekend Fix My Street, and the Oxfordshire County Council systems that it connects to, are being upgraded. If there - is a pause in our response, that may be why. But your report will be looked into by one of Oxfordshire's Highways Inspectors - as soon as possible. Thanks for using Fix My Street -

- [% END %] +
[% pre_container_extra %] diff --git a/templates/web/oxfordshire/index-steps.html b/templates/web/oxfordshire/index-steps.html new file mode 100644 index 000000000..9d6a99c0b --- /dev/null +++ b/templates/web/oxfordshire/index-steps.html @@ -0,0 +1,13 @@ +

[% loc('How to report a problem') %]

+ +
    +
  1. [% question %]
    2. +
  2. [% loc('Locate the problem on a map of the area') %]
    3. +
  3. [% loc('Enter details of the problem') %]
    4. + [% IF c.cobrand.is_council %] +
  4. Confirm the report and [% c.cobrand.council_name %] will investigate
    5. + [% ELSIF c.cobrand.moniker == 'zurich' %] + [% ELSE %] +
  5. [% loc('We send it to the council on your behalf') %]
    6. + [% END %] +
diff --git a/templates/web/oxfordshire/main_nav.html b/templates/web/oxfordshire/main_nav.html new file mode 100644 index 000000000..f7bc619e2 --- /dev/null +++ b/templates/web/oxfordshire/main_nav.html @@ -0,0 +1,22 @@ +[% + # DEFAULT would make sense here, except it treats the empty string as falsy + # and some cobrands want to set ul_class to an empty string. + SET ul_class="nav-menu nav-menu--main" UNLESS ul_class.defined; +%] +[% BLOCK navitem ~%] +
  • + [% label %] +
    • +[%~ END %] + +[% UNLESS omit_wrapper %] + +[% END %] diff --git a/templates/web/oxfordshire/main_nav_items.html b/templates/web/oxfordshire/main_nav_items.html new file mode 100644 index 000000000..6c45bd785 --- /dev/null +++ b/templates/web/oxfordshire/main_nav_items.html @@ -0,0 +1,48 @@ +[%~ INCLUDE navitem uri=(homepage_template ? '/report' : '/') label=loc('Report a problem') ~%] + +[%~ IF c.user_exists ~%] + [%~ INCLUDE navitem uri='/my' label=loc('Your reports') ~%] +[%~ ELSE ~%] + [%~ INCLUDE navitem uri='/auth' label=loc('Your reports') ~%] +[%~ END ~%] + +[%~ IF c.user_exists AND c.user.has_body_permission_to('planned_reports') ~%] + [%~ INCLUDE navitem always_url=1 uri='/my/planned' label=loc('Shortlist') ~%] +[%~ END ~%] + + +[%~ UNLESS hide_all_reports_link ~%] + [%~ + IF c.user_exists AND c.user.categories.size; + categories = c.user.categories.join(",") | uri; + cat_suffix = "?filter_category=" _ categories; + END; + + reports_uri = '/reports'; + IF body_name; + body_name = body_name | uri; + reports_uri = "${reports_uri}/${body_name}"; + END; + + INCLUDE navitem uri=reports_uri label=loc('All reports') suffix=cat_suffix; + ~%] +[%~ END ~%] + +[%~ + IF pc; + pc_uri = pc | uri; + pc_suffix = "/list?pc=" _ pc_uri; + END; + + INCLUDE navitem uri='/alert' label=loc('Local alerts') suffix=pc_suffix; +~%] + +[%~ INCLUDE navitem uri='/faq' label=loc('Help') ~%] + +[%~ UNLESS hide_privacy_link ~%] + [%~ INCLUDE navitem uri='/privacy' label=loc('Privacy') liattrs='class="nav-menu__item--privacy"' ~%] +[%~ END ~%] + +[%~ IF c.user_exists AND c.cobrand.admin_allow_user(c.user) ~%] + [%~ INCLUDE navitem uri='/admin' label=loc('Admin') ~%] +[%~ END ~%] diff --git a/web/cobrands/oxfordshire/_colours.scss b/web/cobrands/oxfordshire/_colours.scss index c2de1c9f0..bb38e1ff5 100644 --- a/web/cobrands/oxfordshire/_colours.scss +++ b/web/cobrands/oxfordshire/_colours.scss @@ -1,37 +1,41 @@ /* COLOURS */ -$oxfordshire_dk_green: #114500; -$oxfordshire_lt_green: #339E00; -$oxfordshire_very_light_green: #f6fcf0; -$oxfordshire_mid_grey_green: #e0e5da; - -$primary: $oxfordshire_lt_green; -$primary_b: $oxfordshire_dk_green; +$color-oxfordshire-dark-green: #00483a; +$color-oxfordshire-bright-green: #50B948; +$color-oxfordshire-pale-green: #f6fcf0; +$color-oxfordshire-pale-orange: #feead2; +$color-oxfordshire-pale-grey-green: #e0e5da; +$color-oxfordshire-bright-blue: #0e73d8; // used for buttons backgrounds +$color-oxfordshire-bright-orange: #EA6C18; // used for a:hover text color +$color-oxfordshire-bright-yellow: #edc856; // used for a:focus background + +$color-oxfordshire-link-blue: #0a549d; + +$primary: $color-oxfordshire-bright-green; +$primary_b: $color-oxfordshire-dark-green; $primary_text: #fff; -$base_bg: #fff; -$base_fg: #000; +$base_bg: #cfcfcf; +$base_fg: #333; -// Taken from the OCC website -$oxfordshire_link_colour: #0c62ba; +$map_nav_bg: $color-oxfordshire-dark-green; +$nav_fg: #000; +$nav_fg_hover: $nav_fg; -$map_nav_bg: $oxfordshire_dk_green; -$nav_fg: #fff; -$nav_fg_hover: #444; +$col_click_map: $color-oxfordshire-bright-green; -$col_click_map: $oxfordshire_lt_green; +$col_fixed_label: $color-oxfordshire-bright-green; +$col_fixed_label_dark: mix(#000, $color-oxfordshire-bright-green, 50%); -$col_fixed_label: $oxfordshire_lt_green; -$col_fixed_label_dark: mix(#000, $oxfordshire_lt_green, 50%); +$itemlist_item_background: #fff; +$itemlist_item_background_hover: #e0e2e5; -$itemlist_item_background: $oxfordshire_very_light_green; -$itemlist_item_background_hover: #e3f1d5; // darker version of $oxfordshire_very_light_green +$body-font: "Open Sans", sans-serif;; +$heading-font: "Fira Sans", sans-serif; +$meta-font: $body-font; -// Oxfordshire have toasty orange buttons +$header-top-border: false; -$oxfordshire_button_base: #F35A0E; -$oxfordshire_button_top: #EC6816; -$oxfordshire_button_bottom: #FE4602; -$oxfordshire_button_border: #CCC; +$form-control-border-color: #525252; $pin_prefix: '/cobrands/oxfordshire/images/'; diff --git a/web/cobrands/oxfordshire/_oxfordshire-footer.scss b/web/cobrands/oxfordshire/_oxfordshire-footer.scss new file mode 100644 index 000000000..39ad8a001 --- /dev/null +++ b/web/cobrands/oxfordshire/_oxfordshire-footer.scss @@ -0,0 +1,61 @@ +.occlss-wrapper { + max-width: 1200px; + margin: 0 auto; + padding: 0; +} + +.occlss-page-footer__wraper { + color: #fff; + background: #000; + padding-bottom: 2em; +} + +.s-cms-content-footer { + a { + color: #fff; + + &:hover { + color: $color-oxfordshire-bright-yellow; + } + + a:not([class]):focus { + background-color: $color-oxfordshire-bright-yellow; + outline: 2px solid $color-oxfordshire-bright-yellow; + } + } + + h1, h2, h3, h4 { + color: #ffffff; + font-size: 22px; + font-weight: 700; + margin: 0 0 10px 0; + } + + p { + margin: 0 0 5px 0; + } +} + +.occlss-page-footer { + margin-top: 0; +} + +.occlss-layout { + @include flex-container(); + @include flex-wrap(wrap); + position: relative; + padding: 0; +} + +.occlss-layout__col { + @include box-sizing(border-box); + @include flex-direction(column); + position: relative; + width: 100%; + vertical-align: top; + padding: 15px; + + @media (min-width: 768px) { + padding: 30px; + } +} diff --git a/web/cobrands/oxfordshire/_oxon.scss b/web/cobrands/oxfordshire/_oxon.scss deleted file mode 100644 index 39d2edec7..000000000 --- a/web/cobrands/oxfordshire/_oxon.scss +++ /dev/null @@ -1,237 +0,0 @@ -/* Parts of oxfordshire's main CSS needed for its header/footer and adjusted (see - * bottom) to not be affected by main FixMyStreet CSS. Not very sustainable; - * perhaps we should wrap all council CSS within a SCSS #council ID? Hmm. - */ - - @import "_colours"; - - -body { - font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; - line-height:18px; - a:not(.btn), a:visited:not(.btn) {text-decoration:none; color:$oxfordshire_link_colour} - a { font-size: 1em; } // mySociety - a:hover {text-decoration:underline} - margin:0; - background:#E0E0E0 url("images/bg.jpg") repeat-y top center; -} - -#oxford-wrapper { - background: url("images/bg-y.jpg") repeat-y scroll 0 0 #FFFFFF; - clear: both; - display: block; - margin: 0 auto; - padding: 0 8px; - width: 990px; -} - -#oxford-header { - padding:0 16px 7px 16px; - clear:both; - overflow:hidden; - position:relative; - width:958px; - min-height: 133px; - - background: $oxfordshire_lt_green url("images/header.jpg") no-repeat 0 0; - - a.logo:hover {cursor:pointer;cursor:hand} - a.logo { - float:left; - margin:3px 0 6px 10px; - width:173px; - height:38px; - background: url("images/logo.jpg") no-repeat 0 50%; - text-indent: -999999px; - } - - h1 { - float:left; padding:8px 0 0 10px; margin:0; font-size:1.25em; line-height:normal; - font-weight:bold; color:#ffffff; white-space:nowrap;font-family:"Trebuchet MS",Tahoma,Arial,sans-serif; - } - span.header { - float:left; padding:8px 0 0 10px; margin:0; font-size:1.25em; line-height:normal; font-weight:bold; - color:#ffffff; white-space:nowrap - } - a { - color:#ffffff; - } - #oxford-links { - padding: 10px 3px 0px 0px; float:right;color:#ffffff; - a { - font-size:0.75em; // mySociety putting this back (switched off in body) - margin: 0px 5px 0px 5px - } - } -} - -#oxford-main-menu { - clear: both; - margin: 0; - padding: 0; - font-size: 1em; - position: relative; - ul { - margin: 0 0 0 330px; - position: relative; - li { - margin: 0; - list-style-type: none; - float:left; - width:126px; - text-align:center; - background: #e0e0e0; - padding: 8px 0; - margin: 0 0 0 2px; - } - } - // from occ.css (client site): #main .view-features-for-homepage ul.tabs - ul.tabs { - float:left; - position:relative; - padding:0; - margin:0.5em 0 0 0; - z-index:10; - width: 990px; - //width:635px; - min-height:32px; - overflow:hidden; - clear:both; - background: #939393 url("images/tabs-featured.png") repeat 0 0; - li { - float:left; - padding:0 0 0px 1px; - margin:0; - font:0.813em/27px "Trebuchet MS"; - color:#ffffff; - height:32px; - background: #666 url("images/divider1x32.png") no-repeat 0 0; - } - li.first {padding:0; background:none} - span, // mySociety - a { - display:block; - position:relative; - padding:8px 0 0 0; - font:bold 1em "Trebuchet MS"; - height:24px; - color:#ffffff; - text-align:center; - background: #939393 url("images/tabs-featured.png") repeat-x 0 0; - white-space:nowrap; - } - a:hover, - a:focus { - background: none #EA6C18; - background:-moz-linear-gradient(100% 100% 90deg, #ff4401, #EA6C18); - background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#EA6C18), to(#ff4401)); - color: #ffffff; - } - li span, // mySociety - li.active a { - text-decoration:none; - background: #4c4c4c url("images/tabs-featured-on.png") repeat-x 0 0; - } - li.active a:hover, - li.active a:focus {color: #ffffff;} - li.first a {} - li.last a {border-right:1px solid #666;} - a {padding:8px 0 0 0;} - } -} - -#oxford-footer { - float:left; - display:inline; - margin:0 -8px 0 -8px; - padding:10px 25px 30px 21px; - clear:both; - overflow:hidden; - width:960px; - background:#000000 url(images/footer.jpg) no-repeat bottom left; - address {float:left; padding:11px 0 0 0; margin:0; color:#989898; font:0.813em arial} - a {font:1em arial; color:#ffffff; margin:0px 5px 0px 5px} - address a {font:1em arial; color:#ffffff; margin:0px 0px 0px 0px} - ul {float:right; padding:5px 0 0 55px; margin:0} - ul li {float:left; padding:0; font:0.813em/27px arial; color:#ffffff; overflow:hidden} - /* contact-the-team */ - li { - margin-left: 0.5em; - padding: 6px; - &.powered-by-fms { - // @include border-radius(6px); - min-width: 200px; - img { - display: inline; - height:20px; - width: 105px; - } - &:hover { - background-color:#2c2c2c; - } - a:hover { - text-decoration: none; - } - } - } -} - - /* --------------------------------------------------------------------------------- - oxfordshire nav menubar from e.g., - http://fisd.oxfordshire.gov.uk/kb5/oxfordshire/fsd/includes/css/wireframe/navbar.css - ---------------------------------------------------------------------------------*/ - -#navigation { - position: absolute; - left: 0; - top: 90px; - .menubar { - width: 972px; - padding: 0 0 0 18px; - border-top: 1px solid #004300; - font-size: 13px; /* explicit; it was implicit from OCC's styles */ - color: #999999; - overflow: visible; - /*width: @gridWidth; only needed for contained menu*/ - display: inline-block; - z-index: 100; - .menu-inner { - background-color: #004300; - background-repeat: repeat-x; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.1) inset; - .menu { - left: 0; - margin: 0 10px 0 0; - padding: 0; - position: relative; - list-style: none outside none; - > li { - list-style: none outside none; - float: left; - > a, > span { - color: #ffffff; - float: none; - line-height: 19px; - padding: 10px 10px 11px; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - display: block; - text-decoration: none; - &:hover { - color: #FFFFFF; - } - } - } - } - } - } - .menubar-fixed-top { - left: 0; - margin-bottom: 0; - position: fixed; - right: 0; - z-index: 1000; - } -} diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss index bd990bfd1..aaaaa186c 100644 --- a/web/cobrands/oxfordshire/base.scss +++ b/web/cobrands/oxfordshire/base.scss @@ -5,29 +5,178 @@ @import "../sass/base"; @import "../sass/report_list_pins"; +body { + background-color: $base_bg; +} + +#oxford-wrapper { + max-width: 75em; + margin: 0 auto; + background-color: #fff; + color: #333; +} + +a { + color: $color-oxfordshire-link-blue; + + &:hover { + color: $color-oxfordshire-bright-yellow; + } + + a:not([class]):focus { + background-color: $color-oxfordshire-bright-yellow; + outline: 2px solid $color-oxfordshire-bright-yellow; + } +} + +.form-control, +#front-main #postcodeForm div input#pc { + @include border-radius(none); + box-shadow: none; + + border: 1px solid $form-control-border-color; + color: $form-control-border-color; + font-size: 16px; + font-weight: 400; + + &:focus { + outline: 2px solid $color-oxfordshire-bright-yellow; + border: 1px solid $color-oxfordshire-bright-yellow; + } +} + +#site-header { + border-bottom: 4px solid $color-oxfordshire-bright-green; + padding: 10px 0; +} + #site-logo { - background: transparent url('images/logo.jpg') 0 50% no-repeat; - width: 173px; - height: 38px; - padding: 0.5em 0; -} - -#mysoc-logo { - background-image: none; - background-color: $primary; - color: #fff; - text-indent: 0; - img { - display: inline; - height: 20px; - width: 105px; - } + @include svg-background-image("images/site-logo-mobile"); + background-color: $map_nav_bg; + background-size: 175px 38px; + background-repeat: no-repeat; + background-position: 50% 50%; + width: 175px; + height: 0; + padding-top: 48px; + overflow: hidden; + text-indent: 0; + margin: 0 -5px; +} + +#nav-link { + #{$right}: 0.5em; } .oxfordshire-preamble { - background: #E0E0E0; - margin: 0em auto 1em auto; - padding: 1em 1em 0.5em 1em; + background: $color-oxfordshire-pale-orange; + margin: 1em; + padding: 1em; +} + +#front-main { + text-align: $left; + margin: 2em 0; + padding: 0 1em; + + h1 { + font-weight: 700; + } + + #postcodeForm { + margin: 0; + padding: 0; + color: inherit; + background: inherit; + + label { + font-family: $heading-font; + font-size: 20px; + font-weight: 500; + } + + div { + display: block; + width: auto; + background: transparent; + border: none; + + font-size: 1.25em; + margin-top: 0.5em; + max-width: 24em; + + @include flex-container(); + + input#pc { + display: block; + margin: 0 0.5em 0 0; + padding: 0.5em; + } + + input#sub { + padding-top: 0.6em; + padding-bottom: 0.5em; + width: auto; + height: auto; + } + } + } + + a#geolocate_link { + padding: 0; + background: transparent; + font-size: inherit; + color: $color-oxfordshire-link-blue; + margin-top: 0.5em; + + &:hover { + background-color: transparent; + color: $color-oxfordshire-bright-yellow; + } + + &:focus { + background-color: $color-oxfordshire-bright-yellow; + outline: 2px solid $color-oxfordshire-bright-yellow; + } + + &.loading { + background: transparent url("/cobrands/fixmystreet/images/spinner-white.gif") 100% 50% no-repeat; + padding: 0 1.5em 0 0; + border: none; + } + } +} + +#front_stats { + border-top: none; + margin-bottom: 1.5em; +} + +ol.big-numbers { + li { + font-weight: 400; + font-family: "Fira Sans", sans-serif; + font-size: 20px; + + & > :before { + color: #656d80; + } + } +} + +.frontpage { + .item-list__item img { + display: none; + } + + .content h2 { + font-weight: 600; + font-size: 32px; + line-height: 1.2em; + border-bottom: 1px solid $color-oxfordshire-dark-green; + margin-bottom: 1em; + padding-bottom: 5px; + } } dd, p { @@ -64,17 +213,52 @@ dd, p { background-color: mix(#fff, $primary, 85%); } -.btn-primary { +.btn { + @include button-reset( + #ffffff, #ffffff, #ffffff, #000, + #f3f3f3, #f3f3f3, #f3f3f3, #000 + ); + @include box-shadow( + inset 0 -4px 0 #f3f3f3, + 0 2px 4px 0 rgba(26, 26, 26, 0.2) + ); + border: none; + padding: 0.7em 1em 0.85em 1em; +} + +#front-main #postcodeForm div input#sub, +.green-btn, +button.green-btn, +input.green-btn, +.btn-primary, +.occlss-button--primary { @include button-reset( - $oxfordshire_button_top, - $oxfordshire_button_bottom, - $oxfordshire_button_border, - #fff, - darken($oxfordshire_button_bottom, 3%), - darken($oxfordshire_button_top, 3%), - $oxfordshire_button_border, - #fff + $color-oxfordshire-bright-blue, $color-oxfordshire-bright-blue, $color-oxfordshire-bright-blue, #fff, + darken(#0e73d8, 15%), darken(#0e73d8, 15%), darken(#0e73d8, 15%), #fff + ); + @include box-shadow( + inset 0 -4px 0 darken(#0e73d8, 15%), + 0 2px 4px 0 rgba(26, 26, 26, 0.2) ); + border: none; + padding: 0.7em 1em 0.85em 1em; +} + +.form-txt-submit-box input[type="submit"] { + padding: 0.7em 1em 0.85em 1em; +} + +input[type="tel"], +input[type="number"], +input[type="text"], +input[type="password"], +input[type="email"], +input[type="date"], +input[type="time"], +input[type="datetime"], +input[type="url"], +textarea { + padding: 0.7em; } .box-warning { @@ -84,20 +268,49 @@ dd, p { .extra-text { padding: 1em; margin: 0 -1em; - border-bottom: 1px solid $oxfordshire_mid_grey_green; + border-bottom: 1px solid $color-oxfordshire-pale-grey-green; p:last-child { margin-bottom: 0; } } +.item-list--reports__item { + small { + font-style: inherit; + } + + a { + &:focus { + background-color: $color-oxfordshire-bright-yellow; + outline: 2px solid $color-oxfordshire-bright-yellow; + } + + &:hover, + &:focus { + color: #000; + + h3, small { + color: inherit; + } + } + } +} + +.item-list__heading, +.item-list--reports h3, +.item-list__item h3 { + color: $color-oxfordshire-link-blue; +} + @media print { body { background-color: #fff !important; } - .mappage #oxford-header, .mappage #side > .extra-text { display: none !important; } } + +@import "oxfordshire-footer"; diff --git a/web/cobrands/oxfordshire/images/bg-y.jpg b/web/cobrands/oxfordshire/images/bg-y.jpg deleted file mode 100755 index b623bc784..000000000 Binary files a/web/cobrands/oxfordshire/images/bg-y.jpg and /dev/null differ diff --git a/web/cobrands/oxfordshire/images/bg.jpg b/web/cobrands/oxfordshire/images/bg.jpg deleted file mode 100755 index e670c0f7d..000000000 Binary files a/web/cobrands/oxfordshire/images/bg.jpg and /dev/null differ diff --git a/web/cobrands/oxfordshire/images/divider1x32.png b/web/cobrands/oxfordshire/images/divider1x32.png deleted file mode 100644 index fffea7e24..000000000 Binary files a/web/cobrands/oxfordshire/images/divider1x32.png and /dev/null differ diff --git a/web/cobrands/oxfordshire/images/fms-logo-105x20.png b/web/cobrands/oxfordshire/images/fms-logo-105x20.png deleted file mode 100644 index 286f22ded..000000000 Binary files a/web/cobrands/oxfordshire/images/fms-logo-105x20.png and /dev/null differ diff --git a/web/cobrands/oxfordshire/images/footer.jpg b/web/cobrands/oxfordshire/images/footer.jpg deleted file mode 100755 index 8bd0758eb..000000000 Binary files a/web/cobrands/oxfordshire/images/footer.jpg and /dev/null differ diff --git a/web/cobrands/oxfordshire/images/header.jpg b/web/cobrands/oxfordshire/images/header.jpg deleted file mode 100755 index f642adfc4..000000000 Binary files a/web/cobrands/oxfordshire/images/header.jpg and /dev/null differ diff --git a/web/cobrands/oxfordshire/images/logo-light-green.gif b/web/cobrands/oxfordshire/images/logo-light-green.gif deleted file mode 100644 index 6bf7b6940..000000000 Binary files a/web/cobrands/oxfordshire/images/logo-light-green.gif and /dev/null differ diff --git a/web/cobrands/oxfordshire/images/logo.jpg b/web/cobrands/oxfordshire/images/logo.jpg deleted file mode 100755 index 9ab24d2c4..000000000 Binary files a/web/cobrands/oxfordshire/images/logo.jpg and /dev/null differ diff --git a/web/cobrands/oxfordshire/images/occ-badge-nav-bg.png b/web/cobrands/oxfordshire/images/occ-badge-nav-bg.png new file mode 100644 index 000000000..6491d5bee Binary files /dev/null and b/web/cobrands/oxfordshire/images/occ-badge-nav-bg.png differ diff --git a/web/cobrands/oxfordshire/images/site-logo-mobile.png b/web/cobrands/oxfordshire/images/site-logo-mobile.png new file mode 100644 index 000000000..e5b3526ba Binary files /dev/null and b/web/cobrands/oxfordshire/images/site-logo-mobile.png differ diff --git a/web/cobrands/oxfordshire/images/site-logo-mobile.svg b/web/cobrands/oxfordshire/images/site-logo-mobile.svg new file mode 100644 index 000000000..7185dea8a --- /dev/null +++ b/web/cobrands/oxfordshire/images/site-logo-mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/cobrands/oxfordshire/images/tabs-featured-on.png b/web/cobrands/oxfordshire/images/tabs-featured-on.png deleted file mode 100644 index 94fe089c6..000000000 Binary files a/web/cobrands/oxfordshire/images/tabs-featured-on.png and /dev/null differ diff --git a/web/cobrands/oxfordshire/images/tabs-featured.png b/web/cobrands/oxfordshire/images/tabs-featured.png deleted file mode 100644 index 99b823faf..000000000 Binary files a/web/cobrands/oxfordshire/images/tabs-featured.png and /dev/null differ diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss index 92adcc78e..0e49916ac 100644 --- a/web/cobrands/oxfordshire/layout.scss +++ b/web/cobrands/oxfordshire/layout.scss @@ -1,44 +1,182 @@ -// We specify a 4em header height in pixels, to make -// the .menubar link padding calculations simpler. -$mappage-header-height: 64px; +$mappage-header-height: 10em; @import "_colours"; @import "../sass/layout"; -body, body a { - font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; +.container { + max-width: none; // max-width on #oxford-wrapper sorts this out for us } -#front-main { - background-color: $primary; - background-image: none; - @include border-radius(1em 1em 0 0); - margin: 2em 1em 0; - padding-top: 1em; - h1 { - margin: 0 auto 0 auto; - } - h2 { - color: $primary_text; - } - a#geolocate_link { - color: $primary_text; - } +#site-header { + @include box-sizing(border-box); // so that $mappage-header-height doesn't have to account for internal padding + background: $color-oxfordshire-dark-green url("/cobrands/oxfordshire/images/occ-badge-nav-bg.png"); + background-repeat: no-repeat; + background-position: 125% 31%; } -// Currently hide the nav-wrapper, because it's in going into Oxfordshire's own nav -.nav-wrapper { - display: none; +#site-logo { + background-color: transparent; + margin: 0 1em; } -// hide the site-header, currently has council logo at top of page -#site-header { - display: none; +#main-nav { + display: block; // undo flexbox + height: auto; + min-height: 0; + float: none; + + .ie9 & { + position: static; + float: none; + + & > * { + position: static; + -ms-transform: none; + } + } +} + +.nav-menu--main { + margin-top: 5.5em; + float: none; + @include flex-container(); + + li { + @include flex(1 1 0%); // flex-basis (3rd argument) must have a unit, to avoid IE10-11 bugs + padding: 8px 16px; + position: relative; + } + + // No need for `span` in this selector, because Oxfordshire + // nav items are always links (see main_nav.html) + a, + a:hover, + a:focus { + color: $nav_fg; + background-color: transparent; + } + + a { + display: inline; + padding: 0; + margin: 0; + font-size: 18px; + line-height: 1.2em; + font-weight: 700; + + &:after { + content: ""; + display: block; + position: absolute; + left: 16px; + right: 16px; + top: 100%; + height: 4px; + background: $color-oxfordshire-dark-green; + transition: height 0.1s ease-in-out; + } + } + + a:hover { + border-bottom-width: 8px; + margin-bottom: -4px; + + &:after { + height: 8px; + } + } + + a:focus { + outline: 2px solid $color-oxfordshire-bright-yellow; + } +} + +.nav-spacer { + height: 5.5em; +} + +#front-main { + background: transparent; + color: inherit; + margin: 2% 0 4% 0; + + h1 { + font-size: 42px; + line-height: 68px; + margin-bottom: 4%; + } + + #front-main-container { + padding: 0 1em; + max-width: none; + margin: 0; + } + + #postcodeForm { + margin-right: 0; + overflow: visible; + + div { + display: block; + width: auto; + max-width: 38em; + margin: 0.75em 0 0 0; + overflow: visible; + + @include flex-container(); + + input#pc { + display: block; + margin: 0 0.5em 0 0; + padding: 0.5em; + height: auto; + width: 100%; + max-width: 80%; + } + + input#sub { + padding: 0.6em 1.5em; + width: auto; + height: auto; + text-transform: none; + } + } + } + + a#geolocate_link { + color: $color-oxfordshire-link-blue; + + &:hover { + color: $color-oxfordshire-bright-yellow; + } + + &:focus { + background-color: $color-oxfordshire-bright-yellow; + outline: 2px solid $color-oxfordshire-bright-yellow; + } + } +} + +.frontpage { + .content h2 { + font-size: 2em; + } } -// White background, so no margin needed. -.content { - margin: 0; +#front_stats { + border-top: none; + padding-top: 0; + + div { + font-size: 1.2em; // up from 0.8125em in base.scss + font-weight: 600; + } + + big { + font-weight: 900; + font-family: $heading-font; + color: #24b137; + } } // Fix location of aside sidebar @@ -64,53 +202,24 @@ body.mappage { background: none; padding: 0; } - #oxford-header { - width: auto; - min-height: $mappage-header-height; // override the normal min-height of 133px - padding: 0; - background-color: #069b01; // picked from header.jpg - background-position: 100% 40%; - overflow: auto; - @include box-shadow(0 0 5px rgba(0,0,0,0.3)); - & > * { - display: none; - } - - a.logo { - display: block; - height: $mappage-header-height; - width: 200px; - margin: 0; - background: transparent url("images/logo-light-green.gif") no-repeat 50% 50%; - } - - #navigation { - display: block; - position: static; - float: right; - } + #site-header { + border-bottom: none; + background-position: 125% 36%; + background-position: calc(100% + 130px) 36%; + } - .menubar { - display: block; - width: auto; - border-top: none; - padding: 0; - - // override super-specific "#navigation .menubar .menu-inner .menu>li>a" - // selector from OCC header styles in oxfordshire.scss - .menu-inner .menu { - li { - margin-bottom: 0; - } + .nav-wrapper { + top: 70px; + background: #fff; + border-top: 4px solid $color-oxfordshire-bright-green; + border-bottom: 1px solid $color-oxfordshire-pale-grey-green; + } - a, span { - line-height: 20px; - padding-top: ($mappage-header-height - 20px) / 2; - padding-bottom: ($mappage-header-height - 20px) / 2; - } - } - } + .nav-menu--main { + margin-top: 0; + height: 40px; + padding: 19px 0 27px 0; } .wrapper .table-cell { @@ -165,17 +274,14 @@ body.mappage { } } - #oxford-footer { + #occlss-footer, + #pagefooter { display: none; } } -#map_sidebar { - background-color: $oxfordshire_very_light_green; -} - .item-list--reports h3 { - color: $oxfordshire_link_colour; + color: $color-oxfordshire-bright-blue; } h4.static-with-rule { @@ -190,7 +296,7 @@ h4.static-with-rule { margin-top: 0; // no space between list items // Replicate .item-list--reports styling, a bit - border-top: 1px solid $oxfordshire_mid_grey_green; + border-top: 1px solid $color-oxfordshire-pale-grey-green; padding: 1em 1em 1em 0; margin-left: 1em; @@ -204,61 +310,26 @@ h4.static-with-rule { } .form-box { - background-color: #e3f1d5; // darker version of $oxfordshire_very_light_green + background-color: $color-oxfordshire-pale-green; } .extra-category-questions { - background-color: #e3f1d5; // darker version of $oxfordshire_very_light_green + background-color: $color-oxfordshire-pale-green; &:before { - border-bottom-color: #e3f1d5; // darker version of $oxfordshire_very_light_green + border-bottom-color: $color-oxfordshire-pale-green; } } #key-tools { - @include box-shadow(0 0 1em 1em $oxfordshire_very_light_green); border-top-width: 2px; } -#oxford-wrapper #front-main #postcodeForm div { - border: 1px solid #fff; // because orange "Go" button (see below) abuts this border, looks a tiny bit better if it's not dark green - width: 24em; // up from default 20em - - #pc { - padding: 0 0 0 2%; - width: 20em; - height: 40px; - } -} - -// styled Oxfordshire buttons -- including the "Go" button on the postcode form -- to be orange: - -#front-main #postcodeForm div input#sub, -.green-btn, -button.green-btn, -input.green-btn{ - @include button-reset( - $oxfordshire_button_top, $oxfordshire_button_bottom, $oxfordshire_button_border, #fff, - $oxfordshire_button_top, $oxfordshire_button_bottom, $oxfordshire_button_border, #fff - ); - text-transform:capitalize; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - @include box-shadow( - inset 0 1px 0 rgba(255, 255, 255, 0.2), - 0 1px 2px rgba(0, 0, 0, 0.05) - ); - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - font-weight: normal; - cursor: pointer; -} - .click-the-map { - border-bottom-color: $oxfordshire_mid_grey_green; + border-bottom-color: $color-oxfordshire-pale-grey-green; p { - color: $oxfordshire_lt_green; + color: $color-oxfordshire-bright-green; background-image: url(images/click-map-chevron-small.gif); } } @@ -300,5 +371,3 @@ input.green-btn{ float: left; margin-right: 1em; } - -@import "oxon"; -- cgit v1.2.3