Style publications page pagination controls

Add styling to the pagination controls to look similar to the pagination theme that is used in Whitehall publisher (which is done in a more complicated way there—trying to do it a bit more simply).
alphagov · Aug 28, 2024 · 83ee341 · 83ee341
1 parent 03b62a6
commit 83ee341
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 0 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -20,6 +20,7 @@ $govuk-page-width: 1140px;
 @import 'govuk_publishing_components/components/layout-header';
 @import 'govuk_publishing_components/components/lead-paragraph';
 @import 'govuk_publishing_components/components/notice';
+@import 'govuk_publishing_components/components/previous-and-next-navigation';
 @import 'govuk_publishing_components/components/search';
 @import 'govuk_publishing_components/components/skip-link';
 @import 'govuk_publishing_components/components/success-alert';

diff --git a/app/assets/stylesheets/publications-table.scss b/app/assets/stylesheets/publications-table.scss
@@ -80,3 +80,7 @@
     }
   }
 }
+
+.govuk-pagination__item--current {
+  color: govuk-colour("white");
+}
diff --git a/app/views/kaminari/_first_page.html.erb b/app/views/kaminari/_first_page.html.erb
@@ -0,0 +1,11 @@
+<%# Link to the "First" page
+  - available local variables
+    url:           url to the first page
+    current_page:  a page object for the currently displayed page
+    total_pages:   total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<span class="govuk-pagination__prev">
+  <%= link_to_unless current_page.first?, t("views.pagination.first").html_safe, url, remote: remote, class: "govuk-link govuk-link--no-visited-state" %>
+</span>
diff --git a/app/views/kaminari/_gap.html.erb b/app/views/kaminari/_gap.html.erb
@@ -0,0 +1,8 @@
+<%# Non-link tag that stands for skipped pages...
+  - available local variables
+    current_page:  a page object for the currently displayed page
+    total_pages:   total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<span class="govuk-pagination__item govuk-pagination__item--ellipses"><%= t("views.pagination.truncate").html_safe %></span>
diff --git a/app/views/kaminari/_last_page.html.erb b/app/views/kaminari/_last_page.html.erb
@@ -0,0 +1,11 @@
+<%# Link to the "Last" page
+  - available local variables
+    url:           url to the last page
+    current_page:  a page object for the currently displayed page
+    total_pages:   total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<span class="govuk-pagination__next">
+  <%= link_to_unless current_page.last?, t("views.pagination.last").html_safe, url, remote: remote, class: "govuk-link govuk-link--no-visited-state" %>
+</span>
diff --git a/app/views/kaminari/_next_page.html.erb b/app/views/kaminari/_next_page.html.erb
@@ -0,0 +1,11 @@
+<%# Link to the "Next" page
+  - available local variables
+    url:           url to the next page
+    current_page:  a page object for the currently displayed page
+    total_pages:   total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<span class="govuk-pagination__next">
+  <%= link_to_unless current_page.last?, t("views.pagination.next").html_safe, url, rel: "next", remote: remote, class: "govuk-link govuk-link--no-visited-state" %>
+</span>
diff --git a/app/views/kaminari/_page.html.erb b/app/views/kaminari/_page.html.erb
@@ -0,0 +1,12 @@
+<%# Link showing page number
+  - available local variables
+    page:          a page object for "this" page
+    url:           url to this page
+    current_page:  a page object for the currently displayed page
+    total_pages:   total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<span class="govuk-pagination__item<%= " govuk-pagination__item--current" if page.current? %>">
+  <%= link_to_unless page.current?, page, url, {remote: remote, rel: page.rel, class: "govuk-link govuk-link--no-visited-state"} %>
+</span>
diff --git a/app/views/kaminari/_paginator.html.erb b/app/views/kaminari/_paginator.html.erb
@@ -0,0 +1,25 @@
+<%# The container tag
+  - available local variables
+    current_page:  a page object for the currently displayed page
+    total_pages:   total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+    paginator:     the paginator that renders the pagination tags inside
+-%>
+<%= paginator.render do -%>
+  <nav class="govuk-pagination" role="navigation" aria-label="pager">
+    <%= first_page_tag unless current_page.first? %>
+    <%= prev_page_tag unless current_page.first? %>
+    <% each_page do |page| -%>
+      <% if page.display_tag? -%>
+        <%= page_tag page %>
+      <% elsif !page.was_truncated? -%>
+        <%= gap_tag %>
+      <% end -%>
+    <% end -%>
+    <% unless current_page.out_of_range? %>
+      <%= next_page_tag unless current_page.last? %>
+      <%= last_page_tag unless current_page.last? %>
+    <% end %>
+  </nav>
+<% end -%>
diff --git a/app/views/kaminari/_prev_page.html.erb b/app/views/kaminari/_prev_page.html.erb
@@ -0,0 +1,11 @@
+<%# Link to the "Previous" page
+  - available local variables
+    url:           url to the previous page
+    current_page:  a page object for the currently displayed page
+    total_pages:   total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<span class="govuk-pagination__prev">
+  <%= link_to_unless current_page.first?, t("views.pagination.previous").html_safe, url, rel: "prev", remote: remote, class: "govuk-link govuk-link--no-visited-state" %>
+</span>
-Original file line number
+Diff line change
@@ Expand Up / @@ -80,3 +80,7 @@ @@
         }
       }
     }
+    .govuk-pagination__item--current {
+      color: govuk-colour("white");
+    }