-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update pagination according to mockupos
** Why are these changes being introduced: * The GDT project has called for an update to how pagination is shown, across all instances of this app. The details are linked from the ticket below. ** Relevant ticket(s): * https://mitlibraries.atlassian.net/browse/gdt-172 ** How does this address that need: * The visual display of the pagination links is changed, including which data points are included. Importantly, we are moving from a display that uses page numbers to one that uses result counts - so there are changes to the analyzer model to reflect this UI. * We also improve the accessibility of the pagination element by using a nav element, and adding aria labels to make the screen reader output more coherent. * Tests for both the helper and analyzer are also updated to expect the new markup. ** Document any side effects to this change: * The analyzer test gets some additional assertions because of the calculations for the first and last record in the overall range. * The div containing the summary of the current page is still wonky on a screen reader, lacking context in its output: "21 40 of 95" for example. I'd like to ask about this during QA, however, but would encourage the reviewer to listen using VoiceOver to experience it for yourself.
- Loading branch information
1 parent
5c3f4d4
commit 496974c
Showing
6 changed files
with
50 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,19 @@ | ||
.pagination-container { | ||
clear: both; | ||
display: flex; | ||
flex-flow: row nowrap; | ||
justify-content: center; | ||
margin-top: 3em; | ||
|
||
.previous { | ||
text-align: left; | ||
} | ||
|
||
.current { | ||
text-align: center; | ||
border-right: 1px solid black; | ||
margin-right: 0.5em; | ||
padding-right: 0.5em; | ||
} | ||
|
||
.next { | ||
text-align: right; | ||
border-left: 1px solid black; | ||
margin-left: 0.5em; | ||
padding-left: 0.5em; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,15 @@ | ||
module PaginationHelper | ||
def next_url(query_params) | ||
query_params[:page] = @pagination[:next] | ||
link_to results_path(query_params), class: 'btn button-primary' do | ||
"Next page #{content_tag(:span, '', class: 'fa fa-chevron-right')}".html_safe | ||
link_to results_path(query_params), 'aria-label': 'Next page' do | ||
'Next »'.html_safe | ||
end | ||
end | ||
|
||
def prev_url(query_params) | ||
query_params[:page] = @pagination[:prev] | ||
link_to results_path(query_params), class: 'btn button-primary' do | ||
"#{content_tag(:span, '', class: 'fa fa-chevron-left')} Previous page".html_safe | ||
link_to results_path(query_params), 'aria-label': 'Previous page' do | ||
'« Previous'.html_safe | ||
end | ||
end | ||
end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,19 +1,19 @@ | ||
<% return if @pagination.nil? %> | ||
|
||
<div class="gridband layout-3c pagination-container"> | ||
<div class="grid-item previous"> | ||
<nav class="pagination-container" aria-label="Pagination"> | ||
<div class="previous"> | ||
<% if @pagination[:prev] %> | ||
<%= prev_url(@enhanced_query) %> | ||
<% else %> | ||
First page | ||
First | ||
<% end %> | ||
</div> | ||
<div class="grid-item current">Page <%= @pagination[:page] %> of <%= (@pagination[:hits] / 20) + 1 %></div> | ||
<div class="grid-item next"> | ||
<div class="current"><%= @pagination[:start] %> - <%= @pagination[:end] %> of <%= @pagination[:hits] %></div> | ||
<div class="next"> | ||
<% if @pagination[:next] %> | ||
<%= next_url(@enhanced_query) %> | ||
<% else %> | ||
Last page | ||
Last | ||
<% end %> | ||
</div> | ||
</div> | ||
</nav> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters