Added fix when users zooming in a map page

Currently when users zooming over 175% in a screen that is 1280px by 720px, the mobile version is trigger in the around page. This behaviour doesn't allow them to see the list of reports made in the area. This fix prevent classes(map-fullscreen only-map map-reporting) to be added, resulting in a mobile view with a non-full page map with a scrollable page so users can see the list of reports.

templates/web/base/common_header_tags.html

@@ -36,7 +36,7 @@
 h.style.overflow="hidden";h.appendChild(c)}b=n(f,b);c.fake?(c.parentNode.removeChild(c),h.style.overflow=g,h.offsetHeight):f.parentNode.removeChild(f);return!!b}k={_version:"3.11.4"};var g=function(){};g.prototype=k;g=new g;var h=e.documentElement,p=function(){var b=d.matchMedia||d.msMatchMedia;return b?function(d){return(d=b(d))&&d.matches||!1}:function(b){var a=!1;m("@media "+b+" { #modernizr { position: absolute; } }",function(b){a="absolute"===("getComputedStyle"in d?getComputedStyle(b):b.currentStyle).position});
 return a}}();k.mq=p;d.Modernizr=g})(window,document);
     var fixmystreet=fixmystreet||{};fixmystreet.page="[% page %]";fixmystreet.cobrand="[% c.cobrand.moniker %]";fixmystreet.password_minimum_length=[% cobrand.password_minimum_length %];
-    (function(a){a=a.documentElement;a.className=a.className.replace(/\bno-js\b/,"js");var b=Modernizr.mq("(min-width: 48em)")?"desktop":"mobile";"IntersectionObserver"in window&&(a.className+=" lazyload");"mobile"==b&&(a.className+=' mobile[% " map-fullscreen only-map map-reporting" IF page == "around" || page == "new" %]')})(document);
+    (function(a){a=a.documentElement;a.className=a.className.replace(/\bno-js\b/,"js");var b=Modernizr.mq("(min-width: 48em)")?"desktop":"mobile";"IntersectionObserver"in window&&(a.className+=" lazyload");"mobile"===b&&(a.className+=" mobile"[% IF page == "around" || page == "new" %],Modernizr.mq("(max-height: 30em)")||(a.className+=" map-fullscreen only-map map-reporting")[% END %])})(document);
 </script>
 
 <script nonce="[% csp_nonce %]">

web/cobrands/fixmystreet/fixmystreet.js

@@ -231,7 +231,7 @@ fixmystreet.mobile_reporting = {
 fixmystreet.resize_to = {
   mobile_page: function() {
     $('html').addClass('mobile');
-    if (typeof fixmystreet !== 'undefined' && (fixmystreet.page === 'around' || fixmystreet.page === 'new')) {
+    if (typeof fixmystreet !== 'undefined' && (fixmystreet.page === 'around' || fixmystreet.page === 'new') && Modernizr.mq('(min-height: 30em)')) {
         fixmystreet.mobile_reporting.apply_ui();
     }
 

web/cobrands/fixmystreet/header.js

@@ -1,4 +1,6 @@
 // A minimized version of this is inline in the header.
+// Note the commented out IF to pass the git hook; this
+// needs adapting/including in the minimized version.
 
 var fixmystreet = fixmystreet || {};
 fixmystreet.page = '[% page %]';
@@ -11,7 +13,13 @@ fixmystreet.cobrand = '[% c.cobrand.moniker %]';
     if ('IntersectionObserver' in window) {
         E.className += ' lazyload';
     }
-    if (type == 'mobile') {
-        E.className += ' mobile[% " map-fullscreen only-map map-reporting" IF page == "around" || page == "new" %]';
+    if (type === 'mobile') {
+        E.className += ' mobile';
+//        [% IF page == "around" || page == "new" ~%]
+        var isShortScreen = Modernizr.mq('(max-height: 30em)');
+        if (!isShortScreen) {
+            E.className += ' map-fullscreen only-map map-reporting';
+        }
+//        [%~ END %]
     }
 })(document);

web/cobrands/sass/_report_list.scss

@@ -156,6 +156,11 @@ input.bulk-assign {
     flex-direction: row;
     gap: 1rem;
     margin-bottom: 1rem;
+
+    @media (max-height: 30em) {
+      // To avoid horizontal scrolling when zooming >300%
+      flex-direction: column;
+    }
   }
 
   .report-list-filters {

web/js/map-OpenLayers.js

@@ -1426,7 +1426,7 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
             return true;
         }
 
-        if (!$("html").hasClass("mobile")) {
+        if (!$("html").hasClass("map-reporting")) {
             var lonlat = fixmystreet.map.getLonLatFromViewPortPx(e.xy);
             fixmystreet.display.begin_report(lonlat);
         }