jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

views: factor out paginator component.

Browse Source 
* Refactor the paginator into a ViewComponent.
* Fix inconsistent spacing between paginator items.
* Fix a bug where the sequential paginator generated the wrong next /
  previous page links in the <link rel="{next|prev}"> tags in the <head>.
* Always include the final page as a hidden html element, so that it can
  be unhidden with custom CSS.
* Make it easier to change the pagination window.
This commit is contained in:
evazion
2021-02-18 00:49:05 -06:00
parent 8b8a3f3836
commit c1805cc4e0
19 changed files with 181 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/components/paginator_component/paginator_component.html+meta_links.erb Normal file
View File

@@ -0,0 +1,9 @@
<% content_for(:html_header) do %>
<% if prev_page.present? %>
<%= tag.link rel: "prev", href: url_for_page(prev_page) %>
<% end %>
<% if next_page.present? %>
<%= tag.link rel: "next", href: url_for_page(next_page) %>
<% end %>
<% end %>

15
app/components/paginator_component/paginator_component.html+numbered.erb Normal file
View File

@@ -0,0 +1,15 @@
<div class="paginator numbered-paginator mt-8 mb-4 space-x-2 flex justify-center items-center">
<%= link_to_page chevron_left_icon, prev_page, class: "paginator-prev", rel: "prev", "data-shortcut": "a left" %>
<% pages.each do |page| %>
<% if page == "..." %>
<%= ellipsis_icon class: "paginator-ellipsis text-muted desktop-only" %>
<% elsif page == current_page %>
<%= tag.span page, class: "paginator-current font-bold" %>
<% else %>
<%= link_to_page page, class: "paginator-page desktop-only" %>
<% end %>
<% end %>
<%= link_to_page chevron_right_icon, next_page, class: "paginator-next", rel: "next", "data-shortcut": "d right" %>
</div>

4
app/components/paginator_component/paginator_component.html+sequential.erb Normal file
View File

@@ -0,0 +1,4 @@
<div class="paginator sequential-paginator mt-8 mb-4 space-x-2 flex justify-center items-center">
<%= link_to_page chevron_left_icon, prev_page, class: "paginator-prev", rel: "prev", "data-shortcut": "a left" %>
<%= link_to_page chevron_right_icon, next_page, class: "paginator-next", rel: "next", "data-shortcut": "d right" %>
</div>

10
app/components/paginator_component/paginator_component.scss Normal file
View File

@@ -0,0 +1,10 @@
.paginator {
> * {
padding: 0.25rem 0.75rem;
}
> a:hover {
background: var(--paginator-arrow-color);
color: var(--paginator-arrow-background-color);
}
}