diff options
Diffstat (limited to 'web')
20 files changed, 550 insertions, 15 deletions
diff --git a/web/cobrands/barnet/_colours.scss b/web/cobrands/barnet/_colours.scss new file mode 100644 index 000000000..2f5ccc42b --- /dev/null +++ b/web/cobrands/barnet/_colours.scss @@ -0,0 +1,9 @@ +/* COLOURS */ + +$primary: #E9E9EA; +$primary_b: #000000; +$primary_text: #3E3D44; + +$contrast1: #E1E3E4; +$contrast1_dark: darken(#E1E3E4, 10%); +$contrast2: #AA8D11; diff --git a/web/cobrands/barnet/barnet.scss b/web/cobrands/barnet/barnet.scss new file mode 100644 index 000000000..34b2d79ce --- /dev/null +++ b/web/cobrands/barnet/barnet.scss @@ -0,0 +1,17 @@ +/* Parts of barnet'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 "compass"; + +#column_nav li { list-style: none ;} + +#content ol.big-numbers li { + padding: 0 0 0 2.5em; +} + +#front-howto #front_stats div big, +ol.big-numbers > li::before { + color: #C0E8E8; +} diff --git a/web/cobrands/barnet/base.scss b/web/cobrands/barnet/base.scss new file mode 100644 index 000000000..44954d909 --- /dev/null +++ b/web/cobrands/barnet/base.scss @@ -0,0 +1,6 @@ +@import "../fixmystreet/_h5bp"; +@import "./_colours"; +@import "../fixmystreet/_mixins"; +@import "compass"; + +@import "../fixmystreet/_base"; diff --git a/web/cobrands/barnet/img/barnet-footer-logo.gif b/web/cobrands/barnet/img/barnet-footer-logo.gif Binary files differnew file mode 100644 index 000000000..afba1cca2 --- /dev/null +++ b/web/cobrands/barnet/img/barnet-footer-logo.gif diff --git a/web/cobrands/barnet/img/barnet-logo.gif b/web/cobrands/barnet/img/barnet-logo.gif Binary files differnew file mode 100644 index 000000000..86e0f4ee8 --- /dev/null +++ b/web/cobrands/barnet/img/barnet-logo.gif diff --git a/web/cobrands/barnet/img/browsealoud.gif b/web/cobrands/barnet/img/browsealoud.gif Binary files differnew file mode 100644 index 000000000..4fbb3eded --- /dev/null +++ b/web/cobrands/barnet/img/browsealoud.gif diff --git a/web/cobrands/barnet/img/directgov.gif b/web/cobrands/barnet/img/directgov.gif Binary files differnew file mode 100644 index 000000000..1c9dd22e2 --- /dev/null +++ b/web/cobrands/barnet/img/directgov.gif diff --git a/web/cobrands/barnet/img/nav-arrow-active.gif b/web/cobrands/barnet/img/nav-arrow-active.gif Binary files differnew file mode 100644 index 000000000..89ff9d0b3 --- /dev/null +++ b/web/cobrands/barnet/img/nav-arrow-active.gif diff --git a/web/cobrands/barnet/img/nav-bg-active.gif b/web/cobrands/barnet/img/nav-bg-active.gif Binary files differnew file mode 100644 index 000000000..0d2ec9873 --- /dev/null +++ b/web/cobrands/barnet/img/nav-bg-active.gif diff --git a/web/cobrands/barnet/img/social1-facebook.gif b/web/cobrands/barnet/img/social1-facebook.gif Binary files differnew file mode 100644 index 000000000..41b404df0 --- /dev/null +++ b/web/cobrands/barnet/img/social1-facebook.gif diff --git a/web/cobrands/barnet/img/social2-twitter.gif b/web/cobrands/barnet/img/social2-twitter.gif Binary files differnew file mode 100644 index 000000000..17f368536 --- /dev/null +++ b/web/cobrands/barnet/img/social2-twitter.gif diff --git a/web/cobrands/barnet/img/social3-youtube.gif b/web/cobrands/barnet/img/social3-youtube.gif Binary files differnew file mode 100644 index 000000000..eeb6ba356 --- /dev/null +++ b/web/cobrands/barnet/img/social3-youtube.gif diff --git a/web/cobrands/barnet/img/social4-flickr.gif b/web/cobrands/barnet/img/social4-flickr.gif Binary files differnew file mode 100644 index 000000000..300e75da0 --- /dev/null +++ b/web/cobrands/barnet/img/social4-flickr.gif diff --git a/web/cobrands/barnet/layout.scss b/web/cobrands/barnet/layout.scss new file mode 100644 index 000000000..1f43168d6 --- /dev/null +++ b/web/cobrands/barnet/layout.scss @@ -0,0 +1,312 @@ +@import "_colours"; +@import "../fixmystreet/_layout"; + +// So that map appears underneath the header +.wrapper { + position: relative; +} +.ie6, .ie7 { + .wrapper { + padding-top: 1em; + } +} + +#front-main { + background: $primary; + @include border-radius(1em 1em 0 0); + margin-bottom: 1em; + padding-top: 0; + // layout sets this because base has it slightly lighter + h2 { + color: $primary_text; + } +} + +#front_intro { + float: left; + margin-right: 3em; +} + +#front_recent { + margin-left: 3em; +} + +.content { + width: auto; +} + +.nav-wrapper { + display: none; +} + +.mappage .content { + margin-top: 6em; +} + +.frontpage .content { + margin: 0; + @include box-shadow(none); +} +.ie6, .ie7, .ie8 { + .frontpage .content { + border: none; + } +} + +#content .container h1 { + border-bottom: none; + font-size: 2em; + margin-bottom: 0.5em; +} + +/* +.mappage #content .container h1 { + margin-left: 0; +} +*/ + +#content h1.big-green-banner { + font-size: 1em; + margin-left: -2em; +} + +/* barnet styles */ + +.clear { + clear: both; +} + +.container { + padding: 0 1em; +} + +#site-header { + display: none; +} + +#side-form { + width: 30em; +} + +#report-a-problem-sidebar { + left: 33.5em; + top: 7em; +} + +.general-sidebar-notes { + left: 31.75em; + p { + margin-bottom: 0 !important; + } +} + +#barnet-wrapper { + width: 100%; + display: table; + caption-side: bottom; +} + +body {font-size: 77%; font-family: Arial, Helvetica, sans-serif; color: #3e3d44; padding: 0; margin: 0; line-height: 1.5; background: #e9e9ea;} +body > html {font-size: 12px;} + +#barnet-wrapper {padding: 0; margin: 20px auto; width: 960px; background: #fff;} +#ie_wrapper {display: block; padding: 20px 25px 25px;} +#page {float: left; width: 100%;} + +#mast {clear: both;} + +#mast .pseudoH1 {margin: 0 0 0 -3px; padding: 0; background: url(img/barnet-logo.gif) no-repeat top left; width: 240px; height: 38px; float: left;} +#mast .pseudoH1 a, #mast .pseudoH1 a:link, #mast .pseudoH1 a:visited, #mast .pseudoH1 a:hover, #mast .pseudoH1 a:active {display: block; width: 240px; height: 38px; padding: 0; background: url(img/barnet-logo.gif) no-repeat top left;} +#mast .pseudoH1 span {position: absolute; margin-top: -13000px; top: -13000px;} + +#mast .mast_links {float: right; display: inline; margin: 0; padding: 10px 0 0; list-style: none; overflow: hidden;} + +#mast #search {clear: both; float: right; margin: 8px 0 0; background: #e1e3e4; border-top: 6px solid #bddadc; border-bottom: 2px solid #c8cacb; width: 100%; padding: 3px 0 2px; height: 21px;} + +/* ############################################################## */ + +#content {margin: 0; width: 910px; overflow: hidden; min-height: 350px;} +#content.withWidth {margin: 0 0 0 232px; width: 446px; overflow: hidden; float: left; display: inline;} +#content.fullWidth {width: 678px;} +#content.home {margin-top: 18px;} + +.mappage #content.withWidth {margin: 0 0 0 0px; width: auto; overflow: hidden; float: left; display: inline;} +.mappage #content.fullWidth {width: 900px;} + +#breadcrumb {font-size: .9em; color: #5c6267; padding: 6px 0; margin: 0 0 0 232px;} +#breadcrumb.full {margin: 0;} +#breadcrumb ul {margin: 0; padding: 0; list-style: none;} +#breadcrumb ul li {margin: 0; padding: 0 4px 0 0; display: inline;} +#breadcrumb ul li a:link, #breadcrumb ul li a:visited, #breadcrumb ul li a:hover, #breadcrumb ul li a:active {color: #5c6267; background: url(../css_img/bcArrow.gif) no-repeat right center; padding: 0 10px 0 0; font-weight: normal;} +#breadcrumb ul li span {font-weight: normal; color: #5c6267;} + +#content h1 {margin: 0 0 20px; font-size: 1.8em; border-bottom: 6px solid #bed9dd; font-family: Georgia, Times, 'Times New Roman', serif; color: #5d6167;} +#content h1 span {padding: 6px 7px 3px; border: 1px solid #eff1f2; border-bottom: 0 none; display: block;} +#content h2 {font-size: 1.4em; margin: 18px 0 10px; clear: left;} +#content h2.signin {font-size: 1.2em; color: #fff; background: #000; padding: 3px 10px; margin-bottom: 0;} +#content h3 {margin: 18px 0 10px; font-size: 1.2em;} +#content h3.links-heading {float: left;} +#content h3#pagenavbox {margin-top: 12px; padding-top: 18px; border-top: 1px solid #e1e1e1;} +#content h4 {margin: 18px 0 10px; font-size: 1.1em;} + +#content p {margin: 0 0 10px;} +#content p.summary {font-size: 1.1em; line-height: 1.5;} +#content p.date {margin: 0 0 10px; font-size: .9em; color: #666;} +#content p.faq {margin: 0 0 9px;} +#content p.page_down {margin: 0 0 10px; padding-left: 20px; background: url(../css_img/icon_download.gif) no-repeat 0 1px;} +#content p.news {margin: 0; font-size: 1.1em;} +#content p.small {font-size: .9em;} +#content p.note {margin: 0; font-size: .9em; color: #666;} +#content p.details {margin: 5px 0; padding: 0; font-size: .9em; color: #666;} +#content p.links-top {float: right; margin-top: 5px; margin-left: 18px;} + +#content table {margin: 18px 0; width: 100%;} +#content table tr {border-width: 0 1px 1px 0; border-style: solid; border-color: #fff; background: #EFF1F2;} +#content table td {border-width: 0 1px 1px 0; border-style: solid; border-color: #fff; background: #EFF1F2; padding: 5px} +#content table th {border-width: 0 1px 1px 0; border-style: solid; border-color: #fff; background: #E1E3E4; font-weight: bold; font-size: 1em; line-height: 1.5;} +#content table caption {font-size: 1.1em;} + +#content address {font-style: normal; background: url(../css_img/icon_email.gif) no-repeat 0 4px; padding: 3px 0 15px 20px;} + +#content ul li {padding: 0 0 6px;} +#content ol li {padding: 0 0 6px;} + +#content a.icon img {float: left; height: 16px; margin: 0 10px 0 0; width: 16px;} + +/* ############################################################## */ + +#column_nav {width: 214px; float: left; display: inline; padding: 0; margin: -35px 0 0 -910px; border-right: 3px solid #fff;} +body.mappage #column_nav { display: none; } + + +#column_nav .navigation {background: #fff; margin: 0 0 4px;} +#column_nav h2 {font-size: 1.2em; padding: 0; height: 29px; margin: 0; border-radius: 0 0 3px 3px; background: url(img/nav-bg-active.gif) left bottom repeat-x; border-top: 6px solid #bddadc;} +#column_nav #nav1 h2 {border-radius: 0 0 0 3px;} +#column_nav h2 a {color: #fff; padding: 3px 10px 0 26px; display: block; background: url(img/nav-arrow.gif) 8px 7px no-repeat;} +#column_nav .active h2 a {background: url(img/nav-arrow-active.gif) 8px 8px no-repeat;} +#column_nav ul {margin: 0 0 0 4px; padding: 8px 7px 4px; border-width: 0 1px 1px; border-color: #e1e1e1; border-style: solid; border-radius: 3px; list-style: none; background: #fff; background: -moz-linear-gradient(top, #ffffff 0%, #f7f9f8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f7f9f8)); background: -webkit-linear-gradient(top, #ffffff 0%,#f7f9f8 100%); background: -o-linear-gradient(top, #ffffff 0%,#f7f9f8 100%); background: -ms-linear-gradient(top, #ffffff 0%,#f7f9f8 100%); background: linear-gradient(top, #ffffff 0%,#f7f9f8 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f9f8',GradientType=0);} +#column_nav ul li {margin: 0; padding: 2px 4px; border-bottom: 1px solid #bfc0c1; color: #333; font-size: .9em;} +#column_nav ul li.lastItem {border-bottom: none;} +#column_nav ul li a:link, #column_nav ul li a:visited, #column_nav ul li a:hover, #column_nav ul li a:active {display: block; color: #333; font-weight: normal;} +#column_nav ul li a:hover, #column_nav ul li a:active {text-decoration: none; color: #0090a2;} + +/* ############################################################## */ + +#footer {clear: both; margin: 10px 0 0; padding: 15px 0 0; text-align: left;} +#footer p {border-top: 1px solid #dadadb; border-bottom: 1px solid #dadadb; margin: 0 0 5px; color: #5d6167; float: left; display: inline; height: 24px; padding: 8px 0 2px; width: 551px;} +#footer p a {color: #5d6167; font-weight: normal; padding: 0 2px;} +#footer p.assocLinks {float: right; display: inline; padding: 5px 0; width: 359px;} +#footer p.assocLinks a {float: left; display: inline; margin: 0 0 0 8px; padding: 0; background-position: center top; background-repeat: no-repeat; width: 24px; height: 24px;} +#footer p.assocLinks a:active, #footer p.assocLinks a:hover, #footer p.assocLinks a:focus {background-position: center bottom;} +#footer a#goto_browsealoud {background-image: url(img/browsealoud.gif); width: 95px; height: 25px; margin-top: 1px;} +#footer a#goto_directgov {background-image: url(img/directgov.gif); width: 90px; margin: 0 0 0 22px;} +#footer a#share_facebook {background-image: url(img/social1-facebook.gif); margin: 0 0 0 24px;} +#footer a#share_twitter {background-image: url(img/social2-twitter.gif);} +#footer a#share_youtube {background-image: url(img/social3-youtube.gif);} +#footer a#share_flickr {background-image: url(img/social4-flickr.gif);} +#footer a#share_sharethis {background-image: url(img/social5-sharethis.gif);} +#bottomBar {background: url(img/barnet-footer-logo.gif) 771px 12px no-repeat #21aaaa; display: block; width: 100%; height: 56px; border-top: 6px solid #bddadc;} + +#poweredby {margin: 0 auto; padding: 0 0 18px; display: block; width: 910px; text-align: right; color: #999;} +#poweredby a {font-weight: normal; color: #999;} + +/* +// Don't want gap that normal site has +body { + .table-cell { + .content { + margin-left: -20px; + margin-top: -120px; + } + } +} + +.container { + width: 446px; + padding-left: 232px; +} + +.wrapper { + width: 960px; +} + +// Don't want FixMyStreet logo on desktop, and we have a skip to content in +// Bromley header +#site-header { + display: none; +} + +#site-logo { + display: none; +} +#user-meta { + display: none; +} + +// Currently hiding, but do want some internal navigation somewhere at the end +.nav-wrapper { + display: none; +} + +// White background, so no shadow or margin needed. + +// Perhaps fix map location (should be in central?) +.ie6 #map_box, .ie7 #map_box { + right: -32em; +} + +.general-sidebar-notes, +#report-a-problem-sidebar { + position: static; + width: auto; + @include box-shadow(rgba(0, 0, 0, 0), 0, 0, 0); + .sidebar-tips, + .sidebar-notes { + font-size:1em; + } +} + +.ie7 .big-green-banner { + right: 0; +} + +// Pull OpenLayers navigation down a bit +#fms_pan_zoom { + top: 0.5em !important; +} + +// Fix location of aside sidebar +body.twothirdswidthpage { + .content { + aside { + @include box-shadow(none); + } + .sticky-sidebar { + aside { + position: absolute; + top: 0; + } + } + } +} +@media only screen and (min-width: 48em) and (max-width: 61em) { + body.twothirdswidthpage { + .content { + .sticky-sidebar { + top: auto; + } + } + } +} + +// So as not to interfere with the Bromley footer, make the fixed nav static. +.shadow-wrap { + position: static; + padding-top: 0; + margin-bottom: 1em; + ul#key-tools { + border-top: none; + border-bottom: 1px solid $primary; + } +} + */ diff --git a/web/cobrands/barnet/position_map.js b/web/cobrands/barnet/position_map.js new file mode 100644 index 000000000..95e6717ee --- /dev/null +++ b/web/cobrands/barnet/position_map.js @@ -0,0 +1,14 @@ +function position_map_box() { + var map_pos = 'absolute', map_height = '100%'; + if ($('html').hasClass('ie6')) { + map_pos = 'absolute'; + map_height = $(window).height(); + } + $('#map_box').prependTo('.wrapper').css({ + zIndex: 0, position: map_pos, + top: $('.wrapper').top, left: $('.wrapper').left, + right: $('.wrapper').right, bottom: $('.wrapper').bottom, + width: '100%', height: map_height, + margin: 0 + }); +} diff --git a/web/cobrands/bromley/_colours.scss b/web/cobrands/bromley/_colours.scss index c0376274e..e178c9db2 100644 --- a/web/cobrands/bromley/_colours.scss +++ b/web/cobrands/bromley/_colours.scss @@ -1,8 +1,9 @@ /* COLOURS */ -$primary: rgb(76,120,168); +$primary: rgb(91,120,147); $primary_b: #000000; $primary_text: #ffffff; -$contrast1: #00BD08; +$contrast1: rgb(91,120,147); +$contrast1_dark: darken(rgb(91,120,147), 10%); $contrast2: #AA8D11; diff --git a/web/cobrands/bromley/base.scss b/web/cobrands/bromley/base.scss index 4594f832f..9c5ff2b0f 100644 --- a/web/cobrands/bromley/base.scss +++ b/web/cobrands/bromley/base.scss @@ -5,3 +5,56 @@ @import "../fixmystreet/_base"; +a, a:visited { + color: #369; + &:hover, &:active { + color: #369; + } +} + +h1.main { + color: $primary; + text-align: center; + margin: 0.5em 0; +} + +// Want a white header, and logo is slightly bigger +#site-header { + @include background(linear-gradient(#ddd, #fff 10%, #fff)); + height: 4em; +} + +// Colour tab to match colour scheme +#nav-link { + width: 50px; + height: 48px; + background: url('/cobrands/bromley/tab-blue.png') 0 0 no-repeat; +} + +// Change logo to logo of council +#site-logo { + display: block; + width: 80px; + height: 44px; + top: 0.9em; + background: url('/cobrands/bromley/bromley-logo.s.jpg') 0 0 no-repeat; +} + +#problems-nav { + border-bottom:0.25em solid $primary; + ul li a { + text-transform: none; + &.active { + background: $primary; + color: #fff; + } + } +} + +.big-green-banner { + text-transform: none; +} + +#form_sign_in { + margin-top: 1em; +} diff --git a/web/cobrands/bromley/layout.scss b/web/cobrands/bromley/layout.scss index 3dc34c6c7..f773b47f1 100644 --- a/web/cobrands/bromley/layout.scss +++ b/web/cobrands/bromley/layout.scss @@ -1,11 +1,131 @@ @import "_colours"; @import "../fixmystreet/_layout"; -body { - background: #fff; +body { background: #9b9b9b url('http://www.bromley.gov.uk/site/styles/css_img/repeater.gif') repeat-x; } +#bromley-wrapper { background: #fff url('http://www.bromley.gov.uk/site/styles/css_img/header-corners.gif') center 110px no-repeat; margin: 1px auto 0; padding: 0 15px; width: 955px;} +.offline #bromley-wrapper { padding: 0 15px 20px; } + +// So that map appears underneath the header +.wrapper { + position: relative; +} +.ie6, .ie7 { + .wrapper { + padding-top: 1em; + } } #front-main { background: $primary; + @include border-radius(1em 1em 0 0); + margin-bottom: 1em; + padding-top: 0; + // layout sets this because base has it slightly lighter + h2 { + color: $primary_text; + } +} + +// Don't want gap that normal site has +body.frontpage { + .table-cell { + .content { + margin-top: 0; + } + } +} + +// Don't want FixMyStreet logo on desktop, and we have a skip to content in +// Bromley header +#site-header { + display: none; +} + +#user-meta { + display: none; +} + +// Currently hiding, but do want some internal navigation somewhere at the end +.nav-wrapper { + display: none; +} + +// White background, so no shadow or margin needed. +.content { + margin: 0; + @include box-shadow(none); +} +.ie6, .ie7, .ie8 { + .content { + border: none; + } +} + +// As map can scroll and isn't at the top, give it an edge +#map_box { + border: solid 1px #999; + top: 1em; + right: 0em; + margin: 0; +} + +// Perhaps fix map location (should be in central?) +.ie6 #map_box, .ie7 #map_box { + right: -32em; +} + +.general-sidebar-notes, +#report-a-problem-sidebar { + position: static; + width: auto; + @include box-shadow(rgba(0, 0, 0, 0), 0, 0, 0); + .sidebar-tips, + .sidebar-notes { + font-size:1em; + } +} + +.ie7 .big-green-banner { + right: 0; +} + +// Pull OpenLayers navigation down a bit +#fms_pan_zoom { + top: 0.5em !important; +} + +// Fix location of aside sidebar +body.twothirdswidthpage { + .content { + aside { + @include box-shadow(none); + } + .sticky-sidebar { + aside { + position: absolute; + top: 0; + } + } + } +} +@media only screen and (min-width: 48em) and (max-width: 61em) { + body.twothirdswidthpage { + .content { + .sticky-sidebar { + top: auto; + } + } + } +} + +// So as not to interfere with the Bromley footer, make the fixed nav static. +.shadow-wrap { + position: static; + padding-top: 0; + margin-bottom: 1em; + ul#key-tools { + border-top: none; + border-bottom: 1px solid $primary; + } } diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js index 0db8334fb..ffbf2952f 100644 --- a/web/cobrands/fixmystreet/fixmystreet.js +++ b/web/cobrands/fixmystreet/fixmystreet.js @@ -128,17 +128,7 @@ $(function(){ } else { // Make map full screen on non-mobile sizes. $html.removeClass('mobile'); - var map_pos = 'fixed', map_height = '100%'; - if ($html.hasClass('ie6')) { - map_pos = 'absolute'; - map_height = $(window).height(); - } - $('#map_box').prependTo('.wrapper').css({ - zIndex: 0, position: map_pos, - top: 0, left: 0, right: 0, bottom: 0, - width: '100%', height: map_height, - margin: 0 - }); + position_map_box(); if (typeof fixmystreet !== 'undefined') { fixmystreet.state_map = 'full'; } diff --git a/web/cobrands/fixmystreet/position_map.js b/web/cobrands/fixmystreet/position_map.js new file mode 100644 index 000000000..b2aaefe8c --- /dev/null +++ b/web/cobrands/fixmystreet/position_map.js @@ -0,0 +1,13 @@ +function position_map_box() { + var map_pos = 'fixed', map_height = '100%'; + if ($('html').hasClass('ie6')) { + map_pos = 'absolute'; + map_height = $(window).height(); + } + $('#map_box').prependTo('.wrapper').css({ + zIndex: 0, position: map_pos, + top: 0, left: 0, right: 0, bottom: 0, + width: '100%', height: map_height, + margin: 0 + }); +} |
