aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--templates/web/base/common_header_tags.html2
-rw-r--r--templates/web/base/js/translation_strings.html3
-rw-r--r--web/cobrands/fixmystreet/fixmystreet.js17
-rw-r--r--web/cobrands/fixmystreet/header.js2
-rw-r--r--web/cobrands/fixmystreet/images/compress.pngbin0 -> 762 bytes
-rw-r--r--web/cobrands/fixmystreet/images/compress.svg1
-rw-r--r--web/cobrands/fixmystreet/images/compress@2x.pngbin0 -> 1227 bytes
-rw-r--r--web/cobrands/fixmystreet/images/expand.pngbin0 -> 726 bytes
-rw-r--r--web/cobrands/fixmystreet/images/expand.svg1
-rw-r--r--web/cobrands/fixmystreet/images/expand@2x.pngbin0 -> 1112 bytes
-rw-r--r--web/cobrands/sass/_base.scss53
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=["&#173;",'<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
new file mode 100644
index 000000000..500673956
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/compress.png
Binary files differ
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
new file mode 100644
index 000000000..8acf34850
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/compress@2x.png
Binary files differ
diff --git a/web/cobrands/fixmystreet/images/expand.png b/web/cobrands/fixmystreet/images/expand.png
new file mode 100644
index 000000000..c0c129fb7
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/expand.png
Binary files differ
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
new file mode 100644
index 000000000..6abc9c1a4
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/expand@2x.png
Binary files differ
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%;