diff options
| author | Matthew Somerville <matthew-github@dracos.co.uk> | 2016-06-03 21:45:48 +0100 |
|---|---|---|
| committer | Matthew Somerville <matthew-github@dracos.co.uk> | 2016-06-03 21:45:48 +0100 |
| commit | a18ac5c65d3ee4fa6220417ab1644bdba938a19d (patch) | |
| tree | 0cfebe31168ccf2b6bcbe03f5aabf8d86d7cdceb /web | |
| parent | 35e58052f4f1250a3c1bb40d126e36fcc735d209 (diff) | |
| parent | 90d6c6ed2ce1f4535377b14ce6e93e3849a2f1a7 (diff) | |
Merge branch '1350-stop-map-hiding-behind-header'
Diffstat (limited to 'web')
49 files changed, 470 insertions, 986 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/base.scss b/web/cobrands/angus/base.scss index 98b25f59e..50f207058 100644 --- a/web/cobrands/angus/base.scss +++ b/web/cobrands/angus/base.scss @@ -25,7 +25,7 @@ body.frontpage #site-logo, } } -.item-list--reports__item, #user-meta p, #front-main #postcodeForm { +.item-list--reports__item, #front-main #postcodeForm { // background-color: $greenwich_light_grey; } diff --git a/web/cobrands/angus/layout.scss b/web/cobrands/angus/layout.scss index cb358679d..35d629400 100644 --- a/web/cobrands/angus/layout.scss +++ b/web/cobrands/angus/layout.scss @@ -165,17 +165,6 @@ body.frontpage { background-color: $base_bg; } } - #user-meta p { - right: -119px; - top: -93px; - margin: 0; - padding: 0; - color: $base_bg; - - a { - position: static; - } - } } body.twothirdswidthpage .content .sticky-sidebar { @@ -283,11 +272,11 @@ footer p.social a:active,footer p.social a:focus,footer p.social a:hover .container { display: block; font-size: 0.9em; - padding: 1em 20px .75em 20px; + padding: 1em 0 0.75em 0; ul { margin: 0; - padding: 0; + padding: 0 20px; list-style: none; li { @@ -378,16 +367,6 @@ body.mappage { } } - #user-meta { - p { - color: $primary_text; - } - - & ~ .container .content { - padding-top: 3.5em; // make room for user menu! - } - } - #category_meta h4 { display: none; } @@ -399,12 +378,6 @@ body.mappage { } } -#user-meta p { - top: 6em; - left: -6em; - color: $angus_light_grey; -} - .angus_footer { border-top: solid 8px $angus_grey; background: $angus_dark_grey; @@ -418,7 +391,6 @@ body.mappage { .tablewrapper, .tablewrapper.bordered { border-top: none; - width: 100%; color: white; padding-bottom: 1em; 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/bromley/layout.scss b/web/cobrands/bromley/layout.scss index ed3ba193f..27bd45889 100644 --- a/web/cobrands/bromley/layout.scss +++ b/web/cobrands/bromley/layout.scss @@ -64,32 +64,6 @@ body.alertindex form.full-width { margin-left: 0; } -// Override the little banner you get when you're logged in on the map page -// because FMS makes it a different colour and moves it over to the left. -body.mappage #user-meta p { - background-color: $bromley_blue; - border-bottom: 1px solid #444; -} - -// And also override the banner on other pages so that it lines up properly -#user-meta, body.mappage #user-meta { - max-width: 1200px; -} -#user-meta p, -body.frontpage #user-meta p { - top: 0; - right: auto; - background-color: $bromley_blue; - color: #fff; - box-shadow: none; -} - -// Because we've moved the user-meta, we also have to move the #front-main div -// down a bit so that it shows the #user-meta -#front-main { - margin-top:3em -} - // The page h1 needs to be white on desktop, because it's in a blue box h1.main { color: #fff; 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/base.scss b/web/cobrands/eastsussex/base.scss index d2489f1b0..30f3ba934 100644 --- a/web/cobrands/eastsussex/base.scss +++ b/web/cobrands/eastsussex/base.scss @@ -93,11 +93,6 @@ h1.main { } } -#report-a-problem-sidebar .sidebar-notes a { - color: #fff; - text-decoration: underline; -} - .big-green-banner { text-transform: none; z-index: 5000; diff --git a/web/cobrands/eastsussex/layout.scss b/web/cobrands/eastsussex/layout.scss index 20be807a6..f8836bd1f 100644 --- a/web/cobrands/eastsussex/layout.scss +++ b/web/cobrands/eastsussex/layout.scss @@ -1,4 +1,6 @@ -@import "_colours";; +$mappage-header-height: 16em; + +@import "_colours"; @import "../sass/layout"; #front-main { @@ -6,6 +8,7 @@ margin-top: 0; padding: 0 } + #front-main-container { background-color: $eastsussex_primary; padding: 1em; @@ -64,48 +67,34 @@ 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; } } -.general-notes, #report-a-problem-sidebar p, #report-a-problem-sidebar .sidebar-notes .plain-list li { +.general-notes { font-size: 13px; line-height: 14px; } @@ -220,9 +209,7 @@ body.twothirdswidthpage .content aside { } } -@media only screen and (min-width: 48em) { - footer { - display: block; - } +footer { + display: block; } 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.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss index 99b801ed4..848490e7a 100644 --- a/web/cobrands/fixmystreet.com/layout.scss +++ b/web/cobrands/fixmystreet.com/layout.scss @@ -195,10 +195,6 @@ body.twothirdswidthpage { .container { .content { footer { - max-width: 48em; - @media only screen and (min-width: 61em) { - max-width: 60em; - } .tablewrapper { border: 0px; } diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js index 5935d2bae..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,24 +37,6 @@ function tabs(elem, indirect) { } } -/* Geographic functions for faking map centre, as it appears to be offset from - where it actually is */ - -function midpoint_box_excluding_column(col_offset, col_width, box_offset, box_width) { - var r2l = isR2L(), - diff = r2l ? box_width : (box_offset.left - col_width), - q = (col_offset.left - diff) / 2; - if ((r2l && q > 0) || (!r2l && q < 0)) { - return 0; - } - return q; -} - -function fixmystreet_midpoint() { - var $content = $('.content'), mb = $('#map_box'); - return midpoint_box_excluding_column($content.offset(), $content.width(), mb.offset(), mb.width()); -} - $(function(){ var $html = $('html'); @@ -91,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 } @@ -114,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); @@ -125,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'; } @@ -135,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'; } @@ -143,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; @@ -152,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){ @@ -388,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(); @@ -541,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/greenwich/base.scss b/web/cobrands/greenwich/base.scss index dc85f5600..517b16471 100644 --- a/web/cobrands/greenwich/base.scss +++ b/web/cobrands/greenwich/base.scss @@ -28,7 +28,7 @@ body.frontpage #site-logo, background-size: cover; } -.item-list--reports__item, #user-meta p, #front-main #postcodeForm { +.item-list--reports__item, #front-main #postcodeForm { background-color: $greenwich_light_grey; } diff --git a/web/cobrands/greenwich/layout.scss b/web/cobrands/greenwich/layout.scss index a60313de3..ad31941f6 100644 --- a/web/cobrands/greenwich/layout.scss +++ b/web/cobrands/greenwich/layout.scss @@ -61,10 +61,6 @@ body.frontpage #site-header, #site-header { } body.frontpage { - #user-meta p { - top: -9em; - } - .item-list--reports__item { border-left: solid 4px $primary; } @@ -76,11 +72,6 @@ body.frontpage { } } -body.twothirdswidthpage #user-meta p { - padding-bottom: 0; - z-index: 2; -} - .nav-wrapper .nav-wrapper-2 { border-top: none; } 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..287fd85f4 100644 --- a/web/cobrands/harrogate/layout.scss +++ b/web/cobrands/harrogate/layout.scss @@ -1,55 +1,36 @@ +// Super tall map page header to accommodate the big logo +$mappage-header-height: 10em; + @import "_colours"; @import "../sass/layout"; -@media only screen and (min-width: 48em) { - #site-logo, - .ie6 #site-logo, - - body.frontpage #site-logo, - .ie6 body.frontpage #site-logo, - - body.twothirdswidthpage #site-logo, - .ie6 body.twothirdswidthpage #site-logo - { - position: relative; - top: 1.2em; - margin: 0; - padding: 0; - background: url("/cobrands/harrogate/HBCLogo.png") 0 0 no-repeat; - width: 227px; - height: 122px; - } - - 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 - { - height: 10em; - } - - #fms_pan_zoom { - top: 10.75em!important; - } +#site-logo, +.ie6 #site-logo, +body.frontpage #site-logo +{ + position: relative; + top: 1.2em; + margin: 0; + padding: 0; + background: url("/cobrands/harrogate/HBCLogo.png") 0 0 no-repeat; + width: 227px; + height: 122px; +} + +#site-header, +body.frontpage #site-header, +.ie6 body.frontpage #site-header, +.ie7 body.frontpage #site-header, +.nav-wrapper-2 +{ + height: 10em; } -@media only screen and (min-width: 48em) { - body.twothirdswidthpage .container .content footer .tablewrapper a:link, - body.twothirdswidthpage .container .content footer .tablewrapper a:visited, - body.fullwidthpage .container .content footer .tablewrapper a:link, - body.fullwidthpage .container .content footer .tablewrapper a:visited { - color: white; - } - - body.mappage #user-meta+.container .content { - padding-top: 1.5em; - } +body.twothirdswidthpage .container .content footer .tablewrapper a:link, +body.twothirdswidthpage .container .content footer .tablewrapper a:visited, +body.fullwidthpage .container .content footer .tablewrapper a:link, +body.fullwidthpage .container .content footer .tablewrapper a:visited { + color: white; } #main-nav { @@ -69,10 +50,8 @@ body.twothirdswidthpage .container .content { padding-right: 0; } -@media only screen and (min-width: 48em) { - body.fullwidthpage .container .content { - margin-top: 3em; // push far enough for the sign-out link to also be visible - } +body.fullwidthpage .container .content { + margin-top: 3em; // push far enough for the sign-out link to also be visible } body.twothirdswidthpage .content aside { @@ -130,18 +109,6 @@ body.mappage .nav-wrapper .nav-wrapper-2 { } -body.frontpage #user-meta p { - top: -2.4em; -} - -body.mappage #user-meta { - top: 2em; - p { - background: $primary; - border-color: $primary_dark; - } -} - body.mappage .content { margin-top: 4em; } 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 ac833934d..95607242c 100644 --- a/web/cobrands/hart/hart.scss +++ b/web/cobrands/hart/hart.scss @@ -12,23 +12,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; @@ -38,11 +38,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; @@ -53,6 +53,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; @@ -61,6 +66,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 */ @@ -145,22 +157,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; @@ -186,8 +192,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; @@ -196,7 +201,7 @@ body.frontpage #site-logo, margin-left: 1em; text-align: center; - span { + span { display: inline; } @@ -248,10 +253,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; } @@ -298,10 +303,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; } @@ -327,30 +332,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; @@ -358,8 +363,8 @@ body.frontpage .table-cell .content { margin-left: 0; margin-right: 0; } - &:last-child { - border: none; + &:last-child { + border: none; padding-right: 0; } } @@ -403,7 +408,7 @@ body.frontpage .table-cell .content { .main-menu ul { margin: 0; - padding-top: 8px; + line-height: 32px; } .main-menu li { @@ -415,9 +420,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 @@ -425,6 +427,7 @@ body.frontpage .table-cell .content { body.mappage .hart-footer-wrapper { display: none; } + #hart-powered-by { float: left; width: 50%; @@ -446,10 +449,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..f17614cc1 100644 --- a/web/cobrands/hart/layout.scss +++ b/web/cobrands/hart/layout.scss @@ -1,44 +1,20 @@ @import "_colours"; @import "../sass/layout"; -@media only screen and (min-width: 48em) { - .content { - margin-top: 8em; - } - .header-container { - max-width: 60em; - margin: 0 auto; - padding: 0em; - position: relative; - } - body.mappage .content { - margin-top: 14em; - } - - #front-main-container { - background-color: $hart_primary; - } - .hart-footer-wrapper { - display: block; - } +.content { + margin-top: 8em; } -#report-a-problem-sidebar { - top: 14em; +#front-main-container { + background-color: $hart_primary; } body.twothirdswidthpage .content { - width: 30em; aside { - left: 672px; - width: 208px; - padding: 16px; @include box-shadow(none); } .sticky-sidebar { - left: 672px; aside { - position: fixed; top: 14em; } } 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/_oxon.scss b/web/cobrands/oxfordshire/_oxon.scss index 46de1f22b..20a38ac7f 100644 --- a/web/cobrands/oxfordshire/_oxon.scss +++ b/web/cobrands/oxfordshire/_oxon.scss @@ -64,16 +64,6 @@ body { margin: 0px 5px 0px 5px } } - .oxford-user { - float: right; - p { - padding: 0.25em; - margin: 0.5em 0; - a { - margin: 0 0.5em; - } - } - } } #oxford-main-menu { diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss index 0bd37b95f..62b2598e8 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"; @@ -24,8 +28,7 @@ body, body a { } // Currently hide the nav-wrapper, because it's in going into Oxfordshire's own nav -// likewise with user-meta -.nav-wrapper, #user-meta { +.nav-wrapper { display: none; } @@ -71,10 +74,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 +93,6 @@ body.twothirdswidthpage .content { } body.mappage { - $mappage-header-height: 60px; - #oxford-wrapper { width: auto; padding: 0; @@ -103,13 +100,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%; @@ -160,25 +157,6 @@ body.mappage { } } } - - .oxford-user { - display: block; - font-size: 13px; - margin: 0; - color: mix(#ddd, #069b01, 80%); - - p { - margin: 0; - padding-top: ($mappage-header-height - 20px) / 2; - padding-bottom: ($mappage-header-height - 20px) / 2; - line-height: 20px; - } - - a { - padding: 0 10px; - text-decoration: none; - } - } } .wrapper .table-cell { @@ -190,36 +168,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 +275,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 2c8c90c6f..15abd823f 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -554,27 +554,6 @@ body.mappage .wrapper { position: static; } -// this is the user's logged in details or the login link etc -#user-meta { - p { - position: relative; - color: $primary_text; - background: $primary; - padding: flip(1em 6em 1em 1em, 1em 1em 1em 6em); - a { - position: absolute; - #{$right}: 1em; - @include inline-block; - text-transform:uppercase; - font-size:0.75em; - background:#333; - padding:0.25em 0.75em; - color:#fff; - @include border-radius(0.25em); - } - } -} - // #key-tools is the list that's pulled out an stick to the bottom of the page of desktop, below is mostly just aesthetic .shadow-wrap { @@ -829,25 +808,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 +1028,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,9 +1062,9 @@ 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; - #{$left}: 0.5em !important; - #{$right}: 0.5em !important; + top: 0.5em; // This will be overridden in JS if there's a full screen map with banner + #{$left}: 0.5em; + #{$right}: 0.5em; } // The left and right of the above causes the navigation to move off-screen left in IE6. .ie6 #fms_pan_zoom { @@ -1101,55 +1078,55 @@ html.js #map .noscript { #fms_pan_zoom_panright, #fms_pan_zoom_zoomin, #fms_pan_zoom_zoomout { - width:36px !important; - height:36px !important; + width: 36px; + height: 36px; text-indent: flip(-999999px, 999999px); // text-align from OL style makes this necessary - background:url($image-sprite) no-repeat; + background: url($image-sprite) no-repeat; filter: none !important; // Override OpenLayers PNG handling of the navigation } #fms_pan_zoom_zoomworld { - display:none !important; - visibility:none !important; + display: none !important; + visibility: none !important; } #fms_pan_zoom_panup { - background-position:-42px -222px; - #{$right}: 30px !important; - #{$left}: auto !important; - top:0 !important; + background-position: -42px -222px; + #{$right}: 30px; + #{$left}: auto; + top: 0; } #fms_pan_zoom_pandown { - background-position:-42px -282px; - #{$right}: 30px !important; - #{$left}: auto !important; - top:72px !important; + background-position: -42px -282px; + #{$right}: 30px; + #{$left}: auto; + top: 72px; } #fms_pan_zoom_panleft { - background-position:-12px -252px; - width:48px !important; - #{$right}: flip(48px, 0) !important; - #{$left}: auto !important; - top:36px !important; + background-position: -12px -252px; + width: 48px; + #{$right}: flip(48px, 0); + #{$left}: auto; + top: 36px; } #fms_pan_zoom_panright { - background-position:-60px -252px; - width:48px !important; - #{$right}: flip(0, 48px) !important; - #{$left}: auto !important; - top:36px !important; + background-position: -60px -252px; + width: 48px; + #{$right}: flip(0, 48px); + #{$left}: auto; + top: 36px; } #fms_pan_zoom_zoomin { - background-position:-152px -223px; - height:44px !important; - #{$left}: 0 !important; - top:0 !important; + background-position: -152px -223px; + height: 44px; + #{$left}: 0; + top: 0; } #fms_pan_zoom_zoomout { - background-position:-152px -259px; - height:44px !important; - #{$left}: 0 !important; - top:44px !important; + background-position: -152px -259px; + height: 44px; + #{$left}: 0; + top: 44px; } //hide pins, show old reports etc @@ -1819,6 +1796,13 @@ table.nicetable { } } +.my-account-buttons a { + display: inline-block; + background: #f6f6f6; + padding: 0.5em 1em; + border-radius: 0.2em; +} + @media screen { .print-only { diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss index 02dab82d8..99e6d7761 100644 --- a/web/cobrands/sass/_layout.scss +++ b/web/cobrands/sass/_layout.scss @@ -2,13 +2,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 @@ -42,16 +44,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; @@ -105,27 +97,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; @@ -235,18 +222,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 { @@ -254,50 +265,34 @@ body.mappage { margin-#{$right}: 1em; } - .nav-menu--main a, .nav-menu--main span { - padding: 1.4em 0.75em 1.35em; - } + .nav-wrapper { + .nav-wrapper-2 { + position: absolute; + z-index: auto; + top: 0; + left: 0; + right: 0; + background: $map_nav_bg; - .nav-menu--main a.report-a-problem-btn { - padding: 0.5em; - margin: 0.9em 0.25em 0.85em; - } + // 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; - .nav-wrapper{ - .nav-wrapper-2{ - position: fixed; - background: $map_nav_bg; + // 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; } } - #site-logo{ - position: fixed; + .nav-menu--main a, .nav-menu--main span { + padding: 1.4em 0.75em 1.35em; } - #user-meta { - max-width: none; - p { - display: block; - height: auto; - width: 22.2em; // 27em (.content width) - 2em (.content padding) - 6em - 0.8em - padding: flip(0.5em 6em 0.5em 0.8em, 0.5em 0.8em 0.5em 6em); - top: 0; - #{$left}: 0; - z-index: 1; - box-shadow: none; - background: #FCEA9A; - border-bottom: 1px solid #ffd000; - - a { - // move the "Sign out" link in and down a bit, because of extra padding on parent - top: 0.8em; - #{$right}: 0.8em; - } - } - - & + .container .content { - padding-top: 3.5em; // make room for user menu! - } + .nav-menu--main a.report-a-problem-btn { + padding: 0.5em; + margin: 0.9em 0.25em 0.85em; } .banner { @@ -324,9 +319,6 @@ body.mappage { #site-logo { position: absolute; } - #user-meta { - margin-#{$left}: 2em; - } } } //ie8 needs different stuff on .nav-wrapper so we @@ -347,6 +339,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; @@ -597,17 +625,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, @@ -623,14 +640,14 @@ body.authpage { // push zoom back over to right #fms_pan_zoom_zoomin { - #{$left}: auto !important; - #{$right}: 30px !important; - top:130px !important; + #{$left}: auto; + #{$right}: 30px; + top: 130px; } #fms_pan_zoom_zoomout { - #{$left}: auto !important; - #{$right}: 30px !important; - top:174px !important; + #{$left}: auto; + #{$right}: 30px; + top: 174px; } .olControlAttribution { @@ -668,45 +685,6 @@ body.authpage { } } -// log in bit, pokes above the .content div -#user-meta{ - display:block; - position: relative; - max-width: 60em; - margin: 0 auto; - p { - @include inline-block; - position: absolute; - top: 1em; - #{$left}: 1em; - height:2em; - padding: flip(0.25em 6em 0.5em 0.5em, 0.25em 0.5em 0.5em 6em); - @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px); - a { - top:0.5em; - #{$right}: 0.5em; - font-size:0.6875em; - padding:0.5em 0.75em; - line-height:1em; - &:hover { - text-decoration:none; - background:#444; - } - } - } -} -.ie6, .ie7 { - #user-meta { - z-index:1; - p { - top:-2em; - } - } -} -.ie6 #user-meta { - width: 60em; //ie6 doesn't like max-width -} - // Wraps around #key-tools box - sticks to the bottom of the screen on desktop .shadow-wrap { @@ -764,13 +742,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; @@ -780,24 +767,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%; @@ -848,14 +825,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], @@ -875,40 +844,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; } } @@ -937,24 +898,6 @@ body.frontpage { height: 60px; background: url($image-sprite) -2px -108px no-repeat; } - #user-meta { - z-index:10; - p { - top: -4em; - #{$left}: auto; - #{$right}: 0; - color:$primary; - background:none; - @include box-shadow(rgba(0, 0, 0, 0) 0 0 0); - a { - background:#fff; - color:#1a1a1a; - &:hover { - background:#ddd; - } - } - } - } } //logo fix .iel8 { @@ -1138,12 +1081,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 f55ac0d15..63de06652 100644 --- a/web/cobrands/stevenage/layout.scss +++ b/web/cobrands/stevenage/layout.scss @@ -96,29 +96,13 @@ 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; -} - // d523b431 body.frontpage { .nav-wrapper-2 { height: auto; } - // 1162d5c8 - Changed the colour of the user text when you're logged in to be more readable - #user-meta { - p { - color: #fff; - } + #site-header { + height: auto; } } @@ -183,7 +167,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..177d5773e 100644 --- a/web/cobrands/warwickshire/layout.scss +++ b/web/cobrands/warwickshire/layout.scss @@ -1,18 +1,14 @@ +$mappage-header-height: 41px + 100px + 37px; // .navbar-inverse + #top-header + #mega-menu-navbar + @import "_colours"; @import "../sass/layout"; #site-header { position: relative; - border-top-width: 0; - .navbar { margin-bottom: 0; } - - .container { - min-height: 0; - } } // Needs to be within body.frontpage to override an existing rule in _layout.scss @@ -22,16 +18,6 @@ body.frontpage { } } -#fms_pan_zoom { - top: 14em !important; -} - -@media (max-width: 61em) and (min-width: 48em) { - #site-header { - height: auto; - } -} - body.mappage { footer, .footer-container, #footer-container, #footer-logos-bottom { display: none; @@ -41,11 +27,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; } } @@ -71,16 +63,11 @@ body.twothirdswidthpage .content .sticky-sidebar { // default FMS style. // http://www.warwickshire.gov.uk/wp-content/themes/gamma/style.css -.container, -.navbar-static-top .container, -.navbar-fixed-top .container, -.navbar-fixed-bottom .container, -body.mappage .container { +.container { width: 940px; } -.navbar .container, -body.mappage .container { +.navbar .container { width: auto; } 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 3f24b3685..7bb44c231 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,13 +238,13 @@ body.twothirdswidthpage { } #fms_pan_zoom { - top: 9em !important; + top: 2em; } #fms_pan_zoom_zoomin { - top: 0 !important; + top: 0; } #fms_pan_zoom_zoomout { - top: 44px !important; + top: 44px; } // Admin specific changes diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js index 267643898..f5f5f2934 100644 --- a/web/js/map-OpenLayers.js +++ b/web/js/map-OpenLayers.js @@ -1,7 +1,7 @@ // This function might be passed either an OpenLayers.LonLat (so has // lon and lat) or an OpenLayers.Geometry.Point (so has x and y) function fixmystreet_update_pin(lonlat) { - lonlat.transform( + lonlat = lonlat.clone().transform( fixmystreet.map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326") ); @@ -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(); @@ -57,7 +58,7 @@ function fixmystreet_update_pin(lonlat) { function fixmystreet_activate_drag() { fixmystreet.drag = new OpenLayers.Control.DragFeature( fixmystreet.markers, { onComplete: function(feature, e) { - fixmystreet_update_pin( feature.geometry.clone() ); + fixmystreet_update_pin( feature.geometry ); } } ); fixmystreet.map.addControl( fixmystreet.drag ); @@ -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); @@ -547,6 +536,22 @@ OpenLayers.Control.PanZoomFMS = OpenLayers.Class(OpenLayers.Control.PanZoom, { break; } } + }, + moveTo: function(){}, + draw: function(px) { + // A customised version of .draw() that doesn't specify + // and dimensions/positions for the buttons, since we + // size and position them all using CSS. + OpenLayers.Control.prototype.draw.apply(this, arguments); + this.buttons = []; + this._addButton("panup", "north-mini.png"); + this._addButton("panleft", "west-mini.png"); + this._addButton("panright", "east-mini.png"); + this._addButton("pandown", "south-mini.png"); + this._addButton("zoomin", "zoom-plus-mini.png"); + this._addButton("zoomworld", "zoom-world-mini.png"); + this._addButton("zoomout", "zoom-minus-mini.png"); + return this.div; } }); @@ -560,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 ) { @@ -684,9 +681,6 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { trigger: function(e) { var cobrand = $('meta[name="cobrand"]').attr('content'); - if (typeof fixmystreet.nav_control != 'undefined') { - fixmystreet.nav_control.disableZoomWheel(); - } var lonlat = fixmystreet.map.getLonLatFromViewPortPx(e.xy); if (fixmystreet.page == 'new') { /* Already have a pin */ @@ -710,48 +704,41 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { // Store pin location in form fields, and check coverage of point fixmystreet_update_pin(lonlat); - // Already did this first time map was clicked, so no need to do it again. + // It's possible to invoke the OpenLayers.Control `trigger` callback + // multiple times in a row (eg: by clicking on the map multiple times, + // to reposition your report). + // But there is some stuff we only want to happen the first time you + // switch from the "around" view to the "new" report view. + // So, here we check whether we've already transitioned into the "new" + // report view, and if so, we return from the callback early, + // skipping the remainder of the setup stuff. if (fixmystreet.page == 'new') { + fixmystreet.map.panDuration = 100; + fixmystreet.map.panTo(lonlat); + fixmystreet.map.panDuration = 50; return; } - fixmystreet.map.updateSize(); // might have done, and otherwise Firefox gets confused. + // 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. - * NB: This has to happen after the call to show() */ + * NB: This has to happen after the call to show() in fixmystreet_update_pin */ if ( navigator.userAgent.match(/like Mac OS X/i)) { document.getElementById('side-form').style.display = 'block'; } $('#side').hide(); - if (typeof heightFix !== 'undefined') { - heightFix('#report-a-problem-sidebar', '.content', 26); - } - - // If we clicked the map somewhere inconvenient - var sidebar = $('#report-a-problem-sidebar'); - if (sidebar.css('position') == 'absolute') { - var w = sidebar.width(), h = sidebar.height(), - o = sidebar.offset(), - $map_boxx = $('#map_box'), bo = $map_boxx.offset(); - // 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 - lonlat.transform( - new OpenLayers.Projection("EPSG:4326"), - fixmystreet.map.getProjectionObject() - ); - var p = fixmystreet.map.getViewPortPxFromLonLat(lonlat); - p.x -= midpoint_box_excluding_column(o, w, bo, $map_boxx.width()); - lonlat = fixmystreet.map.getLonLatFromViewPortPx(p); - fixmystreet.map.panTo(lonlat); - } - } + + fixmystreet.map.updateSize(); // required after changing the size of the map element + + fixmystreet.map.panDuration = 100; + fixmystreet.map.panTo(lonlat); + fixmystreet.map.panDuration = 50; $('#sub_map_links').hide(); if ($('html').hasClass('mobile')) { diff --git a/web/js/map-bing-ol.js b/web/js/map-bing-ol.js index 9b0a73fb8..5e29daea1 100644 --- a/web/js/map-bing-ol.js +++ b/web/js/map-bing-ol.js @@ -4,16 +4,10 @@ function _set_map_config() { permalink_id = 'map_permalink'; } - var nav_opts = { zoomWheelEnabled: false }; - if (fixmystreet.page == 'around' && $('html').hasClass('mobile')) { - nav_opts = {}; - } - fixmystreet.nav_control = new OpenLayers.Control.Navigation(nav_opts); - fixmystreet.controls = [ new OpenLayers.Control.Attribution(), new OpenLayers.Control.ArgParser(), - fixmystreet.nav_control, + new OpenLayers.Control.Navigation(), new OpenLayers.Control.PermalinkFMS(permalink_id), new OpenLayers.Control.PanZoomFMS({id: 'fms_pan_zoom' }) ]; 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); } diff --git a/web/js/map-wmts-zurich.js b/web/js/map-wmts-zurich.js index 4c386e87d..9e0555079 100644 --- a/web/js/map-wmts-zurich.js +++ b/web/js/map-wmts-zurich.js @@ -56,15 +56,9 @@ $(function(){ function set_map_config(perm) { // This stuff is copied from js/map-bing-ol.js - var nav_opts = { zoomWheelEnabled: false }; - if (fixmystreet.page == 'around' && $('html').hasClass('mobile')) { - nav_opts = {}; - } - fixmystreet.nav_control = new OpenLayers.Control.Navigation(nav_opts); - fixmystreet.controls = [ new OpenLayers.Control.ArgParser(), - fixmystreet.nav_control + new OpenLayers.Control.Navigation() ]; if ( fixmystreet.page != 'report' || !$('html').hasClass('mobile') ) { fixmystreet.controls.push( new OpenLayers.Control.PanZoomFMS({id: 'fms_pan_zoom' }) ); |
