Stop loading spinner covering map.

A full modal made it hard to perform multiple zooms/pans, making
the site slower to use than necessary. Tell the user the site is
updating, but let them interact with the map at the same time.

4 files changed, 27 insertions, 21 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fa06d8ccf..fbf31b352 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
         - Improved email/phone management in your profile.
         - Area summary statistics page in admin #1834
         - Allow multiple wards to be shown on reports page
+        - Don't cover whole map with pin loading indicator.
     - Bugfixes
         - Shortlist menu item always remains a link #1855
         - Fix encoded entities in RSS output. #1859
diff --git a/templates/web/base/maps/openlayers.html b/templates/web/base/maps/openlayers.html
index 8f8d527e2..568a87e7c 100644
--- a/templates/web/base/maps/openlayers.html
+++ b/templates/web/base/maps/openlayers.html
@@ -36,6 +36,4 @@
     [% IF map.copyright %]
     <div class="olControlAttribution" style="position: absolute;">[% map.copyright %]</div>
     [% END %]
-    <div id="loading-indicator" class="hidden" aria-hidden="true">
-        <img src="/i/loading.svg" alt="Loading..." />
-    </div>
+    <img id="loading-indicator" class="hidden" aria-hidden="true" src="/i/loading.svg" alt="Loading...">
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 9d6052c45..b13dc636a 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1626,24 +1626,6 @@ html.js #map .noscript {
   }
 }
 
-// Loading indicator
-
-#loading-indicator {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: #000;
-  opacity: 0.4;
-  text-align: center;
-
-  img {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-
 .big-green-banner {
   position: relative;
   top: -1.75em;
@@ -1786,6 +1768,23 @@ a:hover.rap-notes-trigger {
   }
 }
 
+#loading-indicator {
+  height: 32px;
+  width: 32px;
+  position: relative;
+  background-color: #333;
+  border-radius: 0.25em;
+  padding: 0.25em;
+  // Offset from top same as fms_pan_zoom, from left so as not
+  // to appear on top of zoom buttons (0.5em, 36px, 0.5em)
+  top: 0.5em;
+  left: 3.25em;
+  .map-reporting & {
+    // Same as fms_pan_zoom above, leaving space for the top bar when reporting
+    top: 2.75em;
+  }
+}
+
 /* Reporting a problem bits */
 
 label .muted {
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index a0c27863e..5a78ff4d5 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -720,6 +720,14 @@ body.authpage {
     margin-bottom: 0;
 }
 
+#loading-indicator {
+  height: 64px;
+  width: 64px;
+  background-color: rgba(0, 0, 0, 0.7);
+  // Reset the base left, as zoom buttons now elsewhere
+  left: 0.5em;
+}
+
 .big-green-banner {
   top: auto;
   margin: (-1em/1.375) (-1em/1.375) 0 (-1em/1.375);