diff options
-rw-r--r-- | templates/web/bromley/footer.html | 37 | ||||
-rw-r--r-- | templates/web/bromley/header.html | 42 | ||||
-rw-r--r-- | web/cobrands/bromley/bromley.scss | 45 | ||||
-rw-r--r-- | web/cobrands/bromley/fixmystreet.js | 593 | ||||
-rw-r--r-- | web/cobrands/bromley/layout.scss | 5 | ||||
-rw-r--r-- | web/cobrands/fixmystreet/_base.scss | 18 | ||||
-rw-r--r-- | web/cobrands/fixmystreet/_layout.scss | 3 |
7 files changed, 711 insertions, 32 deletions
diff --git a/templates/web/bromley/footer.html b/templates/web/bromley/footer.html index 9be0741bf..4959e15a4 100644 --- a/templates/web/bromley/footer.html +++ b/templates/web/bromley/footer.html @@ -1,22 +1,3 @@ - [% IF pagefooter %] - <footer role="content-info"> - <div class="tablewrapper bordered"> - <div id="footer-mobileapps"> - <h4>Mobile apps</h4> - - <ul> - <li><a class="m-app-iphone" href="http://itunes.apple.com/gb/app/fixmystreet/id297456545">iPhone</a></li> - <li><a class="m-app-droid" href="https://market.android.com/details?id=com.android.fixmystreet">Android</a></li> - <li><a class="m-app-nokia" href="http://store.ovi.com/content/107557">Nokia</a></li> - <li><a class="m-app-iphone-streetreport" href="http://itunes.apple.com/gb/app/streetreport/id371891859">iPhone Street Report</a></li> - </ul> - </div> - - <div id="footer-help"> - </div> - </div> - </footer> - [% END %] </div><!-- .content role=main --> </div><!-- .container --> </div><!-- .table-cell --> @@ -25,7 +6,7 @@ <div class="nav-wrapper-2"> <div id="main-nav" role="navigation"> <ul id="mysoc-menu"> - <li><a href="http://www.fixmystreet.com/">Powered by FixMyStreet</a></li> + <li><a href="http://www.fixmystreet.com/">Powered by <img src="https://github.com/mysociety/fixmystreet/raw/9a9889db881e24c17f51804ba56c11bd264bbf9c/web/cobrands/fixmystreet/fms-logo.png" style="height:20px; vertical-align: bottom"></a></li> </ul> <ul id="main-menu"> @@ -44,7 +25,21 @@ </div> </div> -<!-- [% INCLUDE 'debug_footer.html' %] --> </div> <!-- .wrapper --> + +<div id="bromley-footer"> + <p class="copy">© 2012 London Borough of Bromley</p> + + <a href="http://www.direct.gov.uk/"><img src="http://www.bromley.gov.uk/site/images/directgov.jpg" alt="Directgov website link - Public services all in one place" /></a> + + <ul class="footer-nav"> + <li><a href="#header">To the top</a></li> + <li><a href="http://www.bromley.gov.uk/terms">Disclaimer</a></li> + <li><a href="http://www.bromley.gov.uk/privacy" rel="nofollow">Privacy and cookies</a></li> + <li><a href="http://www.bromley.gov.uk/accesstoinfo">Access to information</a></li> + </ul> + +</div> + </body> </html> diff --git a/templates/web/bromley/header.html b/templates/web/bromley/header.html index f7beabd8c..f64997070 100644 --- a/templates/web/bromley/header.html +++ b/templates/web/bromley/header.html @@ -12,14 +12,15 @@ <meta name="mobileoptimized" content="0"> <link rel="stylesheet" href="[% version('/cobrands/bromley/base.css') %]"> - <!-- <link rel="stylesheet" href="[% version('/cobrands/fixmystreet/layout.css') %]" media="(min-width:48em)"> --> + <link rel="stylesheet" href="[% version('/cobrands/bromley/layout.css') %]" media="(min-width:48em)"> <link rel="stylesheet" href="[% version('/js/fancybox/jquery.fancybox-1.3.4.css') %]"> + <link rel="stylesheet" href="[% version('/cobrands/bromley/bromley.css') %]"> <!--[if (lt IE 9) & (!IEMobile)]> - <!-- <link rel="stylesheet" href="[% version('/cobrands/fixmystreet/layout.css') %]"> --> + <link rel="stylesheet" href="[% version('/cobrands/bromley/layout.css') %]"> <![endif]--> <script src="[% version('/js/modernizr.custom.76759.js') %]" charset="utf-8"></script> - [% INCLUDE 'common_header_tags.html', js_override = '/cobrands/fixmystreet/fixmystreet.js' %] + [% INCLUDE 'common_header_tags.html', js_override = '/cobrands/bromley/fixmystreet.js' %] <script src="[% version('/js/fancybox/jquery.fancybox-1.3.4.pack.js') %]" charset="utf-8"></script> [% IF c.req.uri.host == 'osm.fixmystreet.com' %] @@ -31,6 +32,41 @@ </head> <body class="[% bodyclass | html IF bodyclass %]"> +<div id="bromley-header"> + <ul class="header-nav"> + <li><a href="http://www.bromley.gov.uk/accessibility">Accessibility</a></li> + <li><a class="skiplink" href="http://www.bromley.gov.uk/a_to_z#content" rel="nofollow">Skip to content</a></li> + <li><a rel="nofollow" href="http://www.bromley.gov.uk/a_to_z?previewstyle=generic/print.css">Printer friendly</a></li> + <li><a href="http://www.bromley.gov.uk/accessibility/settings">Text size: AAA</a></li> + <li><div id="google_translate_element"></div></li> + </ul> + + <div class="logo"> + <a href="http://www.bromley.gov.uk"><img src="http://www.bromley.gov.uk/site/images/bromley-logo.jpg" alt="London Borough of Bromley logo" /></a> + </div> + + <div class="sign-in"> + <p> + You are not signed in. <a href="https://www.bromley.gov.uk/sign_in?referer=%2fa_to_z">Sign in</a> + or <a href="https://www.bromley.gov.uk/register">register</a>? + </p> + </div> + + <div class="main-menu"> + <ul> + <li class="home"><a href="http://www.bromley.gov.uk">Home</a></li> + <li><a href="http://www.bromley.gov.uk/a_to_z">A to Z</a></li> + <li><a href="http://www.bromley.gov.uk/site_map">Site map</a></li> + </ul> + <form action="http://www.bromley.gov.uk/site/scripts/google_results.aspx" method="get" id="search"> + <label for="SearchSite">Search by Keyword</label> + <input type="text" size="18" maxlength="40" class="field" name="q" id="SearchSite" value="Search by keyword" onclick="if (this.value == 'Search by keyword') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Search by keyword'; }" /> + <input value="Search" id="SearchSubmit" type="submit" class="button" /> + </form> + </div> + +</div> + <div class="wrapper"> <div class="table-cell"> <header id="site-header" role="banner"> diff --git a/web/cobrands/bromley/bromley.scss b/web/cobrands/bromley/bromley.scss new file mode 100644 index 000000000..6e56bb482 --- /dev/null +++ b/web/cobrands/bromley/bromley.scss @@ -0,0 +1,45 @@ +h1, h2, h3, h4, h5, h6, legend { font-family: 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; } +body { color: #333; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; line-height: 1.4; } + +#header { padding: 0 18px 0 25px; } + +.header-nav {float:right; background:url('http://www.bromley.gov.uk/site/styles/css_img/header-nav.gif') no-repeat; overflow:hidden; width:651px; height:34px; line-height:34px; padding:0 20px;} +.header-nav li {float:left; width:130px; text-align:center; background:url('http://www.bromley.gov.uk/site/styles/css_img/header-nav-divider.gif') top right no-repeat;} +.header-nav li:last-child {background:none;} +.header-nav a:link, .header-nav a:visited {color:#fff; text-decoration:none;} +.header-nav a:hover, .header-nav a:active {text-decoration:underline;} + +/* -------- For Google translate select box only */ +.header-nav div#google_translate_element .goog-te-gadget { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; } +.header-nav div#google_translate_element .goog-te-gadget .goog-te-combo { margin:5px 0 0 5px; padding:0 0 0 2px; background: #9b9b9b; color: #fff; border: 1px solid #606060; font-size: 12px; width: 138px;} +.header-nav div#google_translate_element .goog-te-gadget .goog-te-combo option { background:#fff; color: #666; padding: 1px 0; margin: 0; } +/* --- */ + +.logo {padding:10px 0;} + +.sign-in {float:right; margin-top:-87px; width: 650px; text-align: right;} +.sign-in a:link, .sign-in a:visited {color:#333; font-weight:bold; text-decoration:none;} +.sign-in a:hover, .sign-in a:active {text-decoration:underline;} + +.main-menu {background:url('http://www.bromley.gov.uk/site/styles/css_img/main-menu.gif') no-repeat; width:689px; height:45px; margin-top:-60px; float:right; clear:right;} +.main-menu li {float:left; width:126px; padding-right:2px; text-align:center; font:150%/45px 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif;} +.main-menu li a:link, .main-menu li a:visited {color:#fff; display:block; text-decoration:none;} +.main-menu li a:hover, .main-menu li a:active {background:url('http://www.bromley.gov.uk/site/styles/css_img/main-menu-hover.gif') repeat-x;} +.main-menu li.home a:hover, .main-menu li.home a:active {background:url('http://www.bromley.gov.uk/site/styles/css_img/main-menu-hover-home.gif') repeat-x;} + +#search { float: right; padding: 10px 17px; width: 270px; } +#search label {display:none;} +#search input { background: #ececec; border: 1px solid #768b9a; border-color: #768b9a #d1dee8 #d1dee8 #768b9a; line-height: 9px; padding: 6px 5px 4px; width: 184px; } +#search input.button { background: #fff; border: 1px solid #8596a8; color: #333; font-family: 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; font-size:133%; height: 27px; line-height: 27px; padding: 0; vertical-align: top; width: 70px; } + +/* ############################################################## */ +#bromley-footer { background: #666 url('http://www.bromley.gov.uk/site/styles/css_img/footer.gif') top center no-repeat; clear: both; padding:30px 15px 50px; margin-left:-15px; color:#fff; font-size:92%;} +#bromley-footer a:link, +#bromley-footer a:visited { color: #fff; text-decoration: none; } +#bromley-footer a:hover, +#bromley-footer a:active { text-decoration: underline;} +#bromley-footer img { float: right; margin-top: -18px; } +#bromley-footer .footer-nav { float: right; height:35px; margin-top: -15px; } +#bromley-footer .footer-nav li { border-right:1px solid #fff; float: left; line-height: 1; padding: 0 20px; } +#bromley-footer .footer-nav li:last-child { border: none; } + diff --git a/web/cobrands/bromley/fixmystreet.js b/web/cobrands/bromley/fixmystreet.js new file mode 100644 index 000000000..b87ad3b81 --- /dev/null +++ b/web/cobrands/bromley/fixmystreet.js @@ -0,0 +1,593 @@ +/* + * fixmystreet.js + * FixMyStreet JavaScript + */ + +function form_category_onchange() { + var cat = $('#form_category'); + var args = { + category: cat.val() + }; + + if ( typeof fixmystreet !== 'undefined' ) { + args.latitude = fixmystreet.latitude; + args.longitude = fixmystreet.longitude; + } else { + args.latitude = $('input[name="latitude"]').val(); + args.longitude = $('input[name="longitude"]').val(); + } + + $.getJSON('/report/new/category_extras', args, function(data) { + if ( data.category_extra ) { + if ( $('#category_meta').size() ) { + $('#category_meta').html( data.category_extra); + } else { + $('#form_category_row').after( data.category_extra ); + } + } else { + $('#category_meta').empty(); + } + }); +} + +/* + * general height fixing function + * + * elem1: element to check against + * elem2: target element + * offset: this will be added (if present) to the final value, useful for height errors + */ +function heightFix(elem1, elem2, offset){ + var h1 = $(elem1).height(), + h2 = $(elem2).height(); + if(offset === undefined){ + offset = 0; + } + if(h1 > h2){ + $(elem2).css({'min-height':h1+offset}); + } +} + + +/* + * very simple tab function + * + * elem: trigger element, must have an href attribute (so probably needs to be an <a>) + */ +function tabs(elem, indirect) { + var href = elem.attr('href'); + //stupid IE sometimes adds the full uri into the href attr, so trim + var start = href.indexOf('#'), + target = href.slice(start, href.length); + + if (indirect) { + elem = $(target + '_tab'); + } + + if(!$(target).hasClass('open')) + { + //toggle class on nav + $('.tab-nav .active').removeClass('active'); + elem.addClass('active'); + + //hide / show the right tab + $('.tab.open').hide().removeClass('open'); + $(target).show().addClass('open'); + } +} + + +$(function(){ + var $html = $('html'); + + $html.removeClass('no-js').addClass('js'); + + + // Preload the new report pin + document.createElement('img').src = '/i/pin-green.png'; + + var last_type; + $(window).resize(function(){ + var type = $('#site-header').css('borderTopWidth'); + if (type == '4px') { type = 'mobile'; } + else if (type == '0px') { type = 'desktop'; } + else { return; } + if (last_type == type) { return; } + if (type == 'mobile') { + $html.addClass('mobile'); + $('#map_box').prependTo('.content').css({ + zIndex: '', position: '', + top: '', left: '', right: '', bottom: '', + width: '', height: '10em', + margin: '' + }); + if (typeof fixmystreet !== 'undefined') { + fixmystreet.state_map = ''; // XXX + } + if (typeof fixmystreet !== 'undefined' && fixmystreet.page == 'around') { + // Immediately go full screen map if on around page + $('#site-header').hide(); + $('#map_box').prependTo('.wrapper').css({ + position: 'absolute', + top: 0, left: 0, right: 0, bottom: 0, + height: 'auto', + margin: 0 + }); + $('#fms_pan_zoom').css({ top: '2.75em !important' }); + $('.big-green-banner') + .addClass('mobile-map-banner') + .appendTo('#map_box') + .text('Place pin on map') + .prepend('<a href="/">home</a>'); + } + $('span.report-a-problem-btn').on('click.reportBtn', function(){ + $('html, body').animate({scrollTop:0}, 500); + }).css({ cursor:'pointer' }).on('hover.reportBtn', function(){ + $(this).toggleClass('hover'); + }); + } 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 + //}); + //if (typeof fixmystreet !== 'undefined') { + // fixmystreet.state_map = 'full'; + //} + //if (typeof fixmystreet !== 'undefined' && fixmystreet.page == 'around') { + // // Remove full-screen-ness + // $('#site-header').show(); + // $('#fms_pan_zoom').css({ top: '4.75em !important' }); + // $('.big-green-banner') + // .removeClass('mobile-map-banner') + // .prependTo('#side') + // .text('Click map to report a problem'); + //} + //$('span.report-a-problem-btn').css({ cursor:'' }).off('.reportBtn'); + } + last_type = type; + }); + + //add mobile class if small screen + $(window).resize(); + + $('#pc').focus(); + + $('input[type=submit]').removeAttr('disabled'); + /* + $('#mapForm').submit(function() { + if (this.submit_problem) { + $('input[type=submit]', this).prop("disabled", true); + } + return true; + }); + */ + + if (!$('#been_fixed_no').prop('checked') && !$('#been_fixed_unknown').prop('checked')) { + $('#another_qn').hide(); + } + $('#been_fixed_no').click(function() { + $('#another_qn').show('fast'); + }); + $('#been_fixed_unknown').click(function() { + $('#another_qn').show('fast'); + }); + $('#been_fixed_yes').click(function() { + $('#another_qn').hide('fast'); + }); + + // FIXME - needs to use translated string + jQuery.validator.addMethod('validCategory', function(value, element) { + return this.optional(element) || value != '-- Pick a category --'; }, validation_strings.category ); + + jQuery.validator.addMethod('validName', function(value, element) { + var validNamePat = /\ba\s*n+on+((y|o)mo?u?s)?(ly)?\b/i; + return this.optional(element) || value.length > 5 && value.match( /\S/ ) && !value.match( validNamePat ); }, validation_strings.category ); + + var form_submitted = 0; + var submitted = false; + + $("form.validate").validate({ + rules: { + title: { required: true }, + detail: { required: true }, + email: { required: true }, + update: { required: true }, + rznvy: { required: true } + }, + messages: validation_strings, + onkeyup: false, + onfocusout: false, + errorElement: 'div', + errorClass: 'form-error', + // we do this to stop things jumping around on blur + success: function (err) { if ( form_submitted ) { err.addClass('label-valid').removeClass('label-valid-hidden').html( ' ' ); } else { err.addClass('label-valid-hidden'); } }, + errorPlacement: function( error, element ) { + element.before( error ); + }, + submitHandler: function(form) { + if (form.submit_problem) { + $('input[type=submit]', form).prop("disabled", true); + } + + form.submit(); + }, + // make sure we can see the error message when we focus on invalid elements + showErrors: function( errorMap, errorList ) { + if ( submitted && errorList.length ) { + $(window).scrollTop( $(errorList[0].element).offset().top - 120 ); + } + this.defaultShowErrors(); + submitted = false; + }, + invalidHandler: function(form, validator) { submitted = true; } + }); + + $('input[type=submit]').click( function(e) { form_submitted = 1; } ); + + /* set correct required status depending on what we submit + * NB: need to add things to form_category as the JS updating + * of this we do after a map click removes them */ + $('#submit_sign_in').click( function(e) { + $('#form_category').addClass('required validCategory').removeClass('valid'); + $('#form_name').removeClass(); + } ); + + $('#submit_register').click( function(e) { + $('#form_category').addClass('required validCategory').removeClass('valid'); + $('#form_name').addClass('required validName'); + } ); + + $('#problem_submit > input[type="submit"]').click( function(e) { + $('#form_category').addClass('required validCategory').removeClass('valid'); + $('#form_name').addClass('required validName'); + } ); + + $('#update_post').click( function(e) { + $('#form_name').addClass('required').removeClass('valid'); + } ); + + $('#form_category').change( form_category_onchange ); + + // Geolocation + if (geo_position_js.init()) { + $('#postcodeForm').after('<a href="#" id="geolocate_link">… or locate me automatically</a>'); + $('#geolocate_link').click(function(e) { + e.preventDefault(); + // Spinny thing! + if($('.mobile').length){ + $(this).append(' <img src="/cobrands/fixmystreet/images/spinner-black.gif" alt="" align="bottom">'); + }else{ + $(this).append(' <img src="/cobrands/fixmystreet/images/spinner-yellow.gif" alt="" align="bottom">'); + } + geo_position_js.getCurrentPosition(function(pos) { + $('img', this).remove(); + var latitude = pos.coords.latitude; + var longitude = pos.coords.longitude; + location.href = '/around?latitude=' + latitude + ';longitude=' + longitude; + }, function(err) { + $('img', this).remove(); + if (err.code == 1) { // User said no + } else if (err.code == 2) { // No position + $(this).html("Could not look up location"); + } else if (err.code == 3) { // Too long + $('this').html("No result returned"); + } else { // Unknown + $('this').html("Unknown error"); + } + }, { + enableHighAccuracy: true, + timeout: 10000 + }); + }); + } + + /* + * Report a problem page + */ + //desktop + if ($('#report-a-problem-sidebar').is(':visible')) { + heightFix('#report-a-problem-sidebar', '.content', 26); + } + + //show/hide notes on mobile + $('.mobile #report-a-problem-sidebar').after('<a href="#" class="rap-notes-trigger button-right">How to send successful reports</a>').hide(); + $('.rap-notes-trigger').click(function(e){ + e.preventDefault(); + //check if we've already moved the notes + if($('.rap-notes').length > 0){ + //if we have, show and hide .content + $('.content').hide(); + $('.rap-notes').show(); + }else{ + //if not, move them and show, hiding .content + $('.content').after('<div class="content rap-notes"></div>').hide(); + $('#report-a-problem-sidebar').appendTo('.rap-notes').show().after('<a href="#" class="rap-notes-close button-left">Back</a>'); + } + $('html, body').scrollTop($('#report-a-problem-sidebar').offset().top); + location.hash = 'rap-notes'; + }); + $('.mobile').on('click', '.rap-notes-close', function(e){ + e.preventDefault(); + //hide notes, show .content + $('.content').show(); + $('.rap-notes').hide(); + $('html, body').scrollTop($('#mob_ok').offset().top); + location.hash = 'report'; + }); + + //move 'skip this step' link on mobile + $('.mobile #skip-this-step').hide(); + $('.mobile #skip-this-step a').addClass('chevron').wrap('<li>').appendTo('#key-tools'); + + /* + * Tabs + */ + //make initial tab active + $('.tab-nav a').first().addClass('active'); + $('.tab').first().addClass('open'); + + //hide other tabs + $('.tab').not('.open').hide(); + + //set up click event + $(".tab-nav").on('click', 'a', function(e){ + e.preventDefault(); + tabs($(this)); + }); + $('.tab_link').click(function(e) { + e.preventDefault(); + tabs($(this), 1); + }); + + /* + * Skip to nav on mobile + */ + $('.mobile').on('click', '#nav-link', function(e){ + e.preventDefault(); + var offset = $('#main-nav').offset().top; + $('html, body').animate({scrollTop:offset}, 1000); + }); + + + /* + * Show stuff on input focus + */ + $('.form-focus-hidden').hide(); + $('.form-focus-trigger').on('focus', function(){ + $('.form-focus-hidden').fadeIn(500); + }); + + /* + * Show on click - pretty generic + */ + $('.hideshow-trigger').on('click', function(e){ + e.preventDefault(); + var href = $(this).attr('href'), + //stupid IE sometimes adds the full uri into the href attr, so trim + start = href.indexOf('#'), + target = href.slice(start, href.length); + + $(target).removeClass('hidden-js'); + + $(this).hide(); + }); + + /* + * nicetable - on mobile shift 'name' col to be a row + */ + $('.mobile .nicetable th.title').remove(); + $('.mobile .nicetable td.title').each(function(i){ + $(this).attr('colspan', 5).insertBefore($(this).parent('tr')).wrap('<tr class="heading" />'); + }); + // $('.mobile .nicetable tr.heading > td.title').css({'min-width':'300px'}); + // $('.mobile .nicetable tr > td.data').css({'max-width':'12%'}); + + /* + * Map controls prettiness + */ + //add links container (if its not there) + if($('#sub_map_links').length === 0){ + $('<p id="sub_map_links" />').insertAfter($('#map')); + } + +// A sliding drawer from the bottom of the page, small version +// that doesn't change the main content at all. +$.fn.small_drawer = function(id) { + this.toggle(function(){ + var $this = $(this), d = $('#' + id); + if (!$this.addClass('hover').data('setup')) { + d.hide().removeClass('hidden-js').css({ + padding: '1em', + background: '#fff' + }); + $this.data('setup', true); + } + d.slideDown(); + }, function(e){ + var $this = $(this), d = $('#' + id); + $this.removeClass('hover'); + d.slideUp(); + }); +}; + +// A sliding drawer from the bottom of the page, large version +$.fn.drawer = function(id, ajax) { + // IE7 positions the fixed tool bar 1em to the left unless it comes after + // the full-width section, ho-hum. Move it to where it would be after an + // open/close anyway + if ($('html.ie7').length) { + var $sw = $('.shadow-wrap'), $content = $('.content[role="main"]'); + $sw.appendTo($content); + } + this.toggle(function(){ + var $this = $(this), d = $('#' + id), $content = $('.content[role="main"]'); + if (!$this.addClass('hover').data('setup')) { + // make a drawer div with an innerDiv + if (!d.length) { + d = $('<div id="' + id + '">'); + } + var innerDiv = $('<div>'); + d.wrapInner(innerDiv); + + // if ajax, load it with a spinner + if (ajax) { + var href = $this.attr('href') + ';ajax=1'; + $this.prepend(' <img class="spinner" src="/cobrands/fixmystreet/images/spinner-black-333.gif" style="margin-right:2em;">'); + innerDiv.load(href, function(){ + $('.spinner').remove(); + }); + } + + // Tall drawer - put after .content for scrolling to work okay. + // position over the top of the main .content in precisely the right location + d.insertAfter($content).addClass('content').css({ + position: 'absolute', + zIndex: '1100', + marginTop: $('html.ie6, html.ie7').length ? '-3em' : 0, // IE6/7 otherwise include the 3em padding and stay too low + left: 0, + top: $(window).height() - $content.offset().top + }).removeClass('hidden-js').find('h2').css({ marginTop: 0 }); + $this.data('setup', true); + } + + //do the animation + $('.shadow-wrap').prependTo(d).addClass('static'); + d.show().animate({top:'3em'}, 1000, function(){ + $content.fadeOut(function() { + d.css({ position: 'relative' }); + }); + }); + }, function(e){ + var $this = $(this), d = $('#' + id), $sw = $('.shadow-wrap'), + $content = $('.content[role="main"]'), + tot_height = $(window).height() - d.offset().top; + $this.removeClass('hover'); + d.css({ position: 'absolute' }).animate({ top: tot_height }, 1000, function(){ + d.hide(); + $sw.appendTo($content).removeClass('static'); + }); + $content.show(); + }); +}; + + if ($('html.mobile').length) { + $('#council_wards').hide().removeClass('hidden-js').find('h2').hide(); + $('#key-tool-wards').click(function(e){ + e.preventDefault(); + $('#council_wards').slideToggle('800', function(){ + $('#key-tool-wards').toggleClass('active'); + }); + }); + } else { + $('#key-tool-wards').drawer('council_wards', false); + $('#key-tool-around-updates').drawer('updates_ajax', true); + } + $('#key-tool-report-updates').small_drawer('report-updates-data'); + + // Go directly to RSS feed if RSS button clicked on alert page + // (due to not wanting around form to submit, though good thing anyway) + $('.container').on('click', '#alert_rss_button', function(e){ + e.preventDefault(); + var feed = $('input[name=feed][type=radio]:checked').nextAll('a').attr('href'); + window.location.href = feed; + }); + $('.container').on('click', '#alert_email_button', function(e){ + e.preventDefault(); + var form = $('<form/>').attr({ method:'post', action:"/alert/subscribe" }); + $('#alerts input[type=text], #alerts input[type=hidden], #alerts input[type=radio]:checked').each(function() { + var $v = $(this); + $('<input/>').attr({ name:$v.attr('name'), value:$v.val(), type:'hidden' }).appendTo(form); + }); + form.submit(); + }); + + //add permalink on desktop, force hide on mobile + $('#sub_map_links').append('<a href="#" id="map_permalink">Permalink</a>'); + if($('.mobile').length){ + $('#map_permalink').hide(); + $('#key-tools a.feed').appendTo('#sub_map_links'); + $('#key-tools li:empty').remove(); + $('#report-updates-data').insertAfter($('#map_box')); + } + //add open/close toggle button on desk + $('#sub_map_links').prepend('<span id="map_links_toggle"> </span>'); + + //set up map_links_toggle click event + $('#map_links_toggle').on('click', function(){ + var maplinks_width = $('#sub_map_links').width(); + + if($(this).hasClass('closed')){ + $(this).removeClass('closed'); + $('#sub_map_links').animate({'right':'0'}, 1200); + }else{ + $(this).addClass('closed'); + $('#sub_map_links').animate({'right':-maplinks_width}, 1200); + } + }); + + + /* + * Add close buttons for .promo's + */ + if($('.promo').length){ + $('.promo').append('<a href="#" class="close-promo">x</a>'); + } + //only close its own parent + $('.promo').on('click', '.close-promo', function(e){ + e.preventDefault(); + $(this).parent('.promo').animate({ + 'height':0, + 'margin-bottom':0, + 'padding-top':0, + 'padding-bottom':0 + },{ + duration:500, + queue:false + }).fadeOut(500); + }); + + + + /* + * Fancybox fullscreen images + */ + $('a[rel=fancy]').fancybox({ + 'overlayColor': '#000000' + }); + + /* + * heightfix the desktop .content div + * + * this must be kept near the end so that the + * rendered height is used after any page manipulation (such as tabs) + */ + if (!$('html.mobile').length) { + if (!($('body').hasClass('frontpage'))){ + heightFix(window, '.content', -176); + } + } + +}); + +/* +XXX Disabled because jerky on Android and makes map URL bar height too small on iPhone. +// Hide URL bar +$(window).load(function(){ + window.setTimeout(function(){ + var s = window.pageYOffset || document.compatMode === "CSS1Compat" && document.documentElement.scrollTop || document.body.scrollTop || 0; + if (s < 20 && !location.hash) { + window.scrollTo(0, 1); + } + }, 0); +}); +*/ + diff --git a/web/cobrands/bromley/layout.scss b/web/cobrands/bromley/layout.scss index 3dc34c6c7..278e80176 100644 --- a/web/cobrands/bromley/layout.scss +++ b/web/cobrands/bromley/layout.scss @@ -7,5 +7,10 @@ body { #front-main { background: $primary; + + // layout sets this because base has it slightly lighter + h2 { + color: $primary_text; + } } diff --git a/web/cobrands/fixmystreet/_base.scss b/web/cobrands/fixmystreet/_base.scss index 4202564f7..b3d00cd48 100644 --- a/web/cobrands/fixmystreet/_base.scss +++ b/web/cobrands/fixmystreet/_base.scss @@ -447,7 +447,8 @@ p.label-valid { &#mysoc-menu{ li { a { - background:$primary; + color: $primary_text; + background: $primary; &#mysoc-logo { background-image:url('/cobrands/fixmystreet/images/sprite.png'); background-repeat:no-repeat; @@ -472,7 +473,8 @@ p.label-valid { #user-meta { p { position: relative; - background:$primary; + color: $primary_text; + background: $primary; padding:1em 6em 1em 1em; a { position: absolute; @@ -893,7 +895,7 @@ a:hover.button-left { width:20px; height:20px; opacity: 0.5; - background:#fff url(images/sprite.png) -16px -1098px no-repeat; + background:#fff url(/cobrands/fixmystreet/images/sprite.png) -16px -1098px no-repeat; //hide text - http://nicolasgallagher.com/another-css-image-replacement-technique/ font: 0/0 a; color: transparent; @@ -1273,7 +1275,8 @@ table.nicetable { .promo { @extend .full-width; - background:$primary; + color: $primary_text; + background: $primary; padding:1em; margin-bottom:1em; overflow:hidden; @@ -1286,10 +1289,10 @@ table.nicetable { width:16px; height:16px; text-indent:-999999px; - background:url(images/sprite.png) -341px -263px no-repeat; + background:url(/cobrands/fixmystreet/images/sprite.png) -341px -263px no-repeat; @include border-radius(4px); &:hover { - background:#222 url(images/sprite.png) -341px -223px no-repeat; + background:#222 url(/cobrands/fixmystreet/images/sprite.png) -341px -223px no-repeat; } } } @@ -1320,7 +1323,8 @@ table.nicetable { } a { @include inline-block; - background:$primary; + color: $primary_text; + background: $primary; padding-left:0.5em; padding-right:0.5em; color:#1a1a1a; diff --git a/web/cobrands/fixmystreet/_layout.scss b/web/cobrands/fixmystreet/_layout.scss index 534b285b1..8a284656c 100644 --- a/web/cobrands/fixmystreet/_layout.scss +++ b/web/cobrands/fixmystreet/_layout.scss @@ -147,7 +147,8 @@ h1 { @include background(linear-gradient(#000, #444 10%, #444 95%, #111)); } a.report-a-problem-btn { - background:$primary; + color: $primary_text; + background: $primary; padding:0.25em; margin:0.5em; color:#333; |