diff options
| -rw-r--r-- | web/cobrands/fixmystreet/fixmystreet.js | 46 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/images/cross-grey.png | bin | 0 -> 237 bytes | |||
| -rw-r--r-- | web/cobrands/fixmystreet/images/cross-grey.svg | 1 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/images/cross-white.png | bin | 0 -> 215 bytes | |||
| -rw-r--r-- | web/cobrands/fixmystreet/images/cross-white.svg | 1 | ||||
| -rw-r--r-- | web/cobrands/sass/_base.scss | 26 | ||||
| -rw-r--r-- | web/cobrands/sass/_layout.scss | 2 | ||||
| -rw-r--r-- | web/js/map-OpenLayers.js | 5 | ||||
| -rw-r--r-- | web/js/map-google.js | 5 |
9 files changed, 42 insertions, 44 deletions
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js index 764fa1a03..a7a6977bd 100644 --- a/web/cobrands/fixmystreet/fixmystreet.js +++ b/web/cobrands/fixmystreet/fixmystreet.js @@ -152,6 +152,21 @@ fixmystreet.resize_to = { fixmystreet.mobile_reporting.apply_ui(); } + // Hide sidebar notes ("rap-notes") on the /report/new page on mobile, + // and provide a button that reveals/hides them again. + var $rapSidebar = $('#report-a-problem-sidebar'); + if ($rapSidebar.length) { + $rapSidebar.hide(); + $('<a>') + .addClass('rap-notes-trigger button-fwd') + .html(translation_strings.how_to_send) + .insertBefore($rapSidebar) + .on('click', function(){ + $rapSidebar.slideToggle(100); + $(this).toggleClass('clicked'); + }); + } + // On the front page, make it so that the "report a problem" menu item // scrolls to the top of the page, and has a hover effect, rather than // just being an innert span. @@ -166,6 +181,11 @@ fixmystreet.resize_to = { $('html').removeClass('mobile'); fixmystreet.mobile_reporting.remove_ui(); + // Undo the special "rap-notes" tweaks that might have + // been put into place by previous mobile UI. + $('#report-a-problem-sidebar').show(); + $('.rap-notes-trigger').remove(); + // On a desktop, so reset the "Report a problem" nav item to act // like an innert span again. $('span.report-a-problem-btn').css({ cursor:'' }).off('.reportBtn'); @@ -268,32 +288,6 @@ $.extend(fixmystreet.set_up, { }, mobile_ui_tweaks: function() { - //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) { - 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-back">' + translation_strings.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').addClass('chevron').wrap('<li>').parent().appendTo('#key-tools'); diff --git a/web/cobrands/fixmystreet/images/cross-grey.png b/web/cobrands/fixmystreet/images/cross-grey.png Binary files differnew file mode 100644 index 000000000..255a4d0e9 --- /dev/null +++ b/web/cobrands/fixmystreet/images/cross-grey.png diff --git a/web/cobrands/fixmystreet/images/cross-grey.svg b/web/cobrands/fixmystreet/images/cross-grey.svg new file mode 100644 index 000000000..2155900f2 --- /dev/null +++ b/web/cobrands/fixmystreet/images/cross-grey.svg @@ -0,0 +1 @@ +<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><title>Artboard 1</title><path d="M12.993 7.336L5.657 0 0 5.657l7.336 7.336L0 20.33l5.657 5.656 7.336-7.336 7.336 7.336 5.656-5.657-7.336-7.337 7.336-7.336L20.33 0l-7.337 7.336" fill="#D1D1D1" fill-rule="evenodd"/></svg>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/images/cross-white.png b/web/cobrands/fixmystreet/images/cross-white.png Binary files differnew file mode 100644 index 000000000..eb21ae816 --- /dev/null +++ b/web/cobrands/fixmystreet/images/cross-white.png diff --git a/web/cobrands/fixmystreet/images/cross-white.svg b/web/cobrands/fixmystreet/images/cross-white.svg new file mode 100644 index 000000000..8b57e699a --- /dev/null +++ b/web/cobrands/fixmystreet/images/cross-white.svg @@ -0,0 +1 @@ +<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><title>Artboard 1 Copy</title><path d="M12.993 7.336L5.657 0 0 5.657l7.336 7.336L0 20.33l5.657 5.656 7.336-7.336 7.336 7.336 5.656-5.657-7.336-7.337 7.336-7.336L20.33 0l-7.337 7.336" fill="#FFF" fill-rule="evenodd"/></svg>
\ No newline at end of file diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index 2f3bca274..6fd2c6a7b 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -801,6 +801,17 @@ input.final-submit { } } +.rap-notes-trigger { + &.clicked { + background-image: inline-image("../fixmystreet/images/cross-grey.svg"); + + .iel8 & { + background-image: url("../fixmystreet/images/cross-grey.png"); + } + } +} + + .big-green-banner { position: relative; top: -1.75em; @@ -1257,16 +1268,17 @@ html.js #map .noscript { } } -// only on mobile, this is a sidebar on desk (#report-a-problem-sidebar) +// only on mobile a.rap-notes-trigger, a:hover.rap-notes-trigger { - display:block; - width:90%; - padding-#{$left}: 5%; - padding-#{$right}: 5%; + display: block; + margin-bottom: 1em; } -.rap-notes { - margin:1em 0; + +#report-a-problem-sidebar { + margin-bottom: 2em; + padding: 1em; + background-color: #E9F2FF; } .mobile #map_box { diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss index 51d32828f..8c081b2a4 100644 --- a/web/cobrands/sass/_layout.scss +++ b/web/cobrands/sass/_layout.scss @@ -841,7 +841,7 @@ textarea.form-error { // Notes presented alongside the reporting form .sidebar, #report-a-problem-sidebar { - margin-bottom: 2em; + padding: 0; // If the parent is .with-notes we know we have space to // float the sidebar content to the side of the form. diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js index afa0d32d5..345ebeced 100644 --- a/web/js/map-OpenLayers.js +++ b/web/js/map-OpenLayers.js @@ -423,11 +423,6 @@ var fixmystreet = fixmystreet || {}; } $(window).hashchange(function(){ - if (location.hash == '#report' && $('.rap-notes').is(':visible')) { - $('.rap-notes-close').click(); - return; - } - if (location.hash && location.hash != '#') { return; } diff --git a/web/js/map-google.js b/web/js/map-google.js index d1bde98b6..a00d52ba1 100644 --- a/web/js/map-google.js +++ b/web/js/map-google.js @@ -149,11 +149,6 @@ fixmystreet.maps = {}; } $(window).hashchange(function(){ - if (location.hash == '#report' && $('.rap-notes').is(':visible')) { - $('.rap-notes-close').click(); - return; - } - if (location.hash && location.hash != '#') { return; } |
