aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--.cypress/cypress/integration/around_filters.js25
-rw-r--r--CHANGELOG.md1
-rw-r--r--templates/web/base/js/translation_strings.html2
-rw-r--r--web/cobrands/fixmystreet/fixmystreet.js23
-rw-r--r--web/cobrands/fixmystreet/images/map-tools.pngbin846 -> 788 bytes
-rw-r--r--web/cobrands/fixmystreet/images/map-tools.svg2
-rw-r--r--web/cobrands/sass/_base.scss12
-rw-r--r--web/cobrands/sass/_layout.scss2
-rw-r--r--web/cobrands/sass/_report_list.scss15
9 files changed, 78 insertions, 4 deletions
diff --git a/.cypress/cypress/integration/around_filters.js b/.cypress/cypress/integration/around_filters.js
index 7bd029856..46d1f8477 100644
--- a/.cypress/cypress/integration/around_filters.js
+++ b/.cypress/cypress/integration/around_filters.js
@@ -126,4 +126,29 @@ describe('Around page filtering and push state', function() {
cy.contains('Loose drain cover');
cy.should('not.contain', 'Back to all reports');
});
+
+ it('lets me show and hide the filters on narrow screens', function(){
+ // #map_filter does not exist at normal window size
+ cy.visit('/around?lon=-2.295894&lat=51.526877&zoom=6');
+ cy.get('#map_filter').should('not.exist');
+
+ // #map_filter appears when window is narrowed _after_ pageload
+ cy.viewport(375, 667);
+ cy.get('#map_filter').should('exist');
+
+ // #map_filter exists when window is _already_ narrow at pageload
+ cy.reload();
+ cy.get('#map_filter').should('exist');
+
+ // And the filters are static (hidden) underneath the map as normal
+ cy.get('.report-list-filters-wrapper').invoke('css', 'position').should('equal', 'static');
+
+ // The filters appear when you click the #map_filter button
+ cy.get('#map_filter').click();
+ cy.get('.report-list-filters-wrapper').invoke('css', 'position').should('equal', 'fixed');
+
+ // And disappear again when you click #map_filter a second time
+ cy.get('#map_filter').click();
+ cy.get('.report-list-filters-wrapper').invoke('css', 'position').should('equal', 'static');
+ });
});
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 993bb3535..0f607e575 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
* Unreleased
- Front end improvements:
- Improved 403 message, especially for private reports.
+ - Mobile users can now filter the pins on the `/around` map view. #2366
- Admin improvements:
- Add new roles system, to group permissions and apply to users.
- Bugfixes:
diff --git a/templates/web/base/js/translation_strings.html b/templates/web/base/js/translation_strings.html
index 881f6ecb9..8968247d5 100644
--- a/templates/web/base/js/translation_strings.html
+++ b/templates/web/base/js/translation_strings.html
@@ -68,6 +68,8 @@ fixmystreet.password_minimum_length = [% c.cobrand.password_minimum_length %];
permalink: '[% loc('Permalink') | replace("'", "\\'") %]',
+ filter: '[% loc('Filter') | replace("'", "\\'") %]',
+
show_pins: '[% loc('Show pins') | replace("'", "\\'") %]',
hide_pins: '[% loc('Hide pins') | replace("'", "\\'") %]',
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index d71217ad0..e3c76c4e6 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -157,6 +157,24 @@ fixmystreet.mobile_reporting = {
// and special "OK/Cancel" buttons etc.
$('html').addClass('map-fullscreen only-map map-reporting');
$('.mobile-map-banner span').text(translation_strings.place_pin_on_map);
+
+ if ($('#map_filter').length === 0) {
+ $map_filter = $('<a href="#side" id="map_filter">' + translation_strings.filter + '</a>');
+ $map_filter.on('click', function(e) {
+ e.preventDefault();
+ var $form = $('#mapForm');
+ var $sub_map_links = $('#sub_map_links');
+ if ( $form.is('.mobile-filters-active') ) {
+ $form.removeClass('mobile-filters-active');
+ $sub_map_links.css('bottom', '');
+ } else {
+ $form.addClass('mobile-filters-active');
+ $sub_map_links.css('bottom', $('.report-list-filters-wrapper').outerHeight() );
+ }
+ });
+ $('#sub_map_links').prepend($map_filter);
+ }
+
// Do this on a timeout, so it takes precedence over the browser’s
// remembered position, which we do not want, we want a fixed map.
setTimeout(function() {
@@ -170,6 +188,11 @@ fixmystreet.mobile_reporting = {
$('html').removeClass('map-fullscreen only-map map-reporting');
$('#map_box').css({ width: "", height: "", position: "" });
$('#mob_sub_map_links').remove();
+
+ // Turn off the mobile map filters.
+ $('#mapForm').removeClass('mobile-filters-active');
+ $('#sub_map_links').css('bottom', '');
+ $('#map_filter').remove();
}
};
diff --git a/web/cobrands/fixmystreet/images/map-tools.png b/web/cobrands/fixmystreet/images/map-tools.png
index 037fb7af2..1c6f78445 100644
--- a/web/cobrands/fixmystreet/images/map-tools.png
+++ b/web/cobrands/fixmystreet/images/map-tools.png
Binary files differ
diff --git a/web/cobrands/fixmystreet/images/map-tools.svg b/web/cobrands/fixmystreet/images/map-tools.svg
index 5be4d71d0..cc204198f 100644
--- a/web/cobrands/fixmystreet/images/map-tools.svg
+++ b/web/cobrands/fixmystreet/images/map-tools.svg
@@ -1 +1 @@
-<svg width="96" height="12" viewBox="0 0 96 12" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M15.7 9.6a1.4 1.4 0 1 1-2.7 0 1.4 1.4 0 0 1 2.7 0zM13 4.4v2c2.5 0 4.6 2 4.6 4.6h2c0-3.6-3-6.6-6.6-6.6zM13 3a8 8 0 0 1 8 8h2A10 10 0 0 0 13 1v2z" fill="#FFF" fill-rule="nonzero"/><path d="M26 4L31 9.2 29.7 12 28 8.7A3.9 3.9 0 0 1 26 4zm1.8-2.2A4 4 0 0 1 33.1 7l-5.3-5.3zM25.7 1L34 9.3l-.7.7L25 1.7l.7-.7zM42.5 12a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11zm0-1.5a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" fill="#FFF"/><path stroke="#FFF" d="M42 3v3l2 2"/><path fill="#FFF" d="M5 2L1 6l4 4zM7 2l4 4-4 4z"/><g fill="#FFF"><path d="M54 5.4l1-1.1c.2 0 .3.2.4.3a3 3 0 0 1 0 4.2L54 10.2A3 3 0 1 1 49.8 6l1-1-.3.3.6 1.5-.3.3A1.5 1.5 0 0 0 53 9l1.5-1.3a1.5 1.5 0 0 0-.5-2.4z"/><path d="M54 6.6l-1 1.1a3 3 0 0 1-.4-4.6L54 1.9A3 3 0 1 1 58.2 6l-1 1 .3-.3-.6-1.5.3-.3A1.5 1.5 0 0 0 55 3l-1.5 1.3a1.5 1.5 0 0 0 .5 2.4z"/></g><path d="M62.6 12l3.4-1.7 3.4 1.7c.2 0 .3-.2.5-.3L69.2 8 72 5.4l-.2-.5-3.8-.5L66.3 1a6.6 6.6 0 0 0-.6 0L64 4.4l-3.8.5-.2.5L62.8 8l-.7 3.7.5.3zM88.6 6H90v5l-1.8-1.8-2.5 2.5-1.4-1.4 2.5-2.5L85 6h3.6zm3.2-3.2L94.3.3l1.4 1.4-2.5 2.5L95.1 6H90V1l1.8 1.8zM78 7.4l-2.8 2.8 1.9 1.8H72V7l1.8 1.8L76.6 6 78 7.4zM79.4 6l2.8-2.8L84.1 5 84 0h-5l1.8 1.8L78 4.6 79.4 6z" fill="#FFF"/></g></svg> \ No newline at end of file
+<svg width="108" height="12" viewbox="0 0 108 12" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M15.7 9.6a1.4 1.4 0 1 1-2.7 0 1.4 1.4 0 0 1 2.7 0zM13 4.4v2c2.5 0 4.6 2 4.6 4.6h2c0-3.6-3-6.6-6.6-6.6zM13 3a8 8 0 0 1 8 8h2A10 10 0 0 0 13 1v2z" fill="#FFF" fill-rule="nonzero"/><path d="M26 4L31 9.2 29.7 12 28 8.7A3.9 3.9 0 0 1 26 4zm1.8-2.2A4 4 0 0 1 33.1 7l-5.3-5.3zM25.7 1L34 9.3l-.7.7L25 1.7l.7-.7zM42.5 12a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11zm0-1.5a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" fill="#FFF"/><path stroke="#FFF" d="M42 3v3l2 2"/><path fill="#FFF" d="M5 2L1 6l4 4zM7 2l4 4-4 4z"/><g fill="#FFF"><path d="M54 5.4l1-1.1c.2 0 .3.2.4.3a3 3 0 0 1 0 4.2L54 10.2A3 3 0 1 1 49.8 6l1-1-.3.3.6 1.5-.3.3A1.5 1.5 0 0 0 53 9l1.5-1.3a1.5 1.5 0 0 0-.5-2.4z"/><path d="M54 6.6l-1 1.1a3 3 0 0 1-.4-4.6L54 1.9A3 3 0 1 1 58.2 6l-1 1 .3-.3-.6-1.5.3-.3A1.5 1.5 0 0 0 55 3l-1.5 1.3a1.5 1.5 0 0 0 .5 2.4z"/></g><path d="M62.6 12c-.2 0-.3-.2-.5-.3l.7-3.7L60 5.4l.2-.5 3.8-.5L65.7 1a6.6 6.6 0 0 1 .6 0L68 4.4l3.8.5.2.5L69.2 8l.7 3.7-.5.3-3.4-1.7-3.4 1.7zM88.6 6H90v5l-1.8-1.8-2.5 2.5-1.4-1.4 2.5-2.5L85 6h3.6zm3.2-3.2L94.3.3l1.4 1.4-2.5 2.5L95.1 6H90V1l1.8 1.8zM78 7.4l-2.8 2.8 1.9 1.8H72V7l1.8 1.8L76.6 6 78 7.4zM79.4 6L78 4.6l2.8-2.8L79 0h5v5l-1.8-1.8L79.4 6z" fill="#FFF"/><path fill="#FFF" fill-rule="nonzero" d="M97 2h10v2H97zM99 5h6v2h-6zM101 8h2v2h-2z"/></g></svg> \ No newline at end of file
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index e193553be..b410649a8 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1673,7 +1673,7 @@ html.js #map .noscript {
height: 12px;
margin-#{$left}: 8px;
vertical-align: -0.1em;
- background-size: 96px 12px;
+ background-size: 108px 12px;
@include svg-background-image('/cobrands/fixmystreet/images/map-tools');
}
@@ -1743,6 +1743,11 @@ html.js #map .noscript {
@extend %sub-map-link-icon;
background-position: -84px 0;
}
+
+ #map_filter:after {
+ @extend %sub-map-link-icon;
+ background-position: -96px 0;
+ }
}
// Want some visual consistency between the top and bottom bars on mobile.
@@ -1753,6 +1758,11 @@ html.js #map .noscript {
color: #fff;
}
+// "Selected" styling for the report-list-filter toggle when selected.
+.mobile-filters-active #map_filter {
+ background: #000;
+}
+
// On mobile, once #mob_ok has been pressed, the new report form is shown,
// and .sub-map-links transforms into a completely different-looking set
// of buttons for return back to the map.
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 0cbb6a007..b27305d31 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -651,7 +651,7 @@ body.authpage {
top: 50%;
margin-top: -6px;
#{$left}: ((16px - 6px) / 2); // horizontally centre in 16px wide parent
- background-size: 96px 12px;
+ background-size: 108px 12px;
@include svg-background-image('/cobrands/fixmystreet/images/map-tools');
}
diff --git a/web/cobrands/sass/_report_list.scss b/web/cobrands/sass/_report_list.scss
index 46c719b12..6910bb15e 100644
--- a/web/cobrands/sass/_report_list.scss
+++ b/web/cobrands/sass/_report_list.scss
@@ -1,8 +1,21 @@
+.report-list-filters-wrapper {
+ color: #666;
+
+ .mobile-filters-active & {
+ position: fixed;
+ z-index: 1;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: #000;
+ color: #fff;
+ }
+}
+
.report-list-filters {
padding: 1em;
padding-bottom: 0.75em; // compensate for 0.25em border-top on .item-list__item
margin-bottom: 0;
- color: #666;
font-size: 0.85em;
line-height: 1.8em;
generated by cgit v1.2.3 (git 2.25.1) at 2025-09-05 04:46:46 +0000