aboutsummaryrefslogtreecommitdiffstats
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/cobrands/bromley/fixmystreet.js427
-rw-r--r--web/cobrands/bromley/layout.scss24
-rw-r--r--web/cobrands/fixmystreet/_base.scss5
-rw-r--r--web/cobrands/fixmystreet/_layout.scss13
-rw-r--r--web/cobrands/fixmystreet/fixmystreet.js66
-rw-r--r--web/js/map-OpenLayers.js6
6 files changed, 91 insertions, 450 deletions
diff --git a/web/cobrands/bromley/fixmystreet.js b/web/cobrands/bromley/fixmystreet.js
deleted file mode 100644
index bfe985d5f..000000000
--- a/web/cobrands/bromley/fixmystreet.js
+++ /dev/null
@@ -1,427 +0,0 @@
-/*
- * fixmystreet.js
- * FixMyStreet JavaScript
- */
-
-/*
- * general height fixing function
- *
- * elem1: element to check against
- * elem2: target element
- * offset: this will be added (if present) to the final value, useful for height errors
- */
-function heightFix(elem1, elem2, offset){
- var h1 = $(elem1).height(),
- h2 = $(elem2).height();
- if(offset === undefined){
- offset = 0;
- }
- if(h1 > h2){
- $(elem2).css({'min-height':h1+offset});
- }
-}
-
-
-/*
- * very simple tab function
- *
- * elem: trigger element, must have an href attribute (so probably needs to be an <a>)
- */
-function tabs(elem, indirect) {
- var href = elem.attr('href');
- //stupid IE sometimes adds the full uri into the href attr, so trim
- var start = href.indexOf('#'),
- target = href.slice(start, href.length);
-
- if (indirect) {
- elem = $(target + '_tab');
- }
-
- if(!$(target).hasClass('open'))
- {
- //toggle class on nav
- $('.tab-nav .active').removeClass('active');
- elem.addClass('active');
-
- //hide / show the right tab
- $('.tab.open').hide().removeClass('open');
- $(target).show().addClass('open');
- }
-}
-
-
-$(function(){
- var $html = $('html');
-
- var last_type;
- $(window).resize(function(){
- var type = $('#site-header').css('borderTopWidth');
- if (type == '4px') { type = 'mobile'; }
- else if (type == '0px') { type = 'desktop'; }
- else { return; }
- if (last_type == type) { return; }
- if (type == 'mobile') {
- $html.addClass('mobile');
- $('#map_box').prependTo('.content').css({
- zIndex: '', position: '',
- top: '', left: '', right: '', bottom: '',
- width: '', height: '10em',
- margin: ''
- });
- if (typeof fixmystreet !== 'undefined') {
- fixmystreet.state_map = ''; // XXX
- }
- if (typeof fixmystreet !== 'undefined' && fixmystreet.page == 'around') {
- // Immediately go full screen map if on around page
- // $('#site-header').hide();
- $('#map_box').prependTo('.wrapper').css({
- position: 'absolute',
- top: 0, left: 0, right: 0, bottom: 0,
- height: 'auto',
- margin: 0
- });
- $('#fms_pan_zoom').css({ top: '2.75em !important' });
- $('.big-green-banner')
- .addClass('mobile-map-banner')
- .appendTo('#map_box')
- .text('Place pin on map')
- .prepend('<a href="/">home</a>');
- }
- $('span.report-a-problem-btn').on('click.reportBtn', function(){
- $('html, body').animate({scrollTop:0}, 500);
- }).css({ cursor:'pointer' }).on('hover.reportBtn', function(){
- $(this).toggleClass('hover');
- });
- } else {
- // Make map full screen on non-mobile sizes.
- $html.removeClass('mobile');
- var map_pos = 'fixed', map_height = '100%';
- //if ($html.hasClass('ie6')) {
- map_pos = 'absolute';
- map_height = $(window).height();
- //}
- $('#map_box').prependTo('.wrapper').css({
- zIndex: 0, position: map_pos,
- top: 0, left: 0, right: 0, bottom: 0,
- width: '100%', height: map_height,
- margin: 0
- });
- if (typeof fixmystreet !== 'undefined') {
- $('#bromley-footer').hide();
- fixmystreet.state_map = 'full';
- }
- if (typeof fixmystreet !== 'undefined' && fixmystreet.page == 'around') {
- // Remove full-screen-ness
- // $('#site-header').show();
- $('#fms_pan_zoom').css({ top: '4.75em !important' });
- $('.big-green-banner')
- .removeClass('mobile-map-banner')
- .prependTo('#side')
- .text('Click map to report a problem');
- }
- $('span.report-a-problem-btn').css({ cursor:'' }).off('.reportBtn');
- }
- last_type = type;
- }).resize();
-
- /*
- * Report a problem page
- */
- //desktop
- if ($('#report-a-problem-sidebar').is(':visible')) {
- heightFix('#report-a-problem-sidebar', '.content', 26);
- }
-
- //show/hide notes on mobile
- $('.mobile #report-a-problem-sidebar').after('<a href="#" class="rap-notes-trigger button-right">How to send successful reports</a>').hide();
- $('.rap-notes-trigger').click(function(e){
- e.preventDefault();
- //check if we've already moved the notes
- if($('.rap-notes').length > 0){
- //if we have, show and hide .content
- $('.content').hide();
- $('.rap-notes').show();
- }else{
- //if not, move them and show, hiding .content
- $('.content').after('<div class="content rap-notes"></div>').hide();
- $('#report-a-problem-sidebar').appendTo('.rap-notes').show().after('<a href="#" class="rap-notes-close button-left">Back</a>');
- }
- $('html, body').scrollTop($('#report-a-problem-sidebar').offset().top);
- location.hash = 'rap-notes';
- });
- $('.mobile').on('click', '.rap-notes-close', function(e){
- e.preventDefault();
- //hide notes, show .content
- $('.content').show();
- $('.rap-notes').hide();
- $('html, body').scrollTop($('#mob_ok').offset().top);
- location.hash = 'report';
- });
-
- //move 'skip this step' link on mobile
- $('.mobile #skip-this-step').hide();
- $('.mobile #skip-this-step a').addClass('chevron').wrap('<li>').appendTo('#key-tools');
-
- /*
- * Tabs
- */
- //make initial tab active
- $('.tab-nav a').first().addClass('active');
- $('.tab').first().addClass('open');
-
- //hide other tabs
- $('.tab').not('.open').hide();
-
- //set up click event
- $(".tab-nav").on('click', 'a', function(e){
- e.preventDefault();
- tabs($(this));
- });
- $('.tab_link').click(function(e) {
- e.preventDefault();
- tabs($(this), 1);
- });
-
- /*
- * Skip to nav on mobile
- */
- $('.mobile').on('click', '#nav-link', function(e){
- e.preventDefault();
- var offset = $('#main-nav').offset().top;
- $('html, body').animate({scrollTop:offset}, 1000);
- });
-
-
- /*
- * Show stuff on input focus
- */
- $('.form-focus-hidden').hide();
- $('.form-focus-trigger').on('focus', function(){
- $('.form-focus-hidden').fadeIn(500);
- });
-
- /*
- * Show on click - pretty generic
- */
- $('.hideshow-trigger').on('click', function(e){
- e.preventDefault();
- var href = $(this).attr('href'),
- //stupid IE sometimes adds the full uri into the href attr, so trim
- start = href.indexOf('#'),
- target = href.slice(start, href.length);
-
- $(target).removeClass('hidden-js');
-
- $(this).hide();
- });
-
- /*
- * nicetable - on mobile shift 'name' col to be a row
- */
- $('.mobile .nicetable th.title').remove();
- $('.mobile .nicetable td.title').each(function(i){
- $(this).attr('colspan', 5).insertBefore($(this).parent('tr')).wrap('<tr class="heading" />');
- });
- // $('.mobile .nicetable tr.heading > td.title').css({'min-width':'300px'});
- // $('.mobile .nicetable tr > td.data').css({'max-width':'12%'});
-
- /*
- * Map controls prettiness
- */
- //add links container (if its not there)
- if($('#sub_map_links').length === 0){
- $('<p id="sub_map_links" />').insertAfter($('#map'));
- }
-
-// A sliding drawer from the bottom of the page, small version
-// that doesn't change the main content at all.
-$.fn.small_drawer = function(id) {
- this.toggle(function(){
- var $this = $(this), d = $('#' + id);
- if (!$this.addClass('hover').data('setup')) {
- d.hide().removeClass('hidden-js').css({
- padding: '1em',
- background: '#fff'
- });
- $this.data('setup', true);
- }
- d.slideDown();
- }, function(e){
- var $this = $(this), d = $('#' + id);
- $this.removeClass('hover');
- d.slideUp();
- });
-};
-
-// A sliding drawer from the bottom of the page, large version
-$.fn.drawer = function(id, ajax) {
- // IE7 positions the fixed tool bar 1em to the left unless it comes after
- // the full-width section, ho-hum. Move it to where it would be after an
- // open/close anyway
- if ($('html.ie7').length) {
- var $sw = $('.shadow-wrap'), $content = $('.content[role="main"]');
- $sw.appendTo($content);
- }
- this.toggle(function(){
- var $this = $(this), d = $('#' + id), $content = $('.content[role="main"]');
- if (!$this.addClass('hover').data('setup')) {
- // make a drawer div with an innerDiv
- if (!d.length) {
- d = $('<div id="' + id + '">');
- }
- var innerDiv = $('<div>');
- d.wrapInner(innerDiv);
-
- // if ajax, load it with a spinner
- if (ajax) {
- var href = $this.attr('href') + ';ajax=1';
- $this.prepend(' <img class="spinner" src="/cobrands/fixmystreet/images/spinner-black-333.gif" style="margin-right:2em;">');
- innerDiv.load(href, function(){
- $('.spinner').remove();
- });
- }
-
- // Tall drawer - put after .content for scrolling to work okay.
- // position over the top of the main .content in precisely the right location
- d.insertAfter($content).addClass('content').css({
- position: 'absolute',
- zIndex: '1100',
- marginTop: $('html.ie6, html.ie7').length ? '-3em' : 0, // IE6/7 otherwise include the 3em padding and stay too low
- left: 0,
- top: $(window).height() - $content.offset().top
- }).removeClass('hidden-js').find('h2').css({ marginTop: 0 });
- $this.data('setup', true);
- }
-
- //do the animation
- $('.shadow-wrap').prependTo(d).addClass('static');
- d.show().animate({top:'3em'}, 1000, function(){
- $content.fadeOut(function() {
- d.css({ position: 'relative' });
- });
- });
- }, function(e){
- var $this = $(this), d = $('#' + id), $sw = $('.shadow-wrap'),
- $content = $('.content[role="main"]'),
- tot_height = $(window).height() - d.offset().top;
- $this.removeClass('hover');
- d.css({ position: 'absolute' }).animate({ top: tot_height }, 1000, function(){
- d.hide();
- $sw.appendTo($content).removeClass('static');
- });
- $content.show();
- });
-};
-
- if ($('html.mobile').length) {
- $('#council_wards').hide().removeClass('hidden-js').find('h2').hide();
- $('#key-tool-wards').click(function(e){
- e.preventDefault();
- $('#council_wards').slideToggle('800', function(){
- $('#key-tool-wards').toggleClass('active');
- });
- });
- } else {
- $('#key-tool-wards').drawer('council_wards', false);
- $('#key-tool-around-updates').drawer('updates_ajax', true);
- }
- $('#key-tool-report-updates').small_drawer('report-updates-data');
-
- // Go directly to RSS feed if RSS button clicked on alert page
- // (due to not wanting around form to submit, though good thing anyway)
- $('.container').on('click', '#alert_rss_button', function(e){
- e.preventDefault();
- var feed = $('input[name=feed][type=radio]:checked').nextAll('a').attr('href');
- window.location.href = feed;
- });
- $('.container').on('click', '#alert_email_button', function(e){
- e.preventDefault();
- var form = $('<form/>').attr({ method:'post', action:"/alert/subscribe" });
- $('#alerts input[type=text], #alerts input[type=hidden], #alerts input[type=radio]:checked').each(function() {
- var $v = $(this);
- $('<input/>').attr({ name:$v.attr('name'), value:$v.val(), type:'hidden' }).appendTo(form);
- });
- form.submit();
- });
-
- //add permalink on desktop, force hide on mobile
- $('#sub_map_links').append('<a href="#" id="map_permalink">Permalink</a>');
- if($('.mobile').length){
- $('#map_permalink').hide();
- $('#key-tools a.feed').appendTo('#sub_map_links');
- $('#key-tools li:empty').remove();
- $('#report-updates-data').insertAfter($('#map_box'));
- }
- //add open/close toggle button on desk
- $('#sub_map_links').prepend('<span id="map_links_toggle">&nbsp;</span>');
-
- //set up map_links_toggle click event
- $('#map_links_toggle').on('click', function(){
- var maplinks_width = $('#sub_map_links').width();
-
- if($(this).hasClass('closed')){
- $(this).removeClass('closed');
- $('#sub_map_links').animate({'right':'0'}, 1200);
- }else{
- $(this).addClass('closed');
- $('#sub_map_links').animate({'right':-maplinks_width}, 1200);
- }
- });
-
-
- /*
- * Add close buttons for .promo's
- */
- if($('.promo').length){
- $('.promo').append('<a href="#" class="close-promo">x</a>');
- }
- //only close its own parent
- $('.promo').on('click', '.close-promo', function(e){
- e.preventDefault();
- $(this).parent('.promo').animate({
- 'height':0,
- 'margin-bottom':0,
- 'padding-top':0,
- 'padding-bottom':0
- },{
- duration:500,
- queue:false
- }).fadeOut(500);
- });
-
-
-
- /*
- * Fancybox fullscreen images
- */
- $('a[rel=fancy]').fancybox({
- 'overlayColor': '#000000'
- });
-
- /*
- * heightfix the desktop .content div
- *
- * this must be kept near the end so that the
- * rendered height is used after any page manipulation (such as tabs)
- */
- if (!$('html.mobile').length) {
- if (!($('body').hasClass('frontpage'))){
- heightFix(window, '.content', -110);
- }
- }
-
-});
-
-/*
-XXX Disabled because jerky on Android and makes map URL bar height too small on iPhone.
-// Hide URL bar
-$(window).load(function(){
- window.setTimeout(function(){
- var s = window.pageYOffset || document.compatMode === "CSS1Compat" && document.documentElement.scrollTop || document.body.scrollTop || 0;
- if (s < 20 && !location.hash) {
- window.scrollTo(0, 1);
- }
- }, 0);
-});
-*/
-
diff --git a/web/cobrands/bromley/layout.scss b/web/cobrands/bromley/layout.scss
index 2724ac83b..ec3b45201 100644
--- a/web/cobrands/bromley/layout.scss
+++ b/web/cobrands/bromley/layout.scss
@@ -1,6 +1,7 @@
@import "_colours";
@import "../fixmystreet/_layout";
+// So that map appears underneath the header
.wrapper {
position: relative;
}
@@ -29,16 +30,23 @@ body {
}
// Bit of extra spacing needed under Bromley header
+#front-main {
+ top: -16em;
+}
body.frontpage .table-cell .content {
- margin-top: 15em;
+ margin-top: 16em;
}
-.ie6, .ie7 {
+.ie6 {
#front-main {
- top: -2em;
left: 1.5em;
}
+}
+.ie6, .ie7 {
+ #front-main {
+ top: -3em;
+ }
body.frontpage .table-cell .content {
- margin-top: 11em;
+ margin-top: 12em;
}
}
@@ -61,13 +69,15 @@ body.mappage .content {
}
}
+// As map can scroll and isn't at the top, give it an edge
#map_box {
- border-top: solid 1px #666;
- border-bottom: solid 1px #666;
+ border-top: solid 1px #999;
+ border-bottom: solid 1px #999;
}
// Perhaps fix map location (should be in central?)
-.ie6 #map_box {
+.ie6 #map_box, .ie7 #map_box {
right: -30em;
+ top: 0;
}
diff --git a/web/cobrands/fixmystreet/_base.scss b/web/cobrands/fixmystreet/_base.scss
index db348c2a4..66ce2d96b 100644
--- a/web/cobrands/fixmystreet/_base.scss
+++ b/web/cobrands/fixmystreet/_base.scss
@@ -151,6 +151,11 @@ select, input, textarea {
font-size: 99%;
max-width: 95%;
}
+.ie7 {
+ select, input, textarea {
+ max-width: none;
+ }
+}
// links
diff --git a/web/cobrands/fixmystreet/_layout.scss b/web/cobrands/fixmystreet/_layout.scss
index 5fb65ee72..3c762ad2d 100644
--- a/web/cobrands/fixmystreet/_layout.scss
+++ b/web/cobrands/fixmystreet/_layout.scss
@@ -223,6 +223,9 @@ h1 {
// map page - has fixed header and different styling
body.mappage {
+ .container {
+ width: auto;
+ }
.content {
float:left;
}
@@ -741,7 +744,7 @@ textarea.form-error {
}
}
.ie6, .ie7 {
- #report-a-problem-sidebar {
+ #report-a-problem-sidebar, .general-sidebar-notes {
left: 29em; // 0.5em left margin gone on .content in IE6/7, so reduce this accordingly.
}
}
@@ -899,10 +902,18 @@ body.frontpage {
}
}
}
+ a {
+ color: $primary_text;
+ text-decoration: underline;
+ &:hover {
+ text-decoration: none;
+ }
+ }
a#geolocate_link {
background:none;
color:#222;
margin:-1em 0 0.5em 0;
+ text-decoration: none;
&:hover {
text-decoration:underline;
background:none;
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 27b2b345b..ba1370417 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -53,6 +53,11 @@ function tabs(elem, indirect) {
$(function(){
var $html = $('html');
+ var cobrand;
+ if (window.location.href.indexOf('bromley') != -1) {
+ cobrand = 'bromley';
+ }
+
// Deal with switching between mobile and desktop versions on resize
var last_type;
$(window).resize(function(){
@@ -74,7 +79,9 @@ $(function(){
}
if (typeof fixmystreet !== 'undefined' && fixmystreet.page == 'around') {
// Immediately go full screen map if on around page
- $('#site-header').hide();
+ if (cobrand != 'bromley') {
+ $('#site-header').hide();
+ }
$('#map_box').prependTo('.wrapper').css({
position: 'absolute',
top: 0, left: 0, right: 0, bottom: 0,
@@ -96,23 +103,52 @@ $(function(){
} else {
// Make map full screen on non-mobile sizes.
$html.removeClass('mobile');
- var map_pos = 'fixed', map_height = '100%';
- if ($html.hasClass('ie6')) {
- map_pos = 'absolute';
- map_height = $(window).height();
+ if (cobrand == 'bromley') {
+ var $window = $(window), $content = $('.content'), o = $content.offset();
+ if ($html.hasClass('ie6')) {
+ $('#map_box').prependTo('.wrapper').css({
+ zIndex: 0, position: 'absolute',
+ right: 0, top: '4em',
+ width: $window.width() - o.left - $content.outerWidth(),
+ height: $window.height() - o.top + 32,
+ margin: 0
+ });
+ } else {
+ var map_height = $window.height() - o.top;
+ $('#map_box').prependTo('.wrapper').css({
+ zIndex: 0, position: 'fixed',
+ right: 0, top: o.top, bottom: 0,
+ width: $window.width() - o.left - $content.outerWidth(),
+ height: map_height,
+ margin: 0
+ });
+ }
+ } else if ($html.hasClass('ie6')) {
+ $('#map_box').prependTo('.wrapper').css({
+ zIndex: 0, position: 'absolute',
+ top: 0, left: 0, right: 0, bottom: 0,
+ width: '100%', height: $(window).height(),
+ margin: 0
+ });
+ } else {
+ $('#map_box').prependTo('.wrapper').css({
+ zIndex: 0, position: 'fixed',
+ top: 0, left: 0, right: 0, bottom: 0,
+ width: '100%', height: '100%',
+ margin: 0
+ });
+ }
+ if (cobrand == 'bromley') {
+ $('#bromley-footer').hide();
}
- $('#map_box').prependTo('.wrapper').css({
- zIndex: 0, position: map_pos,
- top: 0, left: 0, right: 0, bottom: 0,
- width: '100%', height: map_height,
- margin: 0
- });
if (typeof fixmystreet !== 'undefined') {
fixmystreet.state_map = 'full';
}
if (typeof fixmystreet !== 'undefined' && fixmystreet.page == 'around') {
// Remove full-screen-ness
- $('#site-header').show();
+ if (cobrand != 'bromley') {
+ $('#site-header').show();
+ }
$('#fms_pan_zoom').css({ top: '4.75em !important' });
$('.big-green-banner')
.removeClass('mobile-map-banner')
@@ -406,7 +442,11 @@ $.fn.drawer = function(id, ajax) {
*/
if (!$('html.mobile').length) {
if (!($('body').hasClass('frontpage'))){
- heightFix(window, '.content', -176);
+ var offset = -176;
+ if (cobrand == 'bromley') {
+ offset = -110;
+ }
+ heightFix(window, '.content', offset);
}
}
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index 5f60a4437..e4859b590 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -236,7 +236,9 @@ $(function(){
if (fixmystreet.state_map && fixmystreet.state_map == 'full') {
// TODO Work better with window resizing, this is pretty 'set up' only at present
- var q = $('#map_box').width() / 4;
+ var $content = $('.content'), mb = $('#map_box'),
+ q = ( $content.offset().left - mb.offset().left + $content.width() ) / 2;
+ if (q < 0) { q = 0; }
// Need to try and fake the 'centre' being 75% from the left
fixmystreet.map.pan(-q, -25, { animate: false });
fixmystreet.map.events.register("movestart", null, function(e){
@@ -477,7 +479,7 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
fixmystreet.map.getProjectionObject()
);
var p = fixmystreet.map.getViewPortPxFromLonLat(lonlat);
- p.x -= $map_box.width() / 3;
+ p.x -= ( o.left - bo.left + w ) / 2;
lonlat = fixmystreet.map.getLonLatFromViewPortPx(p);
fixmystreet.map.panTo(lonlat);
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-07-16 04:15:22 +0000