[offline] On desktop /my/planned don’t cache reports automatically

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

@@ -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();

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.

templates/web/base/my/planned.html

@@ -29,6 +29,12 @@ <h1>[% loc('Your shortlist') %]</h1>
 <div id="js-reports-list">
 [% INCLUDE 'my/_problem-list.html' shortlist = 1 %]
 </div>
+<div class="shadow-wrap hidden-nojs">
+    <ul id="key-tools">
+        <li><a class="offline js-cache-reports" href="#">[% loc("Save to this device for offline use") %]</a></li>
+    </ul>
+</div>
+
 </section>
 
         </div>

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

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 {