mirror of
https://github.com/we-promise/sure.git
synced 2026-04-09 07:14:47 +00:00
9c9459211f
* install pagy * add pagy to controller, display default pagy UI * display hardcoded custom UI to confirm styling * implement custom UI with pagy methods * move pagination into partial * use lucide icons * only display pagination if 2 or more pages are available * add mobile pagination placeholder * use link_to and display greyed out buttons when no prev or next needed * sort transactions by date so grouping works appropriately with pagination * add space between mobile view buttons * remove debugging
58 lines
2.9 KiB
Plaintext
58 lines
2.9 KiB
Plaintext
<!-- start mobile pagination -->
|
|
<div class="flex flex-1 justify-center md:hidden">
|
|
<% if pagy.prev %>
|
|
<%= link_to 'Previous', pagy_url_for(pagy, pagy.prev), class: "relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50" %>
|
|
<% else %>
|
|
<div class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-200" >Previous</div>
|
|
<% end %>
|
|
|
|
<% if pagy.next %>
|
|
<%= link_to 'Next', pagy_url_for(pagy, pagy.next), class: "relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50" %>
|
|
<% else %>
|
|
<div class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-200" >Next</div>
|
|
<% end %>
|
|
</div>
|
|
<!-- end mobile pagination -->
|
|
|
|
<!-- start desktop pagination -->
|
|
<div class="hidden md:-mt-px md:flex">
|
|
<div>
|
|
<% if pagy.prev %>
|
|
<%= link_to pagy_url_for(pagy, pagy.prev), class: "inline-flex items-center px-3 py-3 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" do %>
|
|
<%= lucide_icon("chevron-left", class: "w-5 h-5 text-gray-500") %>
|
|
<% end %>
|
|
<% else %>
|
|
<div class="inline-flex items-center px-3 py-3 text-sm font-medium hover:border-gray-300" >
|
|
<%= lucide_icon("chevron-left", class: "w-5 h-5 text-gray-200") %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<div class="bg-gray-25 rounded-xl">
|
|
<% pagy.series.each do |series_item| %>
|
|
<% if series_item.is_a?(Integer) %>
|
|
<%= link_to pagy_url_for(pagy, series_item), class: "inline-flex items-center px-3 py-3 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" do %>
|
|
<%= series_item %>
|
|
<% end %>
|
|
<% elsif series_item.is_a?(String) %>
|
|
<%= link_to pagy_url_for(pagy, series_item), class: "shadow-lg ring-2 ring-inset ring-gray-200 rounded-xl bg-white inline-flex items-center m-1 px-4 py-2 text-sm font-medium text-gray-900" do %>
|
|
<%= series_item %>
|
|
<% end %>
|
|
<% elsif series_item == :gap %>
|
|
<span class="inline-flex items-center px-3 py-3 text-sm font-medium text-gray-500">...</span>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
<div>
|
|
<% if pagy.next %>
|
|
<%= link_to pagy_url_for(pagy, pagy.next), class: "inline-flex items-center px-3 py-3 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" do %>
|
|
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-500") %>
|
|
<% end %>
|
|
<% else %>
|
|
<div class="inline-flex items-center px-3 py-3 text-sm font-medium hover:border-gray-300" >
|
|
<%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-200") %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<!-- end desktop pagination -->
|