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 { initAll as GOVUKFrontend } from 'govuk-frontend' |
||||||
import GOVUKPrototypeComponents from 'govuk-prototype-components' |
import { initAll as GOVUKPrototypeComponents } from 'govuk-prototype-components' |
||||||
import { Controller } from '@hotwired/stimulus' |
import { Controller } from '@hotwired/stimulus' |
||||||
|
|
||||||
export default class extends Controller { |
export default class extends Controller { |
||||||
connect () { |
connect () { |
||||||
GOVUKFrontend.initAll() |
GOVUKFrontend() |
||||||
GOVUKPrototypeComponents.initAll() |
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 %> |
<% if pagy.pages > 1 %> |
||||||
<nav class="app-pagination" id="pagination-label" aria-label="results navigation"> |
<p class="govuk-body"> |
||||||
<ul class="app-pagination__list"> |
Showing <b><%= pagy.from %></b> to <b><%= pagy.to %></b> of <b><%= pagy.count %></b> <%= item_name %> |
||||||
<li class="app-pagination__item app-pagination__item--prev"> |
</p> |
||||||
<% 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"> |
|
||||||
Showing <b><%= pagy.from %></b> to <b><%= pagy.to %></b> of <b><%= pagy.count %></b> <%= item_name %> |
|
||||||
</p> |
|
||||||
</nav> |
|
||||||
<% end %> |
<% end %> |
||||||
|
|||||||
Loading…
Reference in new issue