Merge pull request #1754 from alphagov/pre-next-update

Update previous/next navigation to match GOV.UK

app/assets/stylesheets/components/vendor/previous-next-navigation.scss

@@ -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;
+    }
+  }
+}

app/templates/components/previous-next-navigation.html

@@ -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>