Browse Source

Update style namespace

pull/438/head
baarkerlounger 3 years ago
parent
commit
761a8754f3
  1. 43
      app/frontend/styles/_pagination.scss
  2. 24
      app/views/pagy/_nav.html.erb

43
app/frontend/styles/_pagination.scss

@ -1,5 +1,6 @@
// https://github.com/alphagov/govuk-frontend/blob/add-pagination-prototype/src/govuk/components/pagination/_index.scss // https://github.com/alphagov/govuk-frontend/blob/add-pagination-prototype/src/govuk/components/pagination/_index.scss
.govuk-pagination { .app-pagination {
border-top: 1px solid $govuk-border-colour; border-top: 1px solid $govuk-border-colour;
margin-top: govuk-spacing(2); margin-top: govuk-spacing(2);
padding-top: govuk-spacing(2); padding-top: govuk-spacing(2);
@ -20,7 +21,7 @@
} }
} }
.govuk-pagination__list { .app-pagination__list {
margin: 0 govuk-spacing(-3); margin: 0 govuk-spacing(-3);
padding: 0; padding: 0;
list-style: none; list-style: none;
@ -31,7 +32,7 @@
} }
} }
.govuk-pagination__results { .app-pagination__results {
@include govuk-font(19); @include govuk-font(19);
margin-top: 0; margin-top: 0;
margin-bottom: govuk-spacing(4); margin-bottom: govuk-spacing(4);
@ -42,7 +43,7 @@
} }
} }
.govuk-pagination__item { .app-pagination__item {
@include govuk-font(19); @include govuk-font(19);
display: inline-block; display: inline-block;
margin-bottom: govuk-spacing(4); margin-bottom: govuk-spacing(4);
@ -54,19 +55,19 @@
} }
// Only show previous, next, first, last and current items on mobile // Only show previous, next, first, last and current items on mobile
.govuk-pagination__item--current, .app-pagination__item--current,
.govuk-pagination__item--divider, .app-pagination__item--divider,
.govuk-pagination__item--prev, .app-pagination__item--prev,
.govuk-pagination__item--next, .app-pagination__item--next,
.govuk-pagination__item:nth-child(2), .app-pagination__item:nth-child(2),
.govuk-pagination__item:nth-last-child(2) { .app-pagination__item:nth-last-child(2) {
@include govuk-media-query($until: tablet) { @include govuk-media-query($until: tablet) {
display: inline-block; display: inline-block;
} }
} }
.govuk-pagination__item--current, .app-pagination__item--current,
.govuk-pagination__item--divider { .app-pagination__item--divider {
box-sizing: border-box; box-sizing: border-box;
font-weight: bold; font-weight: bold;
min-width: govuk-spacing(8); min-width: govuk-spacing(8);
@ -75,7 +76,7 @@
text-align: center; text-align: center;
} }
.govuk-pagination__item--divider { .app-pagination__item--divider {
margin: 0 govuk-spacing(-4); margin: 0 govuk-spacing(-4);
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;
@ -83,7 +84,7 @@
pointer-events: none; pointer-events: none;
} }
.govuk-pagination__link { .app-pagination__link {
@include govuk-link-common; @include govuk-link-common;
@include govuk-link-style-no-underline; @include govuk-link-style-no-underline;
box-sizing: border-box; box-sizing: border-box;
@ -94,14 +95,14 @@
padding: govuk-spacing(2); padding: govuk-spacing(2);
text-align: center; text-align: center;
.govuk-pagination__link-label { .app-pagination__link-label {
@include govuk-font($size: 16, $weight: "regular"); @include govuk-font($size: 16, $weight: "regular");
display: block; display: block;
padding-left: 32px; padding-left: 32px;
text-decoration: underline; text-decoration: underline;
} }
&:hover .govuk-pagination__link-label { &:hover .app-pagination__link-label {
@include govuk-link-hover-decoration; @include govuk-link-hover-decoration;
} }
@ -115,20 +116,20 @@
} }
} }
.govuk-pagination__icon { .app-pagination__icon {
fill: currentColor; fill: currentColor;
} }
.govuk-pagination__item--prev .govuk-pagination__link, .app-pagination__item--prev .app-pagination__link,
.govuk-pagination__item--next .govuk-pagination__link { .app-pagination__item--next .app-pagination__link {
padding: govuk-spacing(2) govuk-spacing(3); padding: govuk-spacing(2) govuk-spacing(3);
font-weight: bold; font-weight: bold;
} }
.govuk-pagination__item--prev .govuk-pagination__icon { .app-pagination__item--prev .app-pagination__icon {
margin-right: govuk-spacing(2); margin-right: govuk-spacing(2);
} }
.govuk-pagination__item--next .govuk-pagination__icon { .app-pagination__item--next .app-pagination__icon {
margin-left: govuk-spacing(2); margin-left: govuk-spacing(2);
} }

24
app/views/pagy/_nav.html.erb

@ -1,14 +1,14 @@
<% link = pagy_link_proc(pagy) -%> <% link = pagy_link_proc(pagy) -%>
<% if pagy.pages > 1 %> <% if pagy.pages > 1 %>
<nav class="govuk-pagination" id="pagination-label" aria-label="results navigation"> <nav class="app-pagination" id="pagination-label" aria-label="results navigation">
<ul class="govuk-pagination__list"> <ul class="app-pagination__list">
<li class="govuk-pagination__item govuk-pagination__item--prev"> <li class="app-pagination__item app-pagination__item--prev">
<% if pagy.prev %> <% if pagy.prev %>
<a class="govuk-pagination__link" href=<%= "/logs?page=#{pagy.prev}" %>> <a class="app-pagination__link" href=<%= "/logs?page=#{pagy.prev}" %>>
<% end %> <% end %>
<span class="govuk-pagination__link-title"> <span class="app-pagination__link-title">
<svg class="govuk-pagination__icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17"> <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> <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 </svg>Previous
<span class="govuk-visually-hidden">page</span> <span class="govuk-visually-hidden">page</span>
@ -16,18 +16,18 @@
</li> </li>
<% (1..pagy.pages).each do |idx| %> <% (1..pagy.pages).each do |idx| %>
<% if pagy.page == idx %> <% if pagy.page == idx %>
<li class="govuk-pagination__item govuk-pagination__item--current"><span class="govuk-visually-hidden">Page </span><%= idx %><span class="govuk-visually-hidden"> (current page) </span></li> <li class="app-pagination__item app-pagination__item--current"><span class="govuk-visually-hidden">Page </span><%= idx %><span class="govuk-visually-hidden"> (current page) </span></li>
<% else %> <% else %>
<li class="govuk-pagination__item"><a class="govuk-pagination__link" href=<%= "/logs?page=#{idx}" %>><span class="govuk-visually-hidden">Page </span><%= idx %></a></li> <li class="app-pagination__item"><a class="app-pagination__link" href=<%= "/logs?page=#{idx}" %>><span class="govuk-visually-hidden">Page </span><%= idx %></a></li>
<% end %> <% end %>
<% end %> <% end %>
<li class="govuk-pagination__item govuk-pagination__item--next"> <li class="app-pagination__item app-pagination__item--next">
<% if pagy.next %> <% if pagy.next %>
<a class="govuk-pagination__link" href=<%= "/logs?page=#{pagy.next}" %>> <a class="app-pagination__link" href=<%= "/logs?page=#{pagy.next}" %>>
<% end %> <% end %>
Next <span class="govuk-visually-hidden">page</span> Next <span class="govuk-visually-hidden">page</span>
<span class="govuk-pagination__link-title"> <span class="app-pagination__link-title">
<svg class="govuk-pagination__icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17"> <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> <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> </svg>
</span></a> </span></a>

Loading…
Cancel
Save