diff options
Diffstat (limited to 'web')
23 files changed, 492 insertions, 31 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..3a2b4ab01 --- /dev/null +++ b/web/cobrands/barnet/barnet.scss @@ -0,0 +1,115 @@ +/* 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; +} + +#barnet-wrapper { + width: 100%; + display: table; + caption-side: bottom; +} + +#barnet-powered-by { + clear: both; +} + +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;} + #content.fullWidth {width: 900px;} +} + +/* IE6 ignore the second #foo.bar rule so we have to fudge it another way */ +.ie6 { + .mappage { + #content { + margin: 0 0 0 0px; + overflow: hidden; + float: left; + display: inline; + 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(img/bcArrow.gif) no-repeat right center; padding: 0 10px 0 0; font-weight: normal;} +#breadcrumb ul li span {font-weight: normal; color: #5c6267;} + +/* ############################################################## */ + +#column_nav {width: 214px; float: left; display: inline; padding: 0; margin: -35px 0 0 -910px; border-right: 3px solid #fff;} + +.ie6 #column_nav { + float: none; + position: absolute; + top: 85px; + margin: 0 0 0 0px; +} + +body.mappage #column_nav { display: none; } + +#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 h1#reports_heading span { 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);} +#bottomBar {background: url(img/barnet-footer-logo.gif) 771px 12px no-repeat #21aaaa; display: block; width: 100%; height: 56px; border-top: 6px solid #bddadc;} diff --git a/web/cobrands/barnet/base.scss b/web/cobrands/barnet/base.scss new file mode 100644 index 000000000..0447c6779 --- /dev/null +++ b/web/cobrands/barnet/base.scss @@ -0,0 +1,39 @@ +@import "../fixmystreet/_h5bp"; +@import "./_colours"; +@import "../fixmystreet/_mixins"; +@import "compass"; + +@import "../fixmystreet/_base"; + +#mast, +#breadcrumb, +#page-title, +#column_nav, +#footer, +#bottomBar +{ display: none } + +#site-header{ + @include background(none); + background-color: white; +} +#site-logo { + width: 235px; + background: url('/cobrands/barnet/img/barnet-logo.gif') -3px -3px no-repeat; +} +#nav-link { + right: 1em; + background: url('/cobrands/barnet/img/barnet-skipnav.png') no-repeat; +} + +#front-main #postcodeForm div input#submit, +.green-btn, +button.green-btn, +input.green-btn, +.red-btn, +button.red-btn, +input.red-btn{ + @include button-reset; + background: #5D6167; + color: white; +} diff --git a/web/cobrands/barnet/config.rb b/web/cobrands/barnet/config.rb new file mode 100644 index 000000000..cab97b18f --- /dev/null +++ b/web/cobrands/barnet/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "" +sass_dir = "" +images_dir = "" +javascripts_dir = "" + +# You can select your preferred output style here (can be overridden via the command line): +# output_style = :expanded or :nested or :compact or :compressed + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +# line_comments = false + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass + +line_comments = false # by Compass.app 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/barnet-skipnav.png b/web/cobrands/barnet/img/barnet-skipnav.png Binary files differnew file mode 100644 index 000000000..21efe0f67 --- /dev/null +++ b/web/cobrands/barnet/img/barnet-skipnav.png diff --git a/web/cobrands/barnet/img/bcArrow.gif b/web/cobrands/barnet/img/bcArrow.gif Binary files differnew file mode 100644 index 000000000..4e7c1848e --- /dev/null +++ b/web/cobrands/barnet/img/bcArrow.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/fms-logo.png b/web/cobrands/barnet/img/fms-logo.png Binary files differnew file mode 100644 index 000000000..23bea6b0f --- /dev/null +++ b/web/cobrands/barnet/img/fms-logo.png 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..97b27cfff --- /dev/null +++ b/web/cobrands/barnet/layout.scss @@ -0,0 +1,260 @@ +@import "_colours"; +@import "../fixmystreet/_layout"; + +#mast, +#breadcrumb, +#page-title, +#column_nav, +#footer, +#bottomBar { + display: block; +} + +// 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; + width: 678px; + // layout sets this because base has it slightly lighter + h2 { + color: $primary_text; + } + #front-main-container { + padding: 1em; + } +} + +#front_intro { + float: left; + margin-right: 3em; +} + +#front_recent { + margin-left: 3em; +} + +body.fullwidthpage { + .content { + width: 52em; + } +} +.ie6 { + body.fullwidthpage { + #front-main { + margin-top: -4em; + } + #front-howto, + #front-recently { + width: 26em; + } + .container { + padding: 0; + } + .content { + margin-left: 0px; + width: 55em; + } + div.img { + margin-top: -3.3em; + } + } +} + +body.twothirdswidthpage { + .content { + @include box-shadow(none); + width: 640px; + margin-top: 0; + .sticky-sidebar { + display: none; + aside { + top: 25em; + } + } + } +} + +.nav-wrapper { + display: none; +} + +.mappage { + #breadcrumb { + margin-left: 0px; + } +} + +.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; +} + +.shadow-wrap { + position: static; + padding-top: 0; + margin-bottom: 1em; + ul#key-tools { + border-top: none; + border-bottom: 1px solid $primary; + li { + a.chevron { + background-position: right -3230px; + } + a.feed { + background-position: right -3080px; + } + a.abuse { + background-position: right -2940px; + } + } + } + ul#key-tools.singleton { + li a { + padding-right: 4em; + } + } +} + +#content h1.big-green-banner { + font-size: 1.4em; + margin-left: -2em; + background: #e1e3e4 url(/cobrands/fixmystreet/images/sprite.png) right -2192px no-repeat +} + +body.frontpage { + #user-meta { + p { + top: 1em; + color: $primary_text; + a { + background: none; + } + } + } +} +#user-meta { + float: right; + p { + @include box-shadow(none); + color: $primary_text; + position: relative; + background: none; + a { + color: $primary_text; + background: none; + } + a:hover { + background: $primary; + } + } +} +.ie6 { + #user-meta { + float: none; + p { + position: absolute; + margin-top: 35px; + margin-right: 20px; + right: 0px; + left: auto; + } + + } + .mappage { + #user-meta { + p { + margin-right: -100px; + } + } + } +} + +/* barnet styles */ + +.clear { + clear: both; +} + +.container { + padding: 0 1em; +} + +#site-header, +#site-logo { + display: none !important; +} + + +#report-a-problem-sidebar { + left: 30em; + top: 4em; + width: 17em; + .sidebar-tips, + .sidebar-notes { + font-size: 0.9em; + } +} +.ie6 { + #report-a-problem-sidebar { + margin-top: -4em; + left: 30em; + .sidebar-notes { + padding-bottom: 0.5em; + } + p { + margin-bottom: 0.4em; + } + } +} + + +.general-sidebar-notes { + left: 25em; + width: 14em; + font-size: 1.2em; + p { + margin-bottom: 0 !important; + } +} + +#front-howto #front_stats div big, +ol.big-numbers > li::before { + color: #C0E8E8; +} + +.banner { + p { + top: -2em; + } + p#fixed { + padding-top: 4em; + background: #00BD08; + } +} + + +#map_box { + border: 1px solid black; +} diff --git a/web/cobrands/barnet/position_map.js b/web/cobrands/barnet/position_map.js new file mode 100644 index 000000000..e6d46288e --- /dev/null +++ b/web/cobrands/barnet/position_map.js @@ -0,0 +1,17 @@ +function position_map_box() { + var map_pos = 'absolute', map_height = $('.wrapper').height(); + $('#map_box').prependTo('.wrapper').css({ + zIndex: 0, position: map_pos, + top: 1, left: $('.wrapper').left, + right: 0, bottom: $('.wrapper').bottom + 1, + width: '898px', height: map_height, + margin: 0 + }); +} + +function map_fix() { + var height = $('.wrapper').height() - 3; + $('#map_box').height(height); +} + +var slide_wards_down = 1; diff --git a/web/cobrands/fixmystreet/_layout.scss b/web/cobrands/fixmystreet/_layout.scss index 3b65f941c..56b2f41d5 100644 --- a/web/cobrands/fixmystreet/_layout.scss +++ b/web/cobrands/fixmystreet/_layout.scss @@ -293,7 +293,6 @@ body.fullwidthpage { } // two thirds width page, also has option for a sidebar which can be sticky or not body.twothirdswidthpage { - @extend .fullwidthpage; .content { width:40em; position: relative; diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js index 09dbc46a7..4c795cd05 100644 --- a/web/cobrands/fixmystreet/fixmystreet.js +++ b/web/cobrands/fixmystreet/fixmystreet.js @@ -103,35 +103,7 @@ $(function(){ } else { // Make map full screen on non-mobile sizes. $html.removeClass('mobile'); - if (cobrand == 'bromley') { - var bromley_right; - if ($html.hasClass('ie6') || $html.hasClass('ie7')) { - bromley_right = '-480px'; - } else { - bromley_right = '0em'; - } - // Do the same as CSS (in case resized from mobile). - $('#map_box').prependTo('.content').css({ - zIndex: 1, position: 'absolute', - top: '1em', left: '', right: bromley_right, bottom: '', - width: '464px', height: '464px', - margin: 0 - }); - } else if ($html.hasClass('ie6')) { - $('#map_box').prependTo('.wrapper').css({ - zIndex: 0, position: 'absolute', - top: 0, left: 0, right: 0, bottom: 0, - width: '100%', height: $(window).height(), - margin: 0 - }); - } else { - $('#map_box').prependTo('.wrapper').css({ - zIndex: 0, position: 'fixed', - top: 0, left: 0, right: 0, bottom: 0, - width: '100%', height: '100%', - margin: 0 - }); - } + position_map_box(); if (typeof fixmystreet !== 'undefined') { if (cobrand == 'bromley') { //$('#bromley-footer').hide(); @@ -353,7 +325,7 @@ $.fn.drawer = function(id, ajax) { }); }; - if ($('html.mobile').length || cobrand == 'bromley') { + if ($('html.mobile').length || 'slide_wards_down' ) { $('#council_wards').hide().removeClass('hidden-js').find('h2').hide(); $('#key-tool-wards').click(function(e){ e.preventDefault(); @@ -454,6 +426,8 @@ $.fn.drawer = function(id, ajax) { offset = -110; } heightFix(window, '.content', offset); + // in case we have a map that isn't full screen + map_fix(); } } diff --git a/web/cobrands/fixmystreet/position_map.js b/web/cobrands/fixmystreet/position_map.js new file mode 100644 index 000000000..4a18d9f9a --- /dev/null +++ b/web/cobrands/fixmystreet/position_map.js @@ -0,0 +1,21 @@ +function position_map_box() { + var $html = $('html'); + if ($html.hasClass('ie6')) { + $('#map_box').prependTo('.wrapper').css({ + zIndex: 0, position: 'absolute', + top: 0, left: 0, right: 0, bottom: 0, + width: '100%', height: $(window).height(), + margin: 0 + }); + } else { + $('#map_box').prependTo('.wrapper').css({ + zIndex: 0, position: 'fixed', + top: 0, left: 0, right: 0, bottom: 0, + width: '100%', height: '100%', + margin: 0 + }); + } +} + +function map_fix() {} +var slide_wards_down = 0; diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js index 39e6275ff..d98994d84 100644 --- a/web/js/map-OpenLayers.js +++ b/web/js/map-OpenLayers.js @@ -499,6 +499,8 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { // e.xy is relative to top left of map, which might not be top left of page e.xy.x += bo.left; e.xy.y += bo.top; + + // 24 and 64 is the width and height of the marker pin if (e.xy.y <= o.top || (e.xy.x >= o.left && e.xy.x <= o.left + w + 24 && e.xy.y >= o.top && e.xy.y <= o.top + h + 64)) { // top of the page, pin hidden by header; // or underneath where the new sidebar will appear |
