From d6c2252b1d6f7003f436bcdbf375eb5b4366984b Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Fri, 22 Feb 2019 15:05:30 +0000 Subject: [PATCH 1/3] Improve summary list extreme example Use readable English to better highlight any issues with wrapping --- src/components/summary-list/summary-list.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/summary-list/summary-list.yaml b/src/components/summary-list/summary-list.yaml index f8217fc29b..bb5a7f5592 100644 --- a/src/components/summary-list/summary-list.yaml +++ b/src/components/summary-list/summary-list.yaml @@ -370,8 +370,8 @@ examples: text: Pneumonoultramicroscopicsilicovolcanoconiosis value: html: | -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis consequat diam. Duis efficitur justo at congue iaculis. Quisque scelerisque ornare justo nec congue. Duis egestas felis nibh, eu cursus metus rutrum eget. In dictum lectus diam, dapibus ullamcorper risus gravida a. Vestibulum tempor mattis sapien, at auctor tellus dignissim non. Praesent dictum felis nec diam tempor, vel lobortis leo ultricies.

-

Suspendisse potenti. Aliquam dictum eu ipsum sed facilisis. Maecenas hendrerit est eget ultrices venenatis. Nam ex nisl, venenatis eget molestie quis, hendrerit id tellus. Morbi et posuere ex, vel interdum sapien. Mauris ac mattis turpis, interdum eleifend erat. Morbi eget efficitur lectus. Sed suscipit laoreet ipsum et iaculis. Integer ornare ipsum quis aliquet scelerisque. Proin venenatis dictum suscipit. Nunc tristique, felis quis fermentum rhoncus, tortor augue egestas ipsum, non porttitor nulla odio vitae purus. Interdum et malesuada fames ac ante ipsum primis in faucibus.

+

Pneumonoultramicroscopicsilicovolcanoconiosis is a word coined by the president of the National Puzzlers' League as a synonym for the disease known as silicosis. It is the longest word in the English language published in a dictionary, the Oxford English Dictionary, which defines it as "an artificial long word said to mean a lung disease caused by inhaling very fine ash and sand dust."

+

Silicosis is a form of occupational lung disease caused by inhalation of crystalline silica dust, and is marked by inflammation and scarring in the form of nodular lesions in the upper lobes of the lungs. It is a type of pneumoconiosis.

actions: items: - href: '#' From a76f22afef96a571ee376b0fd594857e77035ef4 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Fri, 22 Feb 2019 15:06:01 +0000 Subject: [PATCH 2/3] Add longer example to check your answers Check how wrapping behaves in the context we expect. --- .../check-your-answers/index.njk | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/app/views/full-page-examples/check-your-answers/index.njk b/app/views/full-page-examples/check-your-answers/index.njk index 04bb8afb6d..888a4e8fc9 100644 --- a/app/views/full-page-examples/check-your-answers/index.njk +++ b/app/views/full-page-examples/check-your-answers/index.njk @@ -177,6 +177,39 @@ } ] } + }, + { + key: { + text: "Additional details" + }, + value: { + html: ' +

I have contacted my council for a Temporary Event Notice (TEN) as I want to carry out a ‘licensable activity’ on unlicensed premises in England or Wales.

+ +

Licensable activity includes:

+ + + +

+ To find out more you can visit out website at: + https://reallylongurlformyeventthatneedsatemporaryeventsnotice.com +

+ ' + }, + actions: { + items: [ + { + href: "#/additional-details", + text: "Change", + visuallyHiddenText: "additional details" + } + ] + } } ] }) }} From d890acf163faff81d04280397c89042d1638da4e Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Fri, 22 Feb 2019 15:24:56 +0000 Subject: [PATCH 3/3] Update word wrapping to use overflow-wrap In order to use overflow-wrap with table CSS we need to use a fixed layout. This means we can't rely on a table's automatic resizing, so we have to compromise with a larger 'actions' column that we have before. --- src/components/summary-list/_summary-list.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/summary-list/_summary-list.scss b/src/components/summary-list/_summary-list.scss index e44a9144a6..2940b2ba2a 100644 --- a/src/components/summary-list/_summary-list.scss +++ b/src/components/summary-list/_summary-list.scss @@ -10,6 +10,7 @@ @include govuk-media-query($from: tablet) { display: table; width: 100%; + table-layout: fixed; // Required to allow us to wrap words that overflow. } margin: 0; // Reset default user agent styles @include govuk-responsive-margin(6, "bottom"); @@ -49,6 +50,7 @@ .govuk-summary-list__actions { margin-bottom: govuk-spacing(3); @include govuk-media-query($from: tablet) { + width: 20%; padding-right: 0; text-align: right; } @@ -56,10 +58,9 @@ .govuk-summary-list__key, .govuk-summary-list__value { - // sass-lint:disable no-duplicate-properties // Automatic wrapping for unbreakable text (e.g. URLs) - word-break: break-all; // Standards - word-break: break-word; // WebKit/Blink only + word-wrap: break-word; // Fallback for older browsers only + overflow-wrap: break-word; } .govuk-summary-list__key { @@ -74,6 +75,9 @@ @include govuk-media-query($until: tablet) { margin-bottom: govuk-spacing(3); } + @include govuk-media-query($from: tablet) { + width: 50%; + } } .govuk-summary-list__value > p {