From 37d4ab87df7d9fd9f496018b7e38157083dd6739 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Thu, 19 Jan 2017 14:52:54 +0000 Subject: [PATCH] Add a breadcrumb to the product page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This copies what the other GaaP components will be doing for their product pages. The SASS and HTML is taken from here: https://github.com/alphagov/product-page-example/blob/f05ca1fb71f16728bb7a52462b11a850420f36f0/source/stylesheets/modules/_breadcrumbs.scss Only changes I’ve made are: - making the file paths work with our build pipeline Changes to our code to accomodate this are: - putting the padding on the product page `

` not its container - moving the hero image accordingly so that it lines up - making the `
` element on the product page into an anchor so that the breadcrumb can link to it – screenreader will then announce the link as “GOV.UK Notify, same page” --- .../components/vendor/breadcrumbs.scss | 106 ++++++++++++++++++ app/assets/stylesheets/main.scss | 1 + .../stylesheets/views/product-page.scss | 6 +- app/templates/fullwidth_template.html | 2 +- app/templates/views/signedout.html | 12 +- 5 files changed, 122 insertions(+), 5 deletions(-) create mode 100644 app/assets/stylesheets/components/vendor/breadcrumbs.scss diff --git a/app/assets/stylesheets/components/vendor/breadcrumbs.scss b/app/assets/stylesheets/components/vendor/breadcrumbs.scss new file mode 100644 index 000000000..8f1cb149a --- /dev/null +++ b/app/assets/stylesheets/components/vendor/breadcrumbs.scss @@ -0,0 +1,106 @@ +/** + * Breadcrumbs Component + * + * Based on the existing breadcrumbs from GOV.UK Elements, re-implemented + * using BEM, allowing for an `inverse` modifier (e.g. against a masthead), with + * structured data markup, and allowing for the 'current page' to be included + * as the last element in the breadcrumb. + * + * Notes: + * + * - Link the current page to the same place as your skip link (e.g. #main) – + * this means that it is included by screen readers but is referred to as a + * 'same page' link, and clicking it does not reload the page. + * - You can test the structured data using Google's structured data testing + * tool: https://search.google.com/structured-data/testing-tool + * + * Example Usage: + * + * + */ + +.breadcrumbs { + @extend %site-width-container; + @include core-16($line-height: (25 / 16), $line-height-640: 1.75); + + padding: $gutter-one-third 0; + list-style: none; + + @include media(tablet) { + margin-bottom: $gutter; + } + + ol { + margin: 0; + padding: 0; + list-style: none; + } + + &__item { + display: inline-block; + + margin: 0; + padding: 0 $gutter-one-quarter 0 (11px + $gutter-one-quarter); + + background-image: file-url('separator.png'); + background-repeat: no-repeat; + background-size: 6px 11px; + background-position: left center; + + white-space: nowrap; + + @include device-pixel-ratio(2) { + background-image: file-url('separator-2x.png'); + } + + &, + a:link, + a:hover, + a:active, + a:visited { + color: $black; + } + + &--active { + @include bold-16; + + a:link, + a:visited { + text-decoration: none; + } + } + + &:first-child { + padding-left: 0; + background-image: none; + } + } + + &--inverse { + border-bottom: 1px $white solid; + border-bottom-color: rgba($white, 0.25); + + .breadcrumbs__item { + &--active, + a:link, + a:hover, + a:active, + a:visited { + color: $white; + } + + a:focus { + color: $black; + } + } + } +} diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index 01e593a16..267c51afd 100644 --- a/app/assets/stylesheets/main.scss +++ b/app/assets/stylesheets/main.scss @@ -59,6 +59,7 @@ $path: '/static/images/'; @import 'components/tick-cross'; @import 'components/list-entry'; @import 'components/letter'; +@import 'components/vendor/breadcrumbs'; @import 'views/job'; @import 'views/edit-template'; diff --git a/app/assets/stylesheets/views/product-page.scss b/app/assets/stylesheets/views/product-page.scss index 9db7456e4..ba8a29445 100644 --- a/app/assets/stylesheets/views/product-page.scss +++ b/app/assets/stylesheets/views/product-page.scss @@ -3,7 +3,7 @@ &-intro { margin: -10px 0 $gutter * 1.5 0; - padding: $gutter * 2 0 $gutter * 2 0; + padding: 0 0 $gutter * 2 0; background: $govuk-blue; color: $white; @@ -16,7 +16,7 @@ background-image: file-url('product/proposition-illustration.png'); background-size: 320px; background-repeat: no-repeat; - background-position: right -14px top -10px; + background-position: right -14px top 85px; @include ie-lte(8) { background-image: none; @@ -28,7 +28,7 @@ h1 { @include bold-48; - margin: 0 0 $gutter 0; + margin: 20px 0 $gutter 0; } p { diff --git a/app/templates/fullwidth_template.html b/app/templates/fullwidth_template.html index 137088d1d..bd371c012 100644 --- a/app/templates/fullwidth_template.html +++ b/app/templates/fullwidth_template.html @@ -1,7 +1,7 @@ {% extends "admin_template.html" %} {% block fullwidth_content %} -
+
{% block maincolumn_content %}{% endblock %}
{% endblock %} diff --git a/app/templates/views/signedout.html b/app/templates/views/signedout.html index f81475dc3..335848b98 100644 --- a/app/templates/views/signedout.html +++ b/app/templates/views/signedout.html @@ -10,8 +10,18 @@ {% block maincolumn_content %} -
+
+