diff options
Diffstat (limited to 'web')
39 files changed, 347 insertions, 575 deletions
diff --git a/web/cobrands/angus/_colours.scss b/web/cobrands/angus/_colours.scss index fa4305715..564c78348 100644 --- a/web/cobrands/angus/_colours.scss +++ b/web/cobrands/angus/_colours.scss @@ -24,7 +24,7 @@ $nav_fg_hover: transparent; $col_big_numbers: $primary; -$col_click_map: $angus_green; +$col_click_map: $angus_blue; $col_click_map_dark: darken($col_click_map, 10%); $col_fixed_label: $angus_green; diff --git a/web/cobrands/angus/position_map.js b/web/cobrands/angus/position_map.js index 36f572f93..31ca1c09a 100644 --- a/web/cobrands/angus/position_map.js +++ b/web/cobrands/angus/position_map.js @@ -333,25 +333,4 @@ var add_streetlights = (function() { return add_streetlights; })(); -function position_map_box() { - var $html = $('html'); - if ($html.hasClass('ie6')) { - $('#map_box').prependTo('body').css({ - zIndex: 0, position: 'absolute', - top: 0, left: 0, right: 0, bottom: 0, - width: '100%', height: $(window).height(), - margin: 0 - }); - } else { - $('#map_box').prependTo('body').css({ - zIndex: 0, position: 'fixed', - top: 0, left: 0, right: 0, bottom: 0, - width: '100%', height: '100%', - margin: 0 - }); - } - add_streetlights(); -} - -function map_fix() {} -var slide_wards_down = 0; +$(add_streetlights); diff --git a/web/cobrands/arreglamibarrio/_colours.scss b/web/cobrands/arreglamibarrio/_colours.scss index cb7013db2..3b1a671e3 100644 --- a/web/cobrands/arreglamibarrio/_colours.scss +++ b/web/cobrands/arreglamibarrio/_colours.scss @@ -14,7 +14,6 @@ $nav_fg_hover: #444; // The "Click map" box on /around $col_click_map: #00BD08; -$col_click_map_dark: #4B8304; // The "fixed" message on a report page $col_fixed_label: #00BD08; diff --git a/web/cobrands/bromley/_colours.scss b/web/cobrands/bromley/_colours.scss index e4686b97c..c36182ff8 100644 --- a/web/cobrands/bromley/_colours.scss +++ b/web/cobrands/bromley/_colours.scss @@ -18,6 +18,5 @@ $nav_fg: #fff; $nav_fg_hover: #444; $col_click_map: $bromley_blue; -$col_click_map_dark: darken($bromley_blue, 10%); $col_fixed_label: $bromley_blue; $col_fixed_label_dark: darken($bromley_blue, 10%); diff --git a/web/cobrands/default/_colours.scss b/web/cobrands/default/_colours.scss index 5bd3d958f..72f9607cd 100644 --- a/web/cobrands/default/_colours.scss +++ b/web/cobrands/default/_colours.scss @@ -23,7 +23,6 @@ $nav_fg_hover: $primary; $col_big_numbers: #ccc; $col_click_map: $bluey; -$col_click_map_dark: darken($bluey, 10%); $col_fixed_label: #00BD08; $col_fixed_label_dark: #4B8304; diff --git a/web/cobrands/eastsussex/_colours.scss b/web/cobrands/eastsussex/_colours.scss index 0887ba82e..c24c6e688 100644 --- a/web/cobrands/eastsussex/_colours.scss +++ b/web/cobrands/eastsussex/_colours.scss @@ -5,7 +5,6 @@ $eastsussex_primary: #155F91; $primary: $eastsussex_primary; $col_click_map: $eastsussex_primary; -$col_click_map_dark: $eastsussex_primary; $col_fixed_label_dark: $eastsussex_primary; $col_fixed_label: $eastsussex_primary; diff --git a/web/cobrands/eastsussex/layout.scss b/web/cobrands/eastsussex/layout.scss index d90a617f1..6ac4bcbad 100644 --- a/web/cobrands/eastsussex/layout.scss +++ b/web/cobrands/eastsussex/layout.scss @@ -1,11 +1,12 @@ -@import "_colours";; +$mappage-header-height: 16em; + +@import "_colours"; @import "../sass/layout"; -/* from http://nicolasgallagher.com/micro-clearfix-hack/ */ +// from http://nicolasgallagher.com/micro-clearfix-hack/ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } -/* For IE 6/7 only */ .clearfix { *zoom: 1; } #front-main { @@ -13,6 +14,7 @@ margin-top: 0; padding: 0 } + #front-main-container { background-color: $eastsussex_primary; padding: 1em; @@ -71,44 +73,30 @@ body.mappage { display: none; } - #fms_pan_zoom { - top: 18em!important; - } - #mysociety { margin-top: 0; padding-top: 16em; padding-bottom: 0; width: auto; background: transparent; + float: none; } - .content { - div { - max-width: 27em; - } - - // required for non-js placement - #map_box { - left: 30em; - } - } - - #wrapper { display: block; width: auto; } - #report-a-problem-sidebar { - top: 1em; - } - - // Keep the headers fixed at the top on the map page #site-header { - position: fixed; + position: fixed; // Keep the headers fixed at the top on the map page width: 100%; z-index: 2; + background: #dae1e5; // the same colour that the .application-nav normally is + } + + .application-nav { + background: transparent; + padding: 0.2em 0 0 0; } } diff --git a/web/cobrands/eastsussex/position_map.js b/web/cobrands/eastsussex/position_map.js deleted file mode 100644 index 71794e8d6..000000000 --- a/web/cobrands/eastsussex/position_map.js +++ /dev/null @@ -1,21 +0,0 @@ -function position_map_box() { - var $html = $('html'); - if ($html.hasClass('ie6')) { - $('#map_box').prependTo('body').css({ - zIndex: 0, position: 'absolute', - top: 0, left: 0, right: 0, bottom: 0, - width: '100%', height: $(window).height(), - margin: 0 - }); - } else { - $('#map_box').prependTo('body').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/cobrands/fiksgatami/_colours.scss b/web/cobrands/fiksgatami/_colours.scss index 40ec78543..8899f4c97 100644 --- a/web/cobrands/fiksgatami/_colours.scss +++ b/web/cobrands/fiksgatami/_colours.scss @@ -18,7 +18,6 @@ $nav_fg: #fff; $nav_fg_hover: $primary; $col_click_map: $bg; -$col_click_map_dark: darken($bg, 10%); $col_fixed_label: #00BD08; $col_fixed_label_dark: #4B8304; diff --git a/web/cobrands/fixamingata/_colours.scss b/web/cobrands/fixamingata/_colours.scss index a35e3147f..8ebd0712f 100644 --- a/web/cobrands/fixamingata/_colours.scss +++ b/web/cobrands/fixamingata/_colours.scss @@ -14,6 +14,5 @@ $nav_fg: $primary_text; $nav_fg_hover: #444; $col_click_map: #00BD08; -$col_click_map_dark: #4B8304; $col_fixed_label: #00BD08; $col_fixed_label_dark: #4B8304; diff --git a/web/cobrands/fixmindelo/_colours.scss b/web/cobrands/fixmindelo/_colours.scss index ac39f72e3..e92843203 100644 --- a/web/cobrands/fixmindelo/_colours.scss +++ b/web/cobrands/fixmindelo/_colours.scss @@ -18,7 +18,6 @@ $nav_fg: #000; $nav_fg_hover: $primary; $col_click_map: $mindelo_green; -$col_click_map_dark: darken($mindelo_green, 10%); $col_fixed_label: #00BD08; $col_fixed_label_dark: #4B8304; diff --git a/web/cobrands/fixmystreet.com/_colours.scss b/web/cobrands/fixmystreet.com/_colours.scss index 17447c86e..908356d36 100644 --- a/web/cobrands/fixmystreet.com/_colours.scss +++ b/web/cobrands/fixmystreet.com/_colours.scss @@ -14,7 +14,6 @@ $nav_fg_hover: #444; // The "Click map" box on /around $col_click_map: #00BD08; -$col_click_map_dark: #4B8304; // The "fixed" message on a report page $col_fixed_label: #00BD08; diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js index f148f5ad7..dc9637d08 100644 --- a/web/cobrands/fixmystreet/fixmystreet.js +++ b/web/cobrands/fixmystreet/fixmystreet.js @@ -11,25 +11,6 @@ function isR2L() { } /* - * 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, force) { - var h1 = $(elem1).height(), - h2 = $(elem2).height(); - if (offset === undefined) { - offset = 0; - } - if (h1 > h2 || force) { - $(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>) @@ -56,20 +37,6 @@ function tabs(elem, indirect) { } } -/* Geographic function for faking map centre, as it appears to be offset from - where it actually is */ - -function fixmystreet_midpoint() { - var $content = $('.content'), mb = $('#map_box'); - r2l = isR2L(), - diff = r2l ? mb.width() : (mb.offset().left - $content.width()), - q = ($content.offset().left - diff) / 2; - if ((r2l && q > 0) || (!r2l && q < 0)) { - return 0; - } - return q; -} - $(function(){ var $html = $('html'); @@ -87,12 +54,7 @@ $(function(){ 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: '' - }); + $('#map_box').css({ height: '10em' }); if (typeof fixmystreet !== 'undefined') { fixmystreet.state_map = ''; // XXX } @@ -110,8 +72,6 @@ $(function(){ .addClass('mobile-map-banner') .appendTo('#map_box') .html('<a href="/">' + translation_strings.home + '</a> ' + translation_strings.place_pin_on_map); - } else { - $('#fms_pan_zoom').css({ top: '0.5em' }); } $('span.report-a-problem-btn').on('click.reportBtn', function(){ $('html, body').animate({scrollTop:0}, 500); @@ -121,7 +81,7 @@ $(function(){ } else { // Make map full screen on non-mobile sizes. $html.removeClass('mobile'); - position_map_box(); + $('#map_box').css({ height: '' }); if (typeof fixmystreet !== 'undefined') { fixmystreet.state_map = 'full'; } @@ -131,6 +91,12 @@ $(function(){ if (cobrand !== 'oxfordshire') { $('#site-header').show(); } + $('#map_box').prependTo('.content').css({ + position: '', + top: '', left: '', right: '', bottom: '', + height: '', + margin: '' + }); if (typeof variation !== 'undefined' && variation === 1) { banner_text = 'Click map to request a fix'; } @@ -139,7 +105,7 @@ $(function(){ .prependTo('#side') .html(banner_text); } - $('#fms_pan_zoom').css({ top: '4.75em' }); + $('#fms_pan_zoom').css({ top: '' }); $('span.report-a-problem-btn').css({ cursor:'' }).off('.reportBtn'); } last_type = type; @@ -148,11 +114,6 @@ $(function(){ /* * 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-fwd">' + translation_strings.how_to_send + '</a>').hide(); $('.rap-notes-trigger').click(function(e){ @@ -384,68 +345,74 @@ $(function(){ // 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); - } + + // The link/button that triggered the drawer + var $this = $(this); + + // A bunch of elements that will come in handy when opening/closing + // the drawer. Because $sw changes its position in the DOM, we capture + // all these elements just once, the first time .drawer() is called. + var $sidebar = $('#map_sidebar'); + var $sw = $this.parents('.shadow-wrap'); + var $swparent = $sw.parent(); + 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); + // Find the specified drawer, or create it if it doesn't exist + var $drawer = $('#' + id); + if ($drawer.length === 0) { + $drawer = $('<div id="' + id + '">'); + $drawer.appendTo($swparent); + } - // if ajax, load it with a spinner + if ( ! $this.data('setup') ) { + // Optionally fill $drawer with HTML from an AJAX data source if (ajax) { var href = $this.attr('href') + ';ajax=1'; var margin = isR2L() ? 'margin-left' : 'margin-right'; - $this.prepend(' <img class="spinner" src="/cobrands/fixmystreet/images/spinner-black-333.gif" style="' + margin + ':2em;">'); - innerDiv.load(href, function(){ - $('.spinner').remove(); - }); + var $ajax_result = $('<div>').appendTo($drawer); + $ajax_result.html('<p style="text-align:center">Loading</p>'); + $ajax_result.load(href); } - // Tall drawer - put after .content for scrolling to work okay. - // position over the top of the main .content in precisely the correct location + // Style up the $drawer + var drawer_top = $(window).height() - $sw.height(); var drawer_css = { - position: 'absolute', - zIndex: '1100', - marginTop: $('html.ie6, html.ie7').length ? '-3em' : 0, // IE6/7 otherwise include the 3em padding and stay too low - top: $(window).height() - $content.offset().top + position: 'fixed', + zIndex: 10, + top: drawer_top, + bottom: 0, + width: $sidebar.css('width'), + paddingLeft: $sidebar.css('padding-left'), + paddingRight: $sidebar.css('padding-right'), + overflow: 'auto', + background: '#fff' }; drawer_css[isR2L() ? 'right' : 'left'] = 0; - d.insertAfter($content).addClass('content').css(drawer_css) - .removeClass('hidden-js').find('h2').css({ marginTop: 0 }); + $drawer.css(drawer_css).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' }); - }); - }); + // Insert the .shadow-wrap controls into the top of the drawer. + $sw.addClass('static').prependTo($drawer); + + // Animate the drawer into place, enitrely covering the sidebar. + var sidebar_top_px = $sidebar.position().top; + $drawer.show().animate({ top: sidebar_top_px }, 1000); + }, 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'); + // Slide the drawer down, move the .shadow-wrap back to its + // original parent, and hide the drawer for potential re-use later. + var $drawer = $('#' + id); + var drawer_top = $(window).height() - $sw.height(); + + $drawer.animate({ top: drawer_top }, 1000, function(){ + $sw.removeClass('static').appendTo($swparent); + $drawer.hide(); }); - $content.show(); }); }; - if ($('html.mobile').length || slide_wards_down ) { + if ($('html.mobile').length) { $('#council_wards').hide().removeClass('hidden-js').find('h2').hide(); $('#key-tool-wards').click(function(e){ e.preventDefault(); @@ -537,23 +504,4 @@ $.fn.drawer = function(id, ajax) { }); } - /* - * 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('fullwidthpage'))){ - var offset = -15 * 16; - if (cobrand == 'oxfordshire') { - // Oxfordshire uses box-sizing:border-box and padding to work out height - offset = 0; - } - heightFix(window, '.content', offset, 1); - // in case we have a map that isn't full screen - map_fix(); - } - } - }); diff --git a/web/cobrands/fixmystreet/images/chevron-white-left.svg b/web/cobrands/fixmystreet/images/chevron-white-left.svg index 4dc587e79..544197dd2 100644 --- a/web/cobrands/fixmystreet/images/chevron-white-left.svg +++ b/web/cobrands/fixmystreet/images/chevron-white-left.svg @@ -1 +1 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="63" height="33"><path fill="#fff" d="M62 0H49L36 16l13 16h13L49 16"/></svg>
\ No newline at end of file +<svg xmlns="http://www.w3.org/2000/svg" width="43" height="33"><path fill="#fff" d="M42 0H29L16 16l13 16h13L29 16"/></svg>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/images/chevron-white-right.svg b/web/cobrands/fixmystreet/images/chevron-white-right.svg index 3aa713765..7a953bfbc 100644 --- a/web/cobrands/fixmystreet/images/chevron-white-right.svg +++ b/web/cobrands/fixmystreet/images/chevron-white-right.svg @@ -1 +1 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="63" height="33"><path fill="#fff" d="M0 0h13l13 16-13 16H0l13-16"/></svg>
\ No newline at end of file +<svg xmlns="http://www.w3.org/2000/svg" width="43" height="33"><path fill="#fff" d="M0 0h13l13 16-13 16H0l13-16"/></svg>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/position_map.js b/web/cobrands/fixmystreet/position_map.js deleted file mode 100644 index 71794e8d6..000000000 --- a/web/cobrands/fixmystreet/position_map.js +++ /dev/null @@ -1,21 +0,0 @@ -function position_map_box() { - var $html = $('html'); - if ($html.hasClass('ie6')) { - $('#map_box').prependTo('body').css({ - zIndex: 0, position: 'absolute', - top: 0, left: 0, right: 0, bottom: 0, - width: '100%', height: $(window).height(), - margin: 0 - }); - } else { - $('#map_box').prependTo('body').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/cobrands/greenwich/_colours.scss b/web/cobrands/greenwich/_colours.scss index 2f3aa913c..d2dc1c3ed 100644 --- a/web/cobrands/greenwich/_colours.scss +++ b/web/cobrands/greenwich/_colours.scss @@ -20,7 +20,6 @@ $nav_fg_hover: transparent; $col_big_numbers: $primary; $col_click_map: $greenwich_red; -$col_click_map_dark: darken($col_click_map, 10%); $col_fixed_label: #00BD08; $col_fixed_label_dark: #4B8304; diff --git a/web/cobrands/harrogate/_colours.scss b/web/cobrands/harrogate/_colours.scss index 11bf383f7..1c943ede3 100644 --- a/web/cobrands/harrogate/_colours.scss +++ b/web/cobrands/harrogate/_colours.scss @@ -8,7 +8,6 @@ $primary: $harrogate_primary; $primary_dark: darken($harrogate_primary, 20%); $col_click_map: $harrogate_primary; -$col_click_map_dark: $harrogate_primary; $col_fixed_label_dark: $harrogate_primary; $col_fixed_label: $harrogate_primary; diff --git a/web/cobrands/harrogate/layout.scss b/web/cobrands/harrogate/layout.scss index 417eff539..904a707b1 100644 --- a/web/cobrands/harrogate/layout.scss +++ b/web/cobrands/harrogate/layout.scss @@ -1,3 +1,6 @@ +// Super tall map page header to accommodate the big logo +$mappage-header-height: 10em; + @import "_colours"; @import "../sass/layout"; @@ -7,7 +10,7 @@ body.frontpage #site-logo, .ie6 body.frontpage #site-logo, - + body.twothirdswidthpage #site-logo, .ie6 body.twothirdswidthpage #site-logo { @@ -22,21 +25,11 @@ body.frontpage #site-header, .ie6 body.frontpage #site-header, - body.twothirdswidthpage #site-header, - .ie6 body.twothirdswidthpage #site-header, - - body.mappage #site-header, - .ie6 body.mappage #site-header, - body.mappage .nav-wrapper-2, - .ie6 body.mappage .nav-wrapper-2 + .ie6 body.twothirdswidthpage #site-header { height: 10em; } - - #fms_pan_zoom { - top: 10.75em!important; - } } @media only screen and (min-width: 48em) { diff --git a/web/cobrands/hart/_colours.scss b/web/cobrands/hart/_colours.scss index ce47a17c4..947b97625 100644 --- a/web/cobrands/hart/_colours.scss +++ b/web/cobrands/hart/_colours.scss @@ -4,7 +4,6 @@ $hart_primary: #7ECBA2; $primary: $hart_primary; $col_click_map: $hart_primary; -$col_click_map_dark: $hart_primary; $col_fixed_label_dark: $hart_primary; $col_fixed_label: $hart_primary; diff --git a/web/cobrands/hart/hart.scss b/web/cobrands/hart/hart.scss index 2f535e398..039567f32 100644 --- a/web/cobrands/hart/hart.scss +++ b/web/cobrands/hart/hart.scss @@ -20,23 +20,23 @@ input[type=text], input[type=password], input[type=email], input[type=file], -textarea, +textarea, select { background: #fff; border: 1px solid #768b9a; border-color: #768b9a #d1dee8 #d1dee8 #768b9a; color: #333; font-family: "Gill Sans MT", "Gill Sans", Arial, 'Helvetica Neue', Helvetica, sans-serif; padding: 8px; @include border-radius(0); } .green-btn, button.green-btn, input.green-btn { - background: #5b7189; - border: 1px solid #8e9eb0; - color: #fff; - font-family: 'Gill Sans MT', 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; - font-weight: normal; - margin: 0; min-height: 23px; + background: #5b7189; + border: 1px solid #8e9eb0; + color: #fff; + font-family: 'Gill Sans MT', 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; + font-weight: normal; + margin: 0; min-height: 23px; /* outline: 1px solid #405062; */ - padding: 4px 8px; - text-transform: uppercase; + padding: 4px 8px; + text-transform: uppercase; } -.green-btn:hover, button.green-btn:hover, input.green-btn:hover { - background: #5b7189; border: 1px solid #8e9eb0; +.green-btn:hover, button.green-btn:hover, input.green-btn:hover { + background: #5b7189; border: 1px solid #8e9eb0; } .form-txt-submit-box input[type=submit] { padding-top: 0; padding-bottom: 0; width: auto; @@ -46,11 +46,11 @@ select { background: #fff; border: 1px solid #768b9a; border-color: #768b9a #d1d h1, h2, h3, h4, h5, h6, legend { font-family: 'Gill Sans MT', 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; } body { color: #333; font-family: "Gill Sans MT", "Gill Sans", Arial, 'Helvetica Neue', Helvetica, sans-serif; line-height: 1.4; background-color: $base_bg;} -.nav-wrapper-2, +.nav-wrapper-2, body.mappage .nav-wrapper .nav-wrapper-2, body.frontpage .nav-wrapper-2 { border: 0; - border-top: solid 4px $hart_primary; /* otherwise overridden in base layout.scss + border-top: solid 4px $hart_primary; /* otherwise overridden in base layout.scss for some templates only */ min-height: auto; background-color: $hart_primary; @@ -61,6 +61,11 @@ body.frontpage .nav-wrapper-2 { } @media only screen and (min-width:48em) { + #map_box, + #map_sidebar { + top: 173px + 32px; + } + body.frontpage #site-header { height: 13em; @@ -69,6 +74,13 @@ body.frontpage .nav-wrapper-2 { } } + body.mappage { + .header-container, + .main-menu { + max-width: none; // containers are full width on map page + } + } + #skipped-map { clear: both; margin-top: 3em; /* required to push "Your Reports" visible on Safari/IE */ @@ -153,22 +165,16 @@ body.frontpage #site-logo, .sign-in a:hover, .sign-in a:active {text-decoration:underline;} .main-menu-wrapper { - /* z-index:2; */ background-color: #FFF; - width:100%; + width: 100%; + @media only screen and (min-width:48em) { position: absolute; - } -} - -@media only screen and (min-width:48em) { - body.mappage .main-menu-wrapper { - position: fixed + box-shadow: 0 0 20px rgba(0,0,0,0.2); // shadow to add contrast with map } } .main-menu { - li { font-family: 'Gill Sans MT', 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; margin: 0; @@ -194,8 +200,7 @@ body.frontpage #site-logo, } } @media only screen and (min-width:48em) { - margin-top: 173px; - height: 2em; + height: 32px; max-width: 60em; margin: 173px auto 0 auto; @@ -204,7 +209,7 @@ body.frontpage #site-logo, margin-left: 1em; text-align: center; - span { + span { display: inline; } @@ -256,10 +261,10 @@ body.frontpage .table-cell .content { height: auto; overflow: hidden; padding: 15px 15px 50px 15px; - color:#fff; + color:#fff; @media only screen and (min-width:48em) { - margin-left:-15px; + margin-left:-15px; padding: 35px 25px 40px 25px; } @@ -306,10 +311,10 @@ body.frontpage .table-cell .content { p { margin: 0; } - a:link, a:visited { - color: #fff; text-decoration: none; + a:link, a:visited { + color: #fff; text-decoration: none; } - a:hover, a:active { + a:hover, a:active { text-decoration: underline; } @@ -335,30 +340,30 @@ body.frontpage .table-cell .content { } .footer-nav, { - height:35px; + height:35px; margin-left: 0; margin-bottom: 0; @media only screen and (min-width:48em) { - float: right; + float: right; } - li { + li { list-style-type: none; - float: left; + float: left; width: 50%; margin-bottom: 0; a { display: block; - border-bottom:1px solid #797f7f; + border-bottom:1px solid #797f7f; padding: 10px 0; margin-left: 10px; margin-right: 10px; } @media only screen and (min-width:48em) { - border-right:1px solid #fff; + border-right:1px solid #fff; width: auto; a { border-bottom: none; @@ -366,8 +371,8 @@ body.frontpage .table-cell .content { margin-left: 0; margin-right: 0; } - &:last-child { - border: none; + &:last-child { + border: none; padding-right: 0; } } @@ -411,7 +416,7 @@ body.frontpage .table-cell .content { .main-menu ul { margin: 0; - padding-top: 8px; + line-height: 32px; } .main-menu li { @@ -423,9 +428,6 @@ body.frontpage .table-cell .content { padding-right: 0; } -.main-menu li.last a:hover, .main-menu li.last a:active { -} - //#search input { display: inline; margin: 0; @include border-radius(0em); } //#search input.button { font-weight: normal; text-transform: none; } // The footer breaks the map pages layout, easier to exclude it than @@ -433,6 +435,7 @@ body.frontpage .table-cell .content { body.mappage .hart-footer-wrapper { display: none; } + #hart-powered-by { float: left; width: 50%; @@ -454,10 +457,6 @@ body.mappage .hart-footer-wrapper { display: inline; } -#fms_pan_zoom { - top: 12em; -} - #hart_hants_note { background-color: lighten($hart_primary, 30%); padding: 0.5em; diff --git a/web/cobrands/hart/layout.scss b/web/cobrands/hart/layout.scss index 99f8bdfcf..d277ab76f 100644 --- a/web/cobrands/hart/layout.scss +++ b/web/cobrands/hart/layout.scss @@ -11,10 +11,7 @@ padding: 0em; position: relative; } - body.mappage .content { - margin-top: 14em; - } - + #front-main-container { background-color: $hart_primary; } @@ -28,7 +25,7 @@ } body.twothirdswidthpage .content { - width: 30em; + width: 30em; aside { left: 672px; width: 208px; diff --git a/web/cobrands/hart/position_map.js b/web/cobrands/hart/position_map.js deleted file mode 100644 index e5bc78c9a..000000000 --- a/web/cobrands/hart/position_map.js +++ /dev/null @@ -1,21 +0,0 @@ -function position_map_box() { - var $html = $('html'); - if ($html.hasClass('ie6')) { - $('#map_box').prependTo('body').css({ - zIndex: 0, position: 'absolute', - top: 250, left: 0, right: 0, bottom: 0, - width: '100%', height: $(window).height(), - margin: 0 - }); - } else { - $('#map_box').prependTo('body').css({ - zIndex: 0, position: 'fixed', - top: 250, left: 0, right: 0, bottom: 0, - width: '100%', height: '100%', - margin: 0 - }); - } -} - -function map_fix() {} -var slide_wards_down = 0; diff --git a/web/cobrands/oxfordshire/_colours.scss b/web/cobrands/oxfordshire/_colours.scss index ed494674a..a8a78dc6e 100644 --- a/web/cobrands/oxfordshire/_colours.scss +++ b/web/cobrands/oxfordshire/_colours.scss @@ -21,7 +21,6 @@ $nav_fg: #fff; $nav_fg_hover: #444; $col_click_map: $oxfordshire_lt_green; -$col_click_map_dark: $primary_text; $col_fixed_label: $oxfordshire_lt_green; $col_fixed_label_dark: mix(#000, $oxfordshire_lt_green, 50%); diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss index d6c009019..b6446e38c 100644 --- a/web/cobrands/oxfordshire/layout.scss +++ b/web/cobrands/oxfordshire/layout.scss @@ -1,3 +1,7 @@ +// We specify a 4em header height in pixels, to make +// the .menubar link padding calculations simpler. +$mappage-header-height: 64px; + @import "_colours"; @import "../sass/layout"; @import "../sass/report_list_pins"; @@ -71,10 +75,6 @@ body.twothirdswidthpage { .full-width { width: 464px; } .shadow-wrap { width: 464px; } -#map_box { - width: 956px; - height: 600px; -} .content { width: 432px; } body.fullwidthpage .content { width: auto; } @@ -94,8 +94,6 @@ body.twothirdswidthpage .content { } body.mappage { - $mappage-header-height: 60px; - #oxford-wrapper { width: auto; padding: 0; @@ -103,13 +101,13 @@ body.mappage { } #oxford-header { - position: fixed; + position: absolute; top: 0; left: 0; right: 0; - z-index: 2; // 1 more than `body.mappage .content` + z-index: 1; width: auto; - min-height: $mappage-header-height; + 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%; @@ -190,36 +188,27 @@ body.mappage { width: auto; } - .content { - padding: 1em; - padding-top: $mappage-header-height + 10px; - position: relative; - z-index: 1; - box-shadow: 0 0 5px rgba(0,0,0,0.3); + #map_sidebar { background-color: $oxfordshire_very_light_green; + } - // fixmystreet.js gives this element a min-height equal to the window height. - // Set border-box sizing, so that our padding doesn't get added onto height. - box-sizing: border-box; - - .extra-text { - padding: 1em; - margin: 0 -1em; - border-bottom: 1px solid $oxfordshire_mid_grey_green; + .extra-text { + padding: 1em; + margin: 0 -1em; + border-bottom: 1px solid $oxfordshire_mid_grey_green; - p:last-child { - margin-bottom: 0; - } + p:last-child { + margin-bottom: 0; } + } - .full-width { - width: auto; - margin: 0 -1em; - } + .full-width { + width: auto; + margin: 0 -1em; + } - input[type="file"] { - background-color: transparent; - } + input[type="file"] { + background-color: transparent; } // Space between green header and sidebar content @@ -306,8 +295,6 @@ h4.static-with-rule { } .shadow-wrap { - width: 432px; - ul#key-tools { -webkit-box-shadow: 0em 0px 1em 1em $oxfordshire_very_light_green; -moz-box-shadow: 0em 0px 1em 1em $oxfordshire_very_light_green; diff --git a/web/cobrands/oxfordshire/position_map.js b/web/cobrands/oxfordshire/position_map.js deleted file mode 100644 index bcd0e0c12..000000000 --- a/web/cobrands/oxfordshire/position_map.js +++ /dev/null @@ -1,22 +0,0 @@ -function position_map_box() { - var $html = $('html'); - if ($html.hasClass('ie6')) { - $('#map_box').prependTo('body').css({ - zIndex: 0, position: 'absolute', - top: 0, left: 0, right: 0, bottom: 0, - width: '100%', height: $(window).height(), - margin: 0 - }); - } else { - $('#map_box').prependTo('body').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/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index b8eafdbe4..dfe03ebf1 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -829,25 +829,13 @@ input.final-submit { .big-green-banner { position: relative; - top:-1.75em; + top: -1.75em; background: $col_click_map; color: #fff; - padding:1em; - text: { - transform:uppercase; - align:center; - } - font-size:0.875em; - &:before { - content: ""; - #{$left}: -0.5em; - top:0; - position: absolute; - width: 0; - height: 0; - border-#{$left}: 0.5em solid transparent; - border-bottom: 0.5em solid $col_click_map_dark; - } + padding: 1em; + text-transform: uppercase; + text-align: center; + font-size: 0.875em; } .banner { @@ -1061,17 +1049,27 @@ input.final-submit { } // map stuff -#map_box{ +#map_box { @extend .full-width; background: #333; height: 29em; margin-bottom: 1em; overflow: hidden; position: relative; + #map { width: 100%; height: 100%; - position: relative; + + // IE7 doesn't understand 100% height when the parent height is "auto", + // so we have to explicitly tell it to pin the element to the top and + // bottom of the parent. No need for an ie7-specific condition, because + // this makes no difference in other browsers. + // We keep the "height: 100%" in there to give IE7 context for the 100% + // height on #map's child, div.olMapViewport. + position: absolute; + top: 0; + bottom: 0; } } @@ -1085,7 +1083,7 @@ html.js #map .noscript { // OpenLayers fix for navigation being top right // Left and right so that zoom can be left, pan right. #fms_pan_zoom { - top: 0.5em; + top: 0.5em; // This will be overridden in JS if there's a full screen map with banner #{$left}: 0.5em; #{$right}: 0.5em; } diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss index cdb15e691..e0913b0ee 100644 --- a/web/cobrands/sass/_layout.scss +++ b/web/cobrands/sass/_layout.scss @@ -3,13 +3,15 @@ $image-sprite: '/cobrands/fixmystreet/images/sprite.png' !default; $layout_front_stats_color: $primary !default; +$mappage-header-height: 4em !default; .internal-link-fixed-header { display: block; - /* 5em is roughly the height of .nav-wrapper-2 (4em) plus the border-top on - .nav-wrapper-2 (4px), plus the padding-top on .item-list__item (0.5em). */ - padding-top: 5em; - margin-top: -5em; + /* Roughly the height of .nav-wrapper-2 (mappage-header-height) plus the + * border-top on .nav-wrapper-2 (4px), plus the padding-top on + * .item-list__item (0.5em). */ + padding-top: $mappage-header-height + 1em; + margin-top: -($mappage-header-height + 1em); } //hacks for desk/mob only stuff @@ -43,16 +45,6 @@ h1 { position: relative; } -//z-index stack order gets reset to 0 in ie6/7 if you position anything, -//so to fix things we give it a high value (don't ask me why) -//see: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/ -//this affects #site-logo -.ie6, .ie7 { - .container { - z-index:100; - } -} - .wrapper{ display: table; caption-side: top; @@ -106,27 +98,22 @@ h1 { .container { position: static;//reset position so the nav links become clickable } + + .ie6 &, + .ie7 & { + height: 3em; + // Without this, the #site-logo is unclickable. + // Something to do with broken z-index nesting in IE6-7. + z-index: 2; + } } + #site-logo { top: 0.9em; #{$left}: auto; position: absolute; z-index: 3; } -.ie6, .ie7 { - #site-header { - height:3em; - .container { - //ie broken z-index bug: the site-logo won't appear if we don't do this - //doesn't seem to render the nav link unclickable like in other browsers - position: relative; - } - } - #site-logo { - position: absolute; - top:-3.25em; - } -} #nav-link { #{$right}: auto; @@ -236,18 +223,42 @@ h1 { // map page - has fixed header and different styling body.mappage { + + .wrapper .table-cell, + .nav-wrapper { + // No need for the table-cell stuff now we're using absolute positioning + display: block; + } + .container { width: auto; + position: static; } .content { - float: $left; - padding: 1em 1em 10em; + width: auto; + padding: 0; margin: 0; } + #site-header { + // With the exception of the #site-logo child, the rest of + // #site-header gets entirely hidden behind .nav-wrapper-2 + position: absolute; + z-index: auto; + top: 0; + left: 0; + right: 0; + height: $mappage-header-height; + } + #site-logo { + position: absolute; #{$left}: 12px; + // Also inherits... + // `top: 0.9em` + // `z-index: 3` + // ...from the non-mappage version, above } #main-nav { @@ -255,6 +266,27 @@ body.mappage { margin-#{$right}: 1em; } + .nav-wrapper { + .nav-wrapper-2 { + position: absolute; + z-index: auto; + top: 0; + left: 0; + right: 0; + background: $map_nav_bg; + + // Watch out! If the nav links break onto two lines, the header will + // get taller, and overlap the top of #map_sidebar and #map_box. + // (But at least the nav links will be legible.) + min-height: $mappage-header-height; + + // Count the 4px border-top as part of the height (mappage-header-height) + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + } + .nav-menu--main a, .nav-menu--main span { padding: 1.4em 0.75em 1.35em; } @@ -264,17 +296,6 @@ body.mappage { margin: 0.9em 0.25em 0.85em; } - .nav-wrapper{ - .nav-wrapper-2{ - position: fixed; - background: $map_nav_bg; - } - } - - #site-logo{ - position: fixed; - } - #user-meta { max-width: none; p { @@ -348,6 +369,42 @@ body.mappage { } } +#map_box { + position: absolute; + z-index: auto; + top: $mappage-header-height; + bottom: 0; + #{$right}: 0; + #{$left}: 29em; // width of sidebar + width: auto; // stretch from right edge of sidebar to left edge of window + height: auto; // stretch from bottom of header to bottom of window + margin: 0; + + .with-notes & { + #{$left}: 44em; + } +} + +#map_sidebar { + position: absolute; + z-index: auto; + top: $mappage-header-height; + #{$left}: 0; + bottom: 0; + width: 27em; // width of sidebar, minus padding + padding: 1em 1em 3em 1em; // extra padding-bottom to clear the .shadow-wrap element + overflow: auto; // vertical scrollbar when list is taller than window + background-color: #fff; // since no longer in the flow inside .content + box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); + + .with-notes & { + width: 42em; + // TODO: Should have a bitmap image fallback for old browsers!! + background-image: -webkit-linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em); + background-image: linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em); + } +} + #skip-this-step { display: block; color: inherit; @@ -598,17 +655,6 @@ body.authpage { } } -// map box (fallback for non js really as most users -// will have fullscreen map) -#map_box{ - position: absolute; - height: 29em; - width: 29em; - #{$right}: 1em; - top: 3em; - z-index:1; -} - // Openlayers map controls (overrides) #fms_pan_zoom_panup, #fms_pan_zoom_pandown, @@ -765,13 +811,22 @@ body.authpage { &.static { padding: 0 0 1em; position: static; + width: auto; // avoid horizontal scrollbar as drawer opens (on devices with permanent scroll bars) } } + // The padding is for the fading out when it's fixed positioned, which it isn't in IE6. .ie6 .shadow-wrap { padding-top: 0; } +// Old versions of IE don't have box-sixing, so negative margins leave a 2em gap. +// We can set a fixed width instead, which might result in a horizontal scrollbar +// while the drawer is opening. Quel dommage. +.iel8 .shadow-wrap.static { + width: 29em; +} + // If JS is disabled, these are still CSS positioned, so don't want behind shining through. #report-share, #report-updates-data { background-color: #fff; @@ -781,24 +836,14 @@ body.authpage { margin-bottom: 0; } -// pokes over the RHS with a little triangle .big-green-banner { top: auto; - #{$right}: -1.25em; - margin-#{$left}: -2em; + margin: (-1em/1.375) (-1em/1.375) 0 (-1em/1.375); font-size: 1.375em; - padding: flip(1em 3em 1em 1em, 1em 1em 1em 3em); + padding: flip(1em 2em 1em 1em, 1em 1em 1em 2em); background: $col_click_map inline-image("../fixmystreet/images/chevron-white-#{$right}.svg") $right center no-repeat; - background-size: 27px+36px 33px; - &:before { - left: flip(auto, 0); - right: flip(0, auto); - top: -0.5em; - position: absolute; - border-top: 0.5em solid transparent; - border-#{$left}: 0.5em solid $col_click_map_dark; - border-bottom:none; - } + background-size: 43px 33px; + span { display: block; font-size: 80%; @@ -849,14 +894,6 @@ body.authpage { } } - -// for pulling elements fullwidth regardless -// of .contents' padding -.full-width{ - margin: flip(0 0 0em -1em, 0 -1em 0 0); - width: 29em; -} - /*FORMS*/ input[type=text], input[type=password], @@ -876,40 +913,32 @@ textarea.form-error { @include border-radius(0 0 0.25em 0.25em); } -#report-a-problem-sidebar { - position: absolute; - #{$left}: 29em; - width: 15em; - @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px); +// If the form is .with-notes, limit the width of the inputs +// to make space for the #report-a-problem-sidebar. +#side-form, #side { + .with-notes & { + width: 27em; + } } -// Report a problem sidebar notes +// Notes presented alongside the reporting form #report-a-problem-sidebar { - top:5em; - div { - padding:1em; - font-size:0.75em; - background:#eeeeee; - } - .sidebar-notes { - background:#333333; - color:#ffffff; + margin-bottom: 2em; + + // If the parent is .with-notes we know we have space to + // float the sidebar content to the side of the form. + .with-notes & { + float: #{$right}; + width: 13em; + margin-#{$right}: -15em; } -} -.ie6, .ie7 { - #report-a-problem-sidebar { - #{$left}: 28.5em; // 0.5em left margin gone on .content in IE6/7, so reduce this accordingly. - z-index: 1; + + div { + font-size: 0.75em; } -} -.no-js #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; + color: #666; } } @@ -1139,12 +1168,6 @@ body.frontpage { background-position: 50% 50%; } - //Map becomes percentage width - #map_box{ - #{$left}: 32em; - width:auto; - } - //Revert to mobile use of the .full-width class .full-width{ width: auto; diff --git a/web/cobrands/sass/_report_list_pins.scss b/web/cobrands/sass/_report_list_pins.scss index 143588b0e..2b77c4675 100644 --- a/web/cobrands/sass/_report_list_pins.scss +++ b/web/cobrands/sass/_report_list_pins.scss @@ -79,7 +79,7 @@ body.frontpage { .click-the-map { color: #000; - margin: -10px -1em 0; // overlap padding on parents + margin: -1em -1em 0; // overlap padding on parents padding: 18px; border-bottom: 1px solid #e5e5e5; // TODO This is not right-to-left enabled yet diff --git a/web/cobrands/stevenage/_colours.scss b/web/cobrands/stevenage/_colours.scss index 54eda1b2c..62514b8f3 100644 --- a/web/cobrands/stevenage/_colours.scss +++ b/web/cobrands/stevenage/_colours.scss @@ -14,6 +14,5 @@ $nav_fg: #fff; $nav_fg_hover: #444; $col_click_map: #00BD08; -$col_click_map_dark: #4B8304; $col_fixed_label: #00BD08; $col_fixed_label_dark: #4B8304; diff --git a/web/cobrands/stevenage/layout.scss b/web/cobrands/stevenage/layout.scss index 937485c69..19dc38470 100644 --- a/web/cobrands/stevenage/layout.scss +++ b/web/cobrands/stevenage/layout.scss @@ -96,14 +96,6 @@ body.twothirdswidthpage { } } -// 15591af7 - Stevenage Map page changes -#map_box { - top: 140px; -} -#fms_pan_zoom { - top: 190px !important; -} - // 2a23e09f - Moved menu on map page and reverted to full header. #report-a-problem-sidebar { top: 9em; @@ -183,7 +175,6 @@ body.mappage { position: absolute; top: 0; padding: 0; - height: 4em; background: #fff url("http://www.stevenage.gov.uk/Images/headerBG.jpg") repeat-x bottom left; } diff --git a/web/cobrands/trinidadtobago/_colours.scss b/web/cobrands/trinidadtobago/_colours.scss index f5d0e2b90..c96c6a7c3 100644 --- a/web/cobrands/trinidadtobago/_colours.scss +++ b/web/cobrands/trinidadtobago/_colours.scss @@ -17,7 +17,6 @@ $nav_fg: #000; $nav_fg_hover: $primary; $col_click_map: $trinidad_secondary; -$col_click_map_dark: darken($trinidad_secondary, 10%); $col_fixed_label: #00BD08; $col_fixed_label_dark: #4B8304; diff --git a/web/cobrands/warwickshire/_colours.scss b/web/cobrands/warwickshire/_colours.scss index 41ede9ea0..473d8cb03 100644 --- a/web/cobrands/warwickshire/_colours.scss +++ b/web/cobrands/warwickshire/_colours.scss @@ -14,7 +14,6 @@ $nav_fg: #000; $nav_fg_hover: $primary; $col_click_map: $green; -$col_click_map_dark: darken($green, 10%); $col_fixed_label: #00BD08; $col_fixed_label_dark: #4B8304; diff --git a/web/cobrands/warwickshire/layout.scss b/web/cobrands/warwickshire/layout.scss index e1d34cee6..1318e1a11 100644 --- a/web/cobrands/warwickshire/layout.scss +++ b/web/cobrands/warwickshire/layout.scss @@ -1,3 +1,5 @@ +$mappage-header-height: 41px + 100px + 37px; // .navbar-inverse + #top-header + #mega-menu-navbar + @import "_colours"; @import "../sass/layout"; @@ -22,10 +24,6 @@ body.frontpage { } } -#fms_pan_zoom { - top: 14em !important; -} - @media (max-width: 61em) and (min-width: 48em) { #site-header { height: auto; @@ -41,11 +39,17 @@ body.mappage { display: none; } - #wrapper { - padding: 0; - width: auto; - display: block; - position: relative; + .navbar-container { + width: auto !important; // 100% width for the FMS nav links container ONLY + } + + #site-header .navbar { + margin-top: 0; // remove space between FMS nav links and green header + } + + #mega-menu-navbar .navbar-inner { + border-width: 0 0 1px 0; + border-radius: 0; } } diff --git a/web/cobrands/warwickshire/position_map.js b/web/cobrands/warwickshire/position_map.js deleted file mode 100644 index 02ec71f2f..000000000 --- a/web/cobrands/warwickshire/position_map.js +++ /dev/null @@ -1,21 +0,0 @@ -function position_map_box() { - var $html = $('html'); - if ($html.hasClass('ie6')) { - $('#map_box').prependTo('body').css({ - zIndex: -1, position: 'absolute', - top: 0, left: 0, right: 0, bottom: 0, - width: '100%', height: $(window).height(), - margin: 0 - }); - } else { - $('#map_box').prependTo('body').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/cobrands/zurich/_colours.scss b/web/cobrands/zurich/_colours.scss index 8ae175583..d05be2102 100644 --- a/web/cobrands/zurich/_colours.scss +++ b/web/cobrands/zurich/_colours.scss @@ -15,9 +15,7 @@ $map_nav_bg: #fff; $nav_fg: $primary_text; $nav_fg_hover: $primary/1.1; - $col_click_map: $zurich_blue; -$col_click_map_dark: darken($zurich_blue, 20%); $col_fixed_label: #648721; $col_fixed_label_dark: #4B8304; diff --git a/web/cobrands/zurich/layout.scss b/web/cobrands/zurich/layout.scss index a23d8a9ae..e80cdb468 100644 --- a/web/cobrands/zurich/layout.scss +++ b/web/cobrands/zurich/layout.scss @@ -1,3 +1,6 @@ +// Zurich has a taller map page header than most cobrands. +$mappage-header-height: 7em; + @import "colours"; @import "../sass/layout"; @import "zurich"; @@ -24,8 +27,9 @@ body.mappage .content, body.frontpage .content { } } /* The header on a map page needs a shadow too */ -body.mappage .nav-wrapper-2 { +body.mappage .nav-wrapper .nav-wrapper-2 { @include box-shadow(0 0 6px 1px #000); + z-index: 2; // One more than #zurich-main-nav so it's on top } /* Except on admin pages where there's an admin nav directly underneath it */ body.mappage.admin .nav-wrapper-2 { @@ -90,7 +94,7 @@ body.mappage #site-logo-text { border-top: none; } .nav-wrapper-3 { - height: 99px; + height: 6em; // rough figure, enough to show the blue band, but less than .nav-wrapper-2 height padding-top: 18px; } } @@ -99,7 +103,6 @@ body.mappage { .nav-wrapper { .nav-wrapper-2 { border-top: none; - height: 117px; // 99px+18px for padding padding: 0 10px; box-sizing: border-box; } @@ -107,8 +110,6 @@ body.mappage { /* Ugh :( But first wrapper is the caption, second is the fixed (so first we can do padding on) so a third seems necessary for the background then. */ .nav-wrapper-3 { - height: 99px; - padding-top: 18px; background: #fff url(logo_portal.x.jpg) top left repeat-x; } .content { @@ -187,6 +188,19 @@ body.mappage { #zurich-footer { display: none; } + + #map_sidebar { + padding-top: 3em; // make space for the #zurich-main-nav + } + + #zurich-main-nav { + margin: 0; + position: absolute; + top: 7em; + left: 0; + width: 29em; // width of #map_sidebar (including padding) + z-index: 1; + } } body.twothirdswidthpage { @@ -224,7 +238,7 @@ body.twothirdswidthpage { } #fms_pan_zoom { - top: 9em !important; + top: 2em; } #fms_pan_zoom_zoomin { top: 0; diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js index e089a0bab..f5f5f2934 100644 --- a/web/js/map-OpenLayers.js +++ b/web/js/map-OpenLayers.js @@ -18,6 +18,7 @@ function fixmystreet_update_pin(lonlat) { } $('#side-form-error').html('<h1>' + translation_strings.reporting_a_problem + '</h1><p>' + data.error + '</p>').show(); $('#side-form').hide(); + $('body').removeClass('with-notes'); return; } $('#side-form, #site-logo').show(); @@ -72,9 +73,6 @@ function fixmystreet_zoomToBounds(bounds) { z = 13; } fixmystreet.map.setCenter(center, z); - if (fixmystreet.state_map && fixmystreet.state_map == 'full') { - fixmystreet.map.pan(-fixmystreet_midpoint(), -25, { animate: false }); - } } function fms_markers_list(pins, transform) { @@ -396,13 +394,10 @@ $(function(){ }, fixmystreet.map_options) ); - // Need to do this here, after the map is created - if ($('html').hasClass('mobile')) { - if (fixmystreet.page == 'around') { - $('#fms_pan_zoom').css({ top: '2.75em' }); - } - } else { - $('#fms_pan_zoom').css({ top: '4.75em' }); + // Need to do this here, after the map is created (might not have been when + // resize() called) + if ($('html').hasClass('mobile') && fixmystreet.page == 'around') { + $('#fms_pan_zoom').css({ top: '2.75em' }); } // Set it up our way @@ -440,10 +435,6 @@ $(function(){ fixmystreet.map.setCenter(centre, fixmystreet.zoom || 3); } - if (fixmystreet.state_map && fixmystreet.state_map == 'full') { - fixmystreet.map.pan(-fixmystreet_midpoint(), -25, { animate: false }); - } - if (document.getElementById('mapForm')) { var click = new OpenLayers.Control.Click(); fixmystreet.map.addControl(click); @@ -470,6 +461,8 @@ $(function(){ fixmystreet.drag.deactivate(); $('#side-form').hide(); $('#side').show(); + $('body').removeClass('with-notes'); + fixmystreet.map.updateSize(); // required after changing the size of the map element $('#sub_map_links').show(); //only on mobile $('#mob_sub_map_links').remove(); @@ -529,12 +522,8 @@ OpenLayers.Control.PanZoomFMS = OpenLayers.Class(OpenLayers.Control.PanZoom, { case "zoomin": case "zoomout": case "zoomworld": - var mid_point = 0; - if (fixmystreet.state_map && fixmystreet.state_map == 'full') { - mid_point = fixmystreet_midpoint(); - } var size = this.map.getSize(), - xy = { x: size.w / 2 + mid_point, y: size.h / 2 }; + xy = { x: size.w / 2, y: size.h / 2 }; switch (btn.action) { case "zoomin": this.map.zoomTo(this.map.getZoom() + 1, xy); @@ -576,14 +565,6 @@ OpenLayers.Control.PermalinkFMS = OpenLayers.Class(OpenLayers.Control.Permalink, } var center = this.map.getCenter(); - if ( center && fixmystreet.state_map && fixmystreet.state_map == 'full' ) { - // Translate the permalink co-ords so that 'centre' is accurate - var mid_point = fixmystreet_midpoint(); - var p = this.map.getViewPortPxFromLonLat(center); - p.x += mid_point; - p.y += 25; - center = this.map.getLonLatFromViewPortPx(p); - } var zoom = this.map.getZoom(); if ( alter_zoom ) { @@ -738,6 +719,12 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { return; } + // If there are notes to be displayed, add the .with-notes class + // to make the sidebar wider. + if ($('#report-a-problem-sidebar').length) { + $('body').addClass('with-notes'); + } + /* For some reason on IOS5 if you use the jQuery show method it * doesn't display the JS validation error messages unless you do this * or you cause a screen redraw by changing the phone orientation. @@ -746,11 +733,8 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { document.getElementById('side-form').style.display = 'block'; } $('#side').hide(); - if (typeof heightFix !== 'undefined') { - heightFix('#report-a-problem-sidebar', '.content', 26); - } - fixmystreet.map.updateSize(); // might have done, and otherwise Firefox gets confused. + fixmystreet.map.updateSize(); // required after changing the size of the map element fixmystreet.map.panDuration = 100; fixmystreet.map.panTo(lonlat); diff --git a/web/js/map-google.js b/web/js/map-google.js index 0e7cd824e..5009bebac 100644 --- a/web/js/map-google.js +++ b/web/js/map-google.js @@ -119,9 +119,6 @@ function fms_map_clicked(e) { } $('#side').hide(); - if (typeof heightFix !== 'undefined') { - heightFix('#report-a-problem-sidebar', '.content', 26); - } // If we clicked the map somewhere inconvenient // TODO @@ -190,13 +187,6 @@ function fms_map_initialize() { paddingDiv.index = 0; fixmystreet.map.controls[google.maps.ControlPosition.RIGHT_TOP].push(paddingDiv); - if (fixmystreet.state_map && fixmystreet.state_map == 'full') { - // TODO Work better with window resizing, this is pretty 'set up' only at present - var q = fixmystreet_midpoint(); - // Need to try and fake the 'centre' being 75% from the edge - fixmystreet.map.panBy(-q, -25); - } - if (document.getElementById('mapForm')) { var l = google.maps.event.addListener(fixmystreet.map, 'click', fms_map_clicked); } |
