Merge pull request #3779 from AntonKhorev/spinner

Replace searching.gif images with Bootstrap spinners

diff --git a/app/assets/images/searching.gif b/app/assets/images/searching.gif
deleted file mode 100644 (file)
index b1451fd..0000000
Binary files a/app/assets/images/searching.gif and /dev/null differ

diff --git a/app/assets/javascripts/osm.js.erb b/app/assets/javascripts/osm.js.erb
index 352f5d48c468e07ba282e1fdadc1017db7b97325..89f14caee6545ce00ce5034e676d71c021727546 100644 (file)
--- a/app/assets/javascripts/osm.js.erb
+++ b/app/assets/javascripts/osm.js.erb
@@ -35,8 +35,6 @@ OSM = {
   OPEN_NOTE_MARKER:        <%= image_path("open_note_marker.png").to_json %>,
   CLOSED_NOTE_MARKER:      <%= image_path("closed_note_marker.png").to_json %>,
 
-  SEARCHING:               <%= image_path("searching.gif").to_json %>,
-
   apiUrl: function (object) {
     var apiType = object.type === "note" ? "notes" : object.type;
     var url = "/api/" + OSM.API_VERSION + "/" + apiType + "/" + object.id;

diff --git a/app/assets/javascripts/user.js b/app/assets/javascripts/user.js
index 8e4410fcee0568d04e2297a178205c60df144454..14da8f300497cc8fd0497616a0ef1d21923b95ae 100644 (file)
--- a/app/assets/javascripts/user.js
+++ b/app/assets/javascripts/user.js
@@ -123,7 +123,7 @@ $(document).ready(function () {
   $("input[name=legale]").change(function () {
     var url = $(this).data("url");
 
-    $("#contributorTerms").html("<img src='" + OSM.SEARCHING + "' />");
+    $("#contributorTerms").html("<div class='spinner-border' role='status'><span class='visually-hidden'>" + I18n.t("browse.start_rjs.loading") + "</span></div>");
     $("#contributorTerms").load(url);
   });
 

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 27458c6efb428093bc69f58d9e02cf31ed5835e3..5a197d9b1be58f801df5d0b22518c971eff19dc6 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -681,21 +681,6 @@ body.small-nav {
   }
 }
 
-#sidebar {
-  #sidebar_loader,
-  .search_more {
-    width: 100%;
-    margin: $lineheight auto;
-  }
-
-  .loader {
-    text-align: center;
-    margin: auto;
-    width: 40px;
-    display: block;
-  }
-}
-
 /* Temporary label size override until we remove site-wide font customisation */
 
 form {
@@ -753,7 +738,6 @@ header .search_forms,
 
   .search_more .loader {
     display: none;
-    width: 100%;
   }
 }
 
@@ -1336,14 +1320,6 @@ tr.turn:hover {
 
 .directions_form {
   background-color: $lightgrey;
-
-  .loader_copy {
-    display: none;
-
-    img {
-      vertical-align: middle;
-    }
-  }
 }
 
 /* Rules for user images */

diff --git a/app/views/browse/query.html.erb b/app/views/browse/query.html.erb
index 53eca97477b424b0e98a1829f81f36aff60d73a3..25b0cac141851a6bb837059a0638708365019f4b 100644 (file)
--- a/app/views/browse/query.html.erb
+++ b/app/views/browse/query.html.erb
@@ -8,7 +8,11 @@
 
 <div id="query-nearby" class="query-results">
   <h3><%= t(".nearby") %></h3>
-  <%= image_tag "searching.gif", :class => "loader" %>
+  <div class="text-center loader">
+    <div class="spinner-border" role="status">
+      <span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>
+    </div>
+  </div>
   <div class="mx-n3">
     <ul class="query-results-list list-group list-group-flush"></ul>
   </div>
@@ -16,7 +20,11 @@
 
 <div id="query-isin" class="query-results">
   <h3><%= t(".enclosing") %></h3>
-  <%= image_tag "searching.gif", :class => "loader" %>
+  <div class="text-center loader">
+    <div class="spinner-border" role="status">
+      <span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>
+    </div>
+  </div>
   <div class="mx-n3">
     <ul class="query-results-list list-group list-group-flush"></ul>
   </div>

diff --git a/app/views/changesets/history.html.erb b/app/views/changesets/history.html.erb
index b601057f6f1280ba780a15bb67271268e77cd51b..b114539589c75abe3f1245c06c64a15bd35bd968 100644 (file)
--- a/app/views/changesets/history.html.erb
+++ b/app/views/changesets/history.html.erb
@@ -14,5 +14,9 @@
 <%= render "sidebar_header", :title => @heading %>
 
 <div class="changesets mx-n3">
-  <%= image_tag "searching.gif", :class => "loader" %>
+  <div class="text-center loader">
+    <div class="spinner-border" role="status">
+      <span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>
+    </div>
+  </div>
 </div>

diff --git a/app/views/changesets/index.html.erb b/app/views/changesets/index.html.erb
index 3ead2abdaed529b60da4a8a5d34d2ceec9270cc3..43f194522e1c3426ac1de750a85c3efddf67e90a 100644 (file)
--- a/app/views/changesets/index.html.erb
+++ b/app/views/changesets/index.html.erb
@@ -5,7 +5,11 @@
 <% if @changesets.size == 20 -%>
   <div class="changeset_more mt-3 text-center">
     <%= link_to t(".load_more"), url_for(@params.merge(:max_id => @changesets.last.id - 1)), :class => "btn btn-primary" %>
-    <div class="loader"><%= image_tag "searching.gif" %></div>
+    <div class="text-center loader">
+      <div class="spinner-border" role="status">
+        <span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>
+      </div>
+    </div>
   </div>
 <% end -%>
 <% elsif params[:bbox] %>

diff --git a/app/views/geocoder/results.html.erb b/app/views/geocoder/results.html.erb
index e05aa29ad842dbdde324e04baa792d1be65bf514..fc213831895d264edb840b95475f65a3077a3929 100644 (file)
--- a/app/views/geocoder/results.html.erb
+++ b/app/views/geocoder/results.html.erb
@@ -11,9 +11,13 @@
     <% end %>
   </ul>
   <% if @more_params %>
-    <div class="search_more text-center">
+    <div class="search_more text-center my-3">
       <%= link_to t(".more_results"), url_for(@more_params), :class => "btn btn-primary" %>
-      <div class="loader"><%= image_tag "searching.gif" %></div>
+      <div class="text-center loader">
+        <div class="spinner-border" role="status">
+          <span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>
+        </div>
+      </div>
     </div>
   <% end %>
 <% end %>

diff --git a/app/views/geocoder/search.html.erb b/app/views/geocoder/search.html.erb
index 8502227de49c60a0d5ca4a97ad80ab159ee43292..ceb099421a1ee2ef6e1cbf878b489a6669411b41 100644 (file)
--- a/app/views/geocoder/search.html.erb
+++ b/app/views/geocoder/search.html.erb
@@ -5,6 +5,10 @@
 <% @sources.each do |source| %>
   <h4><%= t(".title.#{source}_html") %></h4>
   <div class="search_results_entry mx-n3" data-href="<%= url_for @params.merge(:action => "search_#{source}") %>">
-    <%= image_tag "searching.gif", :class => "loader" %>
+    <div class="text-center loader">
+      <div class="spinner-border" role="status">
+        <span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>
+      </div>
+    </div>
   </div>
 <% end %>

diff --git a/app/views/layouts/_search.html.erb b/app/views/layouts/_search.html.erb
index e7cae0471c9d58c8ebc566e5aecba16765eb405b..31386b1ab291dc30408c8597a002bf7bd45b81ab 100644 (file)
--- a/app/views/layouts/_search.html.erb
+++ b/app/views/layouts/_search.html.erb
@@ -51,6 +51,12 @@
       </div>
     </div>
 
-    <div class="loader_copy"><div class="loader"><%= image_tag "searching.gif" %></div></div>
+    <div class="loader_copy d-none">
+      <div class="text-center loader">
+        <div class="spinner-border" role="status">
+          <span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>
+        </div>
+      </div>
+    </div>
   </form>
 </div>

diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb
index 816f90c70e11d1b83b677bb2ce71c0b5acfebc12..b3c85d918343a8bda723390035b5c0411be012f6 100644 (file)
--- a/app/views/layouts/map.html.erb
+++ b/app/views/layouts/map.html.erb
@@ -30,8 +30,10 @@
 
     <div id="browse_status"></div>
 
-    <div id="sidebar_loader">
-      <img alt="<%= t("browse.start_rjs.loading") %>" class="loader" src="<%= image_path("searching.gif") %>">
+    <div id="sidebar_loader" class="my-3 text-center loader">
+      <div class="spinner-border" role="status">
+        <span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>
+      </div>
     </div>
 
     <div id="sidebar_content">