X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/cb87f02642d0097ebc067ca1f9371dde274a41e3..HEAD:/app/views/notes/_notes_paging_nav.html.erb

diff --git a/app/views/notes/_notes_paging_nav.html.erb b/app/views/notes/_notes_paging_nav.html.erb
index 862eae17c..5209256d6 100644
--- a/app/views/notes/_notes_paging_nav.html.erb
+++ b/app/views/notes/_notes_paging_nav.html.erb
@@ -1,17 +1,36 @@
-<p>
+<nav>
+  <% link_class = "page-link icon-link text-center text-nowrap" %>
+  <ul class="pagination">
+    <% previous_link_content = capture do %>
+      <%= previous_page_svg_tag :class => "flex-shrink-0" %>
+      <%= t(".previous") %>
+    <% end %>
+    <% if @page > 1 %>
+      <li class="page-item">
+        <%= link_to previous_link_content, @params.merge(:page => @page - 1), :class => link_class %>
+      </li>
+    <% else %>
+      <li class="page-item disabled">
+        <%= tag.span previous_link_content, :class => link_class %>
+      </li>
+    <% end %>
 
-<% if @page > 1 %>
-<%= link_to t('changeset.changeset_paging_nav.previous'), @params.merge({ :page => @page - 1 }) %>
-<% else %>
-<%= t('changeset.changeset_paging_nav.previous') %>
-<% end %>
+    <li class="page-item active">
+      <%= tag.span t(".showing_page", :page => @page), :class => link_class %>
+    </li>
 
-| <%= t('changeset.changeset_paging_nav.showing_page', :page => @page) %> |
-
-<% if @notes.size < @page_size %>
-<%= t('changeset.changeset_paging_nav.next') %>
-<% else %>
-<%= link_to t('changeset.changeset_paging_nav.next'), @params.merge({ :page => @page + 1 }) %>
-<% end %>
-
-</p>
+    <% next_link_content = capture do %>
+      <%= t(".next") %>
+      <%= next_page_svg_tag :class => "flex-shrink-0" %>
+    <% end %>
+    <% if @notes.size < @page_size %>
+      <li class="page-item disabled">
+        <%= tag.span next_link_content, :class => link_class %>
+      </li>
+    <% else %>
+      <li class="page-item">
+        <%= link_to next_link_content, @params.merge(:page => @page + 1), :class => link_class %>
+      </li>
+    <% end %>
+  </ul>
+</nav>