mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-09 19:04:33 -04:00
Update previous/next navigation to match GOV.UK
The pagination pattern on GOV.UK changed in: https://github.com/alphagov/static/pull/1051 We should update ours to match because: - consistency - the new icons looks better
This commit is contained in:
Chris Hill-Scott
@@ -1,6 +1,6 @@
|
||||
/*
|
||||
Taken from the GOV.UK component at
|
||||
https://github.com/alphagov/static/blob/a9d462e71709d2ff6348bcce7e8c625af2b86114/app/assets/stylesheets/govuk-component/_previous-and-next-navigation.scss
|
||||
https://github.com/alphagov/static/blob/3d93a762b9d7af54615c77ae3e479131c03b8175/app/assets/stylesheets/govuk-component/_previous-and-next-navigation.scss
|
||||
and
|
||||
https://github.com/alphagov/static/blob/da8aeeaa749093eab30286d7fc9f965533b66f47/app/assets/stylesheets/styleguide/_conditionals2.scss
|
||||
*/
|
||||
@@ -31,12 +31,11 @@ $is-ie: false !default;
|
||||
}
|
||||
|
||||
.govuk-previous-and-next-navigation {
|
||||
|
||||
@include media-down(mobile) {
|
||||
margin: 2em 0 0 0;
|
||||
}
|
||||
|
||||
display: block;
|
||||
margin-top: $gutter;
|
||||
margin-bottom: $gutter;
|
||||
margin-left: -$gutter-half;
|
||||
margin-right: -$gutter-half;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
@@ -50,18 +49,17 @@ $is-ie: false !default;
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 49%;
|
||||
width: 50%;
|
||||
|
||||
a {
|
||||
|
||||
@include ie-lte(7) {
|
||||
height: 4.5em;
|
||||
}
|
||||
|
||||
display: block;
|
||||
color: $link-colour;
|
||||
padding: $gutter-half;
|
||||
text-decoration: none;
|
||||
|
||||
&:visited {
|
||||
color: $link-colour;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: $canvas-colour;
|
||||
@@ -69,61 +67,47 @@ $is-ie: false !default;
|
||||
|
||||
.pagination-part-title {
|
||||
@include core-27($line-height: (33.75 / 27));
|
||||
margin-bottom: 0.1em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.next-page {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&.next-page a:before {
|
||||
background: transparent file-url("arrow-sprite.png") no-repeat -102px -11px;
|
||||
margin: -4px -32px 0 0;
|
||||
display: block;
|
||||
float: right;
|
||||
width: 30px;
|
||||
height: 38px;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
&.previous-page a:before {
|
||||
background: transparent file-url("arrow-sprite.png") no-repeat -20px -11px;
|
||||
margin: -4px 0 0 -32px;
|
||||
display: block;
|
||||
float: left;
|
||||
width: 30px;
|
||||
height: 38px;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
&.previous-page {
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.previous-page a {
|
||||
padding: 0.75em 0 0.75em 3em;
|
||||
}
|
||||
|
||||
&.next-page a {
|
||||
padding: 0.75em 3em 0.75em 0;
|
||||
}
|
||||
|
||||
@include media-down(mobile) {
|
||||
&.previous-page,
|
||||
&.next-page {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.next-page a {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.previous-page {
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.next-page {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@include media-down(mobile) {
|
||||
.previous-page,
|
||||
.next-page {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.next-page a {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-icon {
|
||||
display: inline-block;
|
||||
margin-bottom: 1px;
|
||||
height: .482em;
|
||||
width: .63em;
|
||||
}
|
||||
|
||||
.pagination-label {
|
||||
display: inline-block;
|
||||
margin-top: 0.1em;
|
||||
text-decoration: underline;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,12 @@
|
||||
{% if previous_page %}
|
||||
<li class="previous-page">
|
||||
<a href="{{previous_page['url']}}" rel="previous" >
|
||||
<span class="pagination-part-title">{{previous_page['title']}}</span>
|
||||
<span class="pagination-part-title">
|
||||
<svg class="pagination-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13">
|
||||
<path fill="currentColor" 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"/>
|
||||
</svg>
|
||||
{{previous_page['title']}}
|
||||
</span>
|
||||
<span class="pagination-label">{{previous_page['label']}}</span>
|
||||
</a>
|
||||
</li>
|
||||
@@ -12,7 +17,12 @@
|
||||
{% if next_page %}
|
||||
<li class="next-page">
|
||||
<a href="{{next_page['url']}}" rel="next">
|
||||
<span class="pagination-part-title">{{next_page['title']}}</span>
|
||||
<span class="pagination-part-title">
|
||||
{{next_page['title']}}
|
||||
<svg class="pagination-icon" xmlns="http://www.w3.org/2000/svg" height="13" width="17" viewBox="0 0 17 13">
|
||||
<path fill="currentColor" 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"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="pagination-label">{{next_page['label']}}</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user