From b2c713e3743542ed704ef2d85bcf6135a8aa4b1c Mon Sep 17 00:00:00 2001 From: Dave Arter Date: Fri, 4 Oct 2024 15:52:45 +0100 Subject: [PATCH] =?UTF-8?q?[offline]=20On=20desktop=20/my/planned=20don?= =?UTF-8?q?=E2=80=99t=20cache=20reports=20automatically?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Desktop users are presumably less likely to find themselves offline, so it doesn't make sense to cache all reports in the shortlist automatically. This commit adds a link to the bottom of the report list on the desktop version of the /my/planned page that allows users to kick off the caching process manually. Behaviour on mobile is unchanged. --- .cypress/cypress/integration/borsetshire.js | 2 ++ CHANGELOG.md | 1 + templates/web/base/my/planned.html | 6 ++++++ web/cobrands/fixmystreet/images/cloud-download.svg | 4 ++++ web/cobrands/fixmystreet/offline.js | 14 ++++++++++++-- web/cobrands/sass/_base.scss | 6 ++++++ 6 files changed, 31 insertions(+), 2 deletions(-) create mode 100644 web/cobrands/fixmystreet/images/cloud-download.svg diff --git a/.cypress/cypress/integration/borsetshire.js b/.cypress/cypress/integration/borsetshire.js index 2f74fdc9f77..8dd7469d0ad 100644 --- a/.cypress/cypress/integration/borsetshire.js +++ b/.cypress/cypress/integration/borsetshire.js @@ -18,7 +18,9 @@ it('logs in without fuss', function() { cy.contains('Inspector').click(); cy.url().should('include', '/my/planned'); // Wait for offline stuff, which can take time + cy.contains('Save to this device for offline use').should('be.visible').click(); cy.get('.top_banner--offline', { timeout: 10000 }).contains('Reports saved offline', { timeout: 10000 }); + cy.contains('Save to this device for offline use').should('not.be.visible'); cy.contains('Your account').click(); cy.contains('Sign out').click(); diff --git a/CHANGELOG.md b/CHANGELOG.md index ece4365a31a..52713905d53 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -60,6 +60,7 @@ - Provide ResultSet fallback translation in lookup. - Mark non-Open311 updates as processed by daemon. #4552 - Inspector/planned offline report caching now fetches URLs sequentially, not in parallel. + - Desktop browsers won't automatically cache reports offline when visiting /my/planned. - Changes: - Switch to OpenStreetMap for reverse geocoding. #4444 - Convert all uploaded images to JPEGs. diff --git a/templates/web/base/my/planned.html b/templates/web/base/my/planned.html index d5fcc48ae83..2f866166d2a 100644 --- a/templates/web/base/my/planned.html +++ b/templates/web/base/my/planned.html @@ -29,6 +29,12 @@

[% loc('Your shortlist') %]

[% INCLUDE 'my/_problem-list.html' shortlist = 1 %]
+
+ +
+ diff --git a/web/cobrands/fixmystreet/images/cloud-download.svg b/web/cobrands/fixmystreet/images/cloud-download.svg new file mode 100644 index 00000000000..56f2925c0e1 --- /dev/null +++ b/web/cobrands/fixmystreet/images/cloud-download.svg @@ -0,0 +1,4 @@ + + + + diff --git a/web/cobrands/fixmystreet/offline.js b/web/cobrands/fixmystreet/offline.js index a4c8b430c0c..854eda2adf5 100644 --- a/web/cobrands/fixmystreet/offline.js +++ b/web/cobrands/fixmystreet/offline.js @@ -419,9 +419,19 @@ if ($('#offline_list').length) { } else { fixmystreet.offlineBanner.make(false); - // On /my/planned, when online, cache all shortlisted + // On /my/planned, when online, cache all shortlisted automatically on mobile. + // On desktop, show a button to cache them. if (location.pathname === '/my/planned') { - fixmystreet.offline.updateCachedReports(); + if ($("html").hasClass("mobile")) { + $(".js-cache-reports").closest(".shadow-wrap").hide(); + fixmystreet.offline.updateCachedReports(); + } else { + $(".js-cache-reports").on("click", function(e) { + e.preventDefault(); + $(".js-cache-reports").closest(".shadow-wrap").hide(); + fixmystreet.offline.updateCachedReports(); + }); + } } // Catch additions and removals from the shortlist diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index c4c3a6df9a3..bb97a6860ce 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -1009,6 +1009,12 @@ html.mobile.js-nav-open #js-menu-open-modal { &.chevron:after { background-position: flip(-16px 0, 0 0); } + + &.offline:after { + background-size: 16px 16px; + background-position: 0 0; + background-image: url("/cobrands/fixmystreet/images/cloud-download.svg"); + } } .sub-area-item {