Browse Source
* Update govuk-frontend to v4.2.0 * Update govuk-components to v3.1.1 * Replace pagination component with govuk_pagination * Update pagination tests * Remove pagy dependency Pagy is bundled with the govuk-components gempull/698/head
Paul Robert Lloyd
3 years ago
committed by
GitHub
12 changed files with 2013 additions and 343 deletions
@ -1,10 +1,10 @@
|
||||
import GOVUKFrontend from 'govuk-frontend' |
||||
import GOVUKPrototypeComponents from 'govuk-prototype-components' |
||||
import { initAll as GOVUKFrontend } from 'govuk-frontend' |
||||
import { initAll as GOVUKPrototypeComponents } from 'govuk-prototype-components' |
||||
import { Controller } from '@hotwired/stimulus' |
||||
|
||||
export default class extends Controller { |
||||
connect () { |
||||
GOVUKFrontend.initAll() |
||||
GOVUKPrototypeComponents.initAll() |
||||
GOVUKFrontend() |
||||
GOVUKPrototypeComponents() |
||||
} |
||||
} |
||||
|
||||
@ -1,134 +0,0 @@
|
||||
// https://github.com/alphagov/govuk-frontend/blob/add-pagination-prototype/src/govuk/components/pagination/_index.scss |
||||
.app-pagination { |
||||
border-top: 1px solid $govuk-border-colour; |
||||
margin-top: govuk-spacing(2); |
||||
padding-top: govuk-spacing(2); |
||||
text-align: center; |
||||
|
||||
@include govuk-media-query($from: tablet) { |
||||
// Hide whitespace between elements |
||||
font-size: 0; |
||||
|
||||
// Trick to remove the need for floats |
||||
text-align: justify; |
||||
|
||||
&:after { |
||||
content: " "; |
||||
display: inline-block; |
||||
width: 100%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.app-pagination__list { |
||||
margin: 0 govuk-spacing(-3); |
||||
padding: 0; |
||||
list-style: none; |
||||
|
||||
@include govuk-media-query($from: tablet) { |
||||
display: inline-block; |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
|
||||
.app-pagination__results { |
||||
@include govuk-font(19); |
||||
margin-top: 0; |
||||
margin-bottom: govuk-spacing(4); |
||||
padding: govuk-spacing(1) 0; |
||||
|
||||
@include govuk-media-query($from: tablet) { |
||||
display: inline-block; |
||||
} |
||||
} |
||||
|
||||
.app-pagination__item { |
||||
@include govuk-font(19); |
||||
display: inline-block; |
||||
margin-bottom: govuk-spacing(4); |
||||
|
||||
// Hide items on small screens |
||||
@include govuk-media-query($until: tablet) { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
// Only show previous, next, first, last and current items on mobile |
||||
.app-pagination__item--current, |
||||
.app-pagination__item--divider, |
||||
.app-pagination__item--prev, |
||||
.app-pagination__item--next, |
||||
.app-pagination__item:nth-child(2), |
||||
.app-pagination__item:nth-last-child(2) { |
||||
@include govuk-media-query($until: tablet) { |
||||
display: inline-block; |
||||
} |
||||
} |
||||
|
||||
.app-pagination__item--current, |
||||
.app-pagination__item--divider { |
||||
box-sizing: border-box; |
||||
font-weight: bold; |
||||
min-width: govuk-spacing(8); |
||||
min-height: govuk-spacing(4); |
||||
padding: govuk-spacing(2); |
||||
text-align: center; |
||||
} |
||||
|
||||
.app-pagination__item--divider { |
||||
margin: 0 govuk-spacing(-4); |
||||
padding-right: 0; |
||||
padding-left: 0; |
||||
color: $govuk-secondary-text-colour; |
||||
pointer-events: none; |
||||
} |
||||
|
||||
.app-pagination__link { |
||||
@include govuk-link-common; |
||||
@include govuk-link-style-no-underline; |
||||
box-sizing: border-box; |
||||
color: $govuk-link-colour; |
||||
display: block; |
||||
min-width: govuk-spacing(8); |
||||
min-height: govuk-spacing(4); |
||||
padding: govuk-spacing(2); |
||||
text-align: center; |
||||
|
||||
.app-pagination__link-label { |
||||
@include govuk-font($size: 16, $weight: "regular"); |
||||
display: block; |
||||
padding-left: 32px; |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
&:hover .app-pagination__link-label { |
||||
@include govuk-link-hover-decoration; |
||||
} |
||||
|
||||
&:focus { |
||||
box-shadow: 0 0 $govuk-focus-colour, 0 4px $govuk-focus-text-colour; |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
&:hover:not(:focus) { |
||||
background-color: govuk-colour("light-grey", $legacy: "grey-4"); |
||||
} |
||||
} |
||||
|
||||
.app-pagination__icon { |
||||
fill: currentcolor; |
||||
} |
||||
|
||||
.app-pagination__item--prev .app-pagination__link, |
||||
.app-pagination__item--next .app-pagination__link { |
||||
padding: govuk-spacing(2) govuk-spacing(3); |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.app-pagination__item--prev .app-pagination__icon { |
||||
margin-right: govuk-spacing(2); |
||||
} |
||||
|
||||
.app-pagination__item--next .app-pagination__icon { |
||||
margin-left: govuk-spacing(2); |
||||
} |
||||
@ -1,41 +1,6 @@
|
||||
<% link = pagy_link_proc(pagy) -%> |
||||
<%= govuk_pagination(pagy:) %> |
||||
<% if pagy.pages > 1 %> |
||||
<nav class="app-pagination" id="pagination-label" aria-label="results navigation"> |
||||
<ul class="app-pagination__list"> |
||||
<li class="app-pagination__item app-pagination__item--prev"> |
||||
<% if pagy.prev %> |
||||
<a class="app-pagination__link" href="<%= "#{request.path}?page=#{pagy.prev}" %>"> |
||||
<% end %> |
||||
<span class="app-pagination__link-title"> |
||||
<svg class="app-pagination__icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17"> |
||||
<path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path> |
||||
</svg>Previous |
||||
<span class="govuk-visually-hidden">page</span> |
||||
</span></a> |
||||
</li> |
||||
<% pagy.series.each do |item| %> |
||||
<% if item == :gap %> |
||||
<li class="app-pagination__item app-pagination__item--ellipses">…</li> |
||||
<% elsif item.is_a?(String) %> |
||||
<li class="app-pagination__item app-pagination__item--current"><span class="govuk-visually-hidden">Page </span><%= item %><span class="govuk-visually-hidden"> (current page) </span></li> |
||||
<% else %> |
||||
<li class="app-pagination__item"><a class="app-pagination__link" href="<%= "#{request.path}?page=#{item}" %>"><span class="govuk-visually-hidden">Page </span><%= item %></a></li> |
||||
<% end %> |
||||
<% end %> |
||||
<li class="app-pagination__item app-pagination__item--next"> |
||||
<% if pagy.next %> |
||||
<a class="app-pagination__link" href="<%= "#{request.path}?page=#{pagy.next}" %>"> |
||||
<% end %> |
||||
Next <span class="govuk-visually-hidden">page</span> |
||||
<span class="app-pagination__link-title"> |
||||
<svg class="app-pagination__icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17"> |
||||
<path d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path> |
||||
</svg> |
||||
</span></a> |
||||
</li> |
||||
</ul> |
||||
<p class="app_pagination__results"> |
||||
<p class="govuk-body"> |
||||
Showing <b><%= pagy.from %></b> to <b><%= pagy.to %></b> of <b><%= pagy.count %></b> <%= item_name %> |
||||
</p> |
||||
</nav> |
||||
<% end %> |
||||
|
||||
Loading…
Reference in new issue