diff options
-rw-r--r-- | templates/web/base/common_header_tags.html | 2 | ||||
-rw-r--r-- | templates/web/base/js/translation_strings.html | 3 | ||||
-rw-r--r-- | web/cobrands/fixmystreet/fixmystreet.js | 17 | ||||
-rw-r--r-- | web/cobrands/fixmystreet/header.js | 2 | ||||
-rw-r--r-- | web/cobrands/fixmystreet/images/compress.png | bin | 0 -> 762 bytes | |||
-rw-r--r-- | web/cobrands/fixmystreet/images/compress.svg | 1 | ||||
-rw-r--r-- | web/cobrands/fixmystreet/images/compress@2x.png | bin | 0 -> 1227 bytes | |||
-rw-r--r-- | web/cobrands/fixmystreet/images/expand.png | bin | 0 -> 726 bytes | |||
-rw-r--r-- | web/cobrands/fixmystreet/images/expand.svg | 1 | ||||
-rw-r--r-- | web/cobrands/fixmystreet/images/expand@2x.png | bin | 0 -> 1112 bytes | |||
-rw-r--r-- | web/cobrands/sass/_base.scss | 53 |
11 files changed, 67 insertions, 12 deletions
diff --git a/templates/web/base/common_header_tags.html b/templates/web/base/common_header_tags.html index 7c0ac4973..e64722f01 100644 --- a/templates/web/base/common_header_tags.html +++ b/templates/web/base/common_header_tags.html @@ -12,7 +12,7 @@ <script nonce="[% csp_nonce %]"> window.Modernizr=function(e,t,n){function r(e){p.cssText=e}function o(e,t){return typeof e===t}var a,i,c,l="2.8.3",s={},u=t.documentElement,d="modernizr",f=t.createElement(d),p=f.style,m=({}.toString,{}),h=[],y=h.slice,v=function(e,n,r,o){var a,i,c,l,s=t.createElement("div"),f=t.body,p=f||t.createElement("body");if(parseInt(r,10))for(;r--;)c=t.createElement("div"),c.id=o?o[r]:d+(r+1),s.appendChild(c);return a=["­",'<style id="s',d,'">',e,"</style>"].join(""),s.id=d,(f?s:p).innerHTML+=a,p.appendChild(s),f||(p.style.background="",p.style.overflow="hidden",l=u.style.overflow,u.style.overflow="hidden",u.appendChild(p)),i=n(s,e),f?s.parentNode.removeChild(s):(p.parentNode.removeChild(p),u.style.overflow=l),!!i},g=function(t){var n=e.matchMedia||e.msMatchMedia;if(n)return n(t)&&n(t).matches||!1;var r;return v("@media "+t+" { #"+d+" { position: absolute; } }",function(t){r="absolute"==(e.getComputedStyle?getComputedStyle(t,null):t.currentStyle).position}),r},b={}.hasOwnProperty;c=o(b,"undefined")||o(b.call,"undefined")?function(e,t){return t in e&&o(e.constructor.prototype[t],"undefined")}:function(e,t){return b.call(e,t)};for(var E in m)c(m,E)&&(i=E.toLowerCase(),s[i]=m[E](),h.push((s[i]?"":"no-")+i));return r(""),f=a=null,s._version=l,s.mq=g,s.testStyles=v,s}(this,this.document); var fixmystreet=fixmystreet||{}; - (function(b){var a=b.documentElement;a.className=a.className.replace(/\bno-js\b/,"js");var c=-1<a.className.indexOf("iel8"),c=Modernizr.mq("(min-width: 48em)")||c?"desktop":"mobile";b=b.getElementById("js-meta-data");fixmystreet.page=b.getAttribute("data-page");fixmystreet.cobrand=b.getAttribute("data-cobrand");"mobile"==c&&(a.className+=" mobile","around"==fixmystreet.page&&(a.className+=" mobile-reporting-map only-map"))})(document); + (function(b){var a=b.documentElement;a.className=a.className.replace(/\bno-js\b/,"js");var c=-1<a.className.indexOf("iel8"),c=Modernizr.mq("(min-width: 48em)")||c?"desktop":"mobile";b=b.getElementById("js-meta-data");fixmystreet.page=b.getAttribute("data-page");fixmystreet.cobrand=b.getAttribute("data-cobrand");"mobile"==c&&(a.className+=" mobile","around"==fixmystreet.page&&(a.className+=" map-fullscreen only-map map-reporting"))})(document); </script> [% IF admin %] diff --git a/templates/web/base/js/translation_strings.html b/templates/web/base/js/translation_strings.html index d6aca9ccb..c09609411 100644 --- a/templates/web/base/js/translation_strings.html +++ b/templates/web/base/js/translation_strings.html @@ -46,6 +46,9 @@ map_map: '[% loc('Map') | replace("'", "\\'") %]', map_satellite: '[% loc('Satellite') | replace("'", "\\'") %]', + expand_map: '[% loc('Expand map') | replace("'", "\\'") %]', + collapse_map: '[% loc('Collapse map') | replace("'", "\\'") %]', + permalink: '[% loc('Permalink') | replace("'", "\\'") %]', upload_max_files_exceeded: '[% loc ('Whoa there Testino! Three photos are enough.') | replace("'", "\\'") %]', diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js index 313d790c9..8e8941421 100644 --- a/web/cobrands/fixmystreet/fixmystreet.js +++ b/web/cobrands/fixmystreet/fixmystreet.js @@ -118,7 +118,7 @@ fixmystreet.mobile_reporting = { apply_ui: function() { // Creates the "app-like" mobile reporting UI with full screen map // and special "OK/Cancel" buttons etc. - $('html').addClass('mobile-reporting-map only-map'); + $('html').addClass('map-fullscreen only-map map-reporting'); $('.mobile-map-banner span').text(translation_strings.place_pin_on_map); $('html, body').scrollTop(0); }, @@ -126,7 +126,7 @@ fixmystreet.mobile_reporting = { remove_ui: function() { // Removes the "app-like" mobile reporting UI, reverting all the // changes made by fixmystreet.mobile_reporting.apply_ui(). - $('html').removeClass('mobile-reporting-map only-map'); + $('html').removeClass('map-fullscreen only-map map-reporting'); $('#map_box').css({ width: "", height: "", position: "" }); $('#mob_sub_map_links').remove(); } @@ -869,6 +869,9 @@ $.extend(fixmystreet.set_up, { } $('#key-tools li:empty').remove(); $('#report-updates-data').insertAfter($('#map_box')); + if (fixmystreet.page === 'report' || fixmystreet.page === 'reports') { + $('#sub_map_links').append('<a href="#" id="toggle-fullscreen" class="expand" data-expand-text="'+ translation_strings.expand_map +'" data-compress-text="'+ translation_strings.collapse_map +'" >'+ translation_strings.expand_map +'</span>'); + } } // Show/hide depending on whether it has any children to show @@ -897,6 +900,16 @@ $.extend(fixmystreet.set_up, { }) .prependTo('#sub_map_links'); } + + $('#toggle-fullscreen').click(function() { + var btnClass = $('html').hasClass('map-fullscreen') ? 'expand' : 'compress'; + var text = $(this).data(btnClass + '-text'); + + $('html').toggleClass('map-fullscreen only-map'); + $(this).html(text).attr('class', btnClass); + + fixmystreet.map.updateSize(); + }); }, map_sidebar_key_tools: function() { diff --git a/web/cobrands/fixmystreet/header.js b/web/cobrands/fixmystreet/header.js index c4c3de1b6..e4b0a9a91 100644 --- a/web/cobrands/fixmystreet/header.js +++ b/web/cobrands/fixmystreet/header.js @@ -13,7 +13,7 @@ var fixmystreet = fixmystreet || {}; if (type == 'mobile') { E.className += ' mobile'; if (fixmystreet.page == 'around') { - E.className += ' mobile-reporting-map only-map'; + E.className += ' map-fullscreen only-map map-reporting'; } } })(document); diff --git a/web/cobrands/fixmystreet/images/compress.png b/web/cobrands/fixmystreet/images/compress.png Binary files differnew file mode 100644 index 000000000..500673956 --- /dev/null +++ b/web/cobrands/fixmystreet/images/compress.png diff --git a/web/cobrands/fixmystreet/images/compress.svg b/web/cobrands/fixmystreet/images/compress.svg new file mode 100644 index 000000000..68efd6b31 --- /dev/null +++ b/web/cobrands/fixmystreet/images/compress.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="384" height="448" viewBox="0 0 384 448"><path fill="#fff" d="M192 240v112c0 8.75-7.25 16-16 16-4.25 0-8.25-1.75-11.25-4.75l-36-36-83 83c-1.5 1.5-3.75 2.5-5.75 2.5s-4.25-1-5.75-2.5l-28.5-28.5c-1.5-1.5-2.5-3.75-2.5-5.75s1-4.25 2.5-5.75l83-83-36-36c-3-3-4.75-7-4.75-11.25 0-8.75 7.25-16 16-16h112c8.75 0 16 7.25 16 16zM380.75 72c0 2-1 4.25-2.5 5.75l-83 83 36 36c3 3 4.75 7 4.75 11.25 0 8.75-7.25 16-16 16H208c-8.75 0-16-7.25-16-16V96c0-8.75 7.25-16 16-16 4.25 0 8.25 1.75 11.25 4.75l36 36 83-83c1.5-1.5 3.75-2.5 5.75-2.5s4.25 1 5.75 2.5l28.5 28.5c1.5 1.5 2.5 3.75 2.5 5.75z"/></svg> diff --git a/web/cobrands/fixmystreet/images/compress@2x.png b/web/cobrands/fixmystreet/images/compress@2x.png Binary files differnew file mode 100644 index 000000000..8acf34850 --- /dev/null +++ b/web/cobrands/fixmystreet/images/compress@2x.png diff --git a/web/cobrands/fixmystreet/images/expand.png b/web/cobrands/fixmystreet/images/expand.png Binary files differnew file mode 100644 index 000000000..c0c129fb7 --- /dev/null +++ b/web/cobrands/fixmystreet/images/expand.png diff --git a/web/cobrands/fixmystreet/images/expand.svg b/web/cobrands/fixmystreet/images/expand.svg new file mode 100644 index 000000000..1f063b4b7 --- /dev/null +++ b/web/cobrands/fixmystreet/images/expand.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="384" height="448" viewBox="0 0 384 448"><path fill="#fff" d="M188.75 264c0 2-1 4.25-2.5 5.75l-83 83 36 36c3 3 4.75 7 4.75 11.25 0 8.75-7.25 16-16 16H16c-8.75 0-16-7.25-16-16V288c0-8.75 7.25-16 16-16 4.25 0 8.25 1.75 11.25 4.75l36 36 83-83c1.5-1.5 3.75-2.5 5.75-2.5s4.25 1 5.75 2.5l28.5 28.5c1.5 1.5 2.5 3.75 2.5 5.75zM384 48v112c0 8.75-7.25 16-16 16-4.25 0-8.25-1.75-11.25-4.75l-36-36-83 83c-1.5 1.5-3.75 2.5-5.75 2.5s-4.25-1-5.75-2.5l-28.5-28.5c-1.5-1.5-2.5-3.75-2.5-5.75s1-4.25 2.5-5.75l83-83-36-36c-3-3-4.75-7-4.75-11.25 0-8.75 7.25-16 16-16h112c8.75 0 16 7.25 16 16z"/></svg> diff --git a/web/cobrands/fixmystreet/images/expand@2x.png b/web/cobrands/fixmystreet/images/expand@2x.png Binary files differnew file mode 100644 index 000000000..6abc9c1a4 --- /dev/null +++ b/web/cobrands/fixmystreet/images/expand@2x.png diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index 179168aae..366939d4c 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -620,6 +620,7 @@ body.mappage .wrapper { background-image: url($image-sprite); background-position: center -2563px; } + &.share { background-image: url('/cobrands/fixmystreet/images/share.png'); background-position: center 25%; @@ -1496,6 +1497,40 @@ html.js #map .noscript { background-image:url($image-sprite); background-position: flip(right, -341px) -3936px; } + &#toggle-fullscreen { + padding: 0.6em 1em 0.5em 1em; + &:after { + content: ""; + display: inline-block; + width: 16px; + height: 16px; + background-size: 16px 16px; + vertical-align: middle; + margin-#{$left}: 8px; + } + &.expand:after { + background-image: url(/cobrands/fixmystreet/images/expand.png); + + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + background-image: url(/cobrands/fixmystreet/images/expand@2x.png); + } + + @media all { + background-image: url(/cobrands/fixmystreet/images/expand.svg), none; + } + } + &.compress:after { + background-image: url(/cobrands/fixmystreet/images/compress.png); + + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + background-image: url(/cobrands/fixmystreet/images/compress@2x.png); + } + + @media all { + background-image: url(/cobrands/fixmystreet/images/compress.svg), none; + } + } + } &:hover { background-color:#000; text-decoration:none; @@ -1559,14 +1594,14 @@ html.js #map .noscript { text-transform: uppercase; text-align: center; font-size: 0.875em; - .mobile-reporting-map & { + .map-fullscreen & { display: none; } } .mobile-map-banner { display: none; - .mobile-reporting-map & { + .map-fullscreen & { display: block; } text-transform: uppercase; @@ -1656,7 +1691,7 @@ a:hover.rap-notes-trigger { // and make the map full screen to reduce distractions. JavaScript also // tweaks the text content of some of the map-related elements, to make // it more "app-like". -.mobile-reporting-map { +.map-fullscreen { #site-header { display: none; } @@ -1672,10 +1707,6 @@ a:hover.rap-notes-trigger { z-index: 1; // stack above positioned elements later on the page (eg: .report-list-filters) } - #fms_pan_zoom { - top: 2.75em; // make space for the semi-transparent "Place pin on map" bar - } - .container { padding: 0; // map_box needs to be full width, so remove page gutter } @@ -1685,7 +1716,13 @@ a:hover.rap-notes-trigger { } } -.mobile-reporting-map.only-map { +.map-reporting { + #fms_pan_zoom { + top: 2.75em; // make space for the semi-transparent "Place pin on map" bar + } +} + +.only-map { height: 100%; body { height: 100%; |