Add previous/next page arrows to newer/older pagination

diff --git a/app/helpers/svg_helper.rb b/app/helpers/svg_helper.rb
index a40fa7086fdf0d1db0a752b99896f8e71f63e7b4..9c02fc1d9e72fa5efca40172debdd16d12aabc81 100644 (file)
--- a/app/helpers/svg_helper.rb
+++ b/app/helpers/svg_helper.rb
@@ -1,4 +1,12 @@
 module SvgHelper
+  def previous_page_svg_tag(**options)
+    adjacent_page_svg_tag(dir == "rtl" ? 1 : -1, **options)
+  end
+
+  def next_page_svg_tag(**options)
+    adjacent_page_svg_tag(dir == "rtl" ? -1 : 1, **options)
+  end
+
   def key_svg_tag(**options)
     border_width = options["border"] ? (options["border-width"] || 1) : 0
     rect_attrs = {
@@ -31,6 +39,17 @@ module SvgHelper
 
   private
 
+  # returns "<" shape if side == -1; ">" if side == 1
+  def adjacent_page_svg_tag(side, **options)
+    height = 15
+    pad = 2
+    segment = (0.5 * height) - pad
+    width = segment + (2 * pad)
+    path_data = "M#{side * (pad - (0.5 * width))},#{pad} l#{side * segment},#{segment} l#{-side * segment},#{segment}"
+    path_tag = tag.path :d => path_data, :fill => "none", :stroke => "currentColor", :"stroke-width" => 1.5
+    tag.svg path_tag, :width => width, :height => height, :viewBox => "-#{0.5 * width} 0 #{width} #{height}", :class => options[:class]
+  end
+
   def stroke_attrs(attrs, prefix)
     attrs.select { |key| key.start_with?(prefix) }.transform_keys { |key| key.delete_prefix(prefix).prepend("stroke") }
   end

diff --git a/app/views/shared/_pagination.html.erb b/app/views/shared/_pagination.html.erb
index fbb9dcf43321ccfc11abbdbd4771732942c451be..3a60003626725b7c7ae8a88fc40f159c293d8089 100644 (file)
--- a/app/views/shared/_pagination.html.erb
+++ b/app/views/shared/_pagination.html.erb
@@ -1,22 +1,31 @@
 <nav>
+  <% link_class = "page-link d-flex align-items-center gap-2 text-center" %>
   <ul class="pagination">
+    <% newer_link_content = capture do %>
+      <%= previous_page_svg_tag :class => "flex-shrink-0 d-none d-sm-block" %>
+      <%= t(newer_key) %>
+    <% end %>
     <% if newer_id -%>
-      <li class="page-item">
-        <%= link_to t(newer_key), @params.merge(:before => nil, :after => newer_id), :class => "page-link" %>
+      <li class="page-item d-flex">
+        <%= link_to newer_link_content, @params.merge(:before => nil, :after => newer_id), :class => link_class %>
       </li>
     <% else -%>
-      <li class="page-item disabled">
-        <span class="page-link"><%= t(newer_key) %></span>
+      <li class="page-item d-flex disabled">
+        <%= tag.span newer_link_content, :class => link_class %>
       </li>
     <% end -%>
 
+    <% older_link_content = capture do %>
+      <%= t(older_key) %>
+      <%= next_page_svg_tag :class => "flex-shrink-0 d-none d-sm-block" %>
+    <% end %>
     <% if older_id -%>
-      <li class="page-item">
-        <%= link_to t(older_key), @params.merge(:before => older_id, :after => nil), :class => "page-link" %>
+      <li class="page-item d-flex">
+        <%= link_to older_link_content, @params.merge(:before => older_id, :after => nil), :class => link_class %>
       </li>
     <% else -%>
-      <li class="page-item disabled">
-        <span class="page-link"><%= t(older_key) %></span>
+      <li class="page-item d-flex disabled">
+        <%= tag.span older_link_content, :class => link_class %>
       </li>
     <% end -%>
   </ul>