edshot99/eBooru
1
0
Fork 0
forked from e621ng/e621ng
Code Issues 11 Releases 1 Activity

[Pagination] Fix overflow, usability, and accessibility issues (#898)

Browse Source
This commit is contained in:
Cinder 2025-02-06 21:46:20 -08:00 committed by GitHub
parent eb40bd6a99
commit a7a2d37a6b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 55 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
app/helpers/pagination_helper.rb
View File

@ -2,22 +2,13 @@
module PaginationHelper
def sequential_paginator(records)
tag.div(class: "paginator") do
tag.nav(class: "pagination sequential", aria: { label: "Pagination" }) do
return "" if records.try(:none?)
html = "".html_safe
# Previous
html << link_to(records.is_first_page? ? "#" : nav_params_for("a#{records[0].id}"), class: "prev", id: "paginator-prev", rel: "prev", data: { shortcut: "a left", disabled: records.is_first_page? }) do
concat svg_icon(:chevron_left)
concat tag.span("Prev")
end
# Next
html << link_to(records.is_last_page? ? "#" : nav_params_for("b#{records[-1].id}"), class: "next", id: "paginator-next", rel: "next", data: { shortcut: "d right", disabled: records.is_last_page? }) do
concat tag.span("Next")
concat svg_icon(:chevron_right)
end
html << paginator_prev(nav_params_for("a#{records[0].id}"), disabled: records.is_first_page?)
html << paginator_next(nav_params_for("b#{records[-1].id}"), disabled: records.is_last_page?)
html
end
@ -28,15 +19,11 @@ module PaginationHelper
return sequential_paginator(records)
end
tag.div(class: "paginator", data: { total: [records.total_pages, records.max_numbered_pages].min, current: records.current_page }) do
tag.nav(class: "pagination numbered", aria: { label: "Pagination" }, data: { total: [records.total_pages, records.max_numbered_pages].min, current: records.current_page }) do
html = "".html_safe
# Previous
has_prev = records.current_page < 2
html << link_to(has_prev ? "#" : nav_params_for(records.current_page - 1), class: "prev", id: "paginator-prev", rel: "prev", data: { shortcut: "a left", disabled: has_prev }) do
concat svg_icon(:chevron_left)
concat tag.span("Prev")
end
html << paginator_prev(nav_params_for(records.current_page - 1), disabled: records.current_page < 2)
# Break
html << tag.div(class: "break")
@ -47,11 +34,7 @@ module PaginationHelper
end
# Next
has_next = records.current_page >= records.total_pages
html << link_to(has_next ? "#" : nav_params_for(records.current_page + 1), class: "next", id: "paginator-next", rel: "next", data: { shortcut: "d right", disabled: has_next }) do
concat tag.span("Next")
concat svg_icon(:chevron_right)
end
html << paginator_next(nav_params_for(records.current_page + 1), disabled: records.current_page >= records.total_pages)
html
end
@ -59,6 +42,42 @@ module PaginationHelper
private
def paginator_prev(link, disabled: false)
html = "".html_safe
if disabled
html << tag.span(class: "prev", id: "paginator-prev", data: { shortcut: "a left" }) do
concat svg_icon(:chevron_left)
concat tag.span("Prev")
end
else
html << link_to(link, class: "prev", id: "paginator-prev", rel: "prev", data: { shortcut: "a left" }) do
concat svg_icon(:chevron_left)
concat tag.span("Prev")
end
end
html
end
def paginator_next(link, disabled: false)
html = "".html_safe
if disabled
html << tag.span(class: "next", id: "paginator-next", data: { shortcut: "a left" }) do
concat tag.span("Next")
concat svg_icon(:chevron_right)
end
else
html << link_to(link, class: "next", id: "paginator-prev", rel: "next", data: { shortcut: "a left" }) do
concat tag.span("Next")
concat svg_icon(:chevron_right)
end
end
html
end
def paginator_pages(records)
small_window = 2
large_window = 4
@ -90,7 +109,7 @@ module PaginationHelper
if page == 0
html << link_to(svg_icon(:ellipsis), nav_params_for(0), class: "spacer")
elsif page == records.current_page
html << tag.span(page, class: "page current")
html << tag.span(page, class: "page current", aria: { current: "page" })
else
html << link_to(page, nav_params_for(page), class: "page #{klass}")
end

2
app/javascript/src/javascripts/paginator.js
View File

@ -12,7 +12,7 @@ Paginator.init_fasttravel = function (button) {
};
$(() => {
for (const one of $(".paginator a.spacer").get())
for (const one of $("nav.pagination a.spacer").get())
Paginator.init_fasttravel($(one));
});

15
app/javascript/src/styles/common/paginator.scss
View File

@ -1,4 +1,4 @@
.paginator {
nav.pagination {
display: flex;
flex-wrap: wrap;
@ -8,6 +8,7 @@
width: max-content;
margin: 0 auto;
max-width: calc(100vw - 1rem);
& > a, & > span {
display: flex;
@ -27,9 +28,8 @@
}
}
& > a[data-disabled="true"] {
color: var(--color-text);
pointer-events: none;
span.prev, span.next {
cursor: default;
}
// Ordering
@ -99,3 +99,10 @@
a.page.lg { display: flex; }
}
}
// Sequential paginator
.paginator.sequential {
gap: 5rem;
a span { display: block; }
}