Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve word wrapping in summary list component #1220

Merged
merged 3 commits into from
Mar 1, 2019
Merged

Improve word wrapping in summary list component #1220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d6c2252
Improve summary list extreme example
NickColley Feb 22, 2019
a76f22a
Add longer example to check your answers
NickColley Feb 22, 2019
d890acf
Update word wrapping to use overflow-wrap
NickColley Feb 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions app/views/full-page-examples/check-your-answers/index.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,39 @@
}
]
}
},
{
key: {
text: "Additional details"
},
value: {
html: '
<p class="govuk-body">I have contacted my council for a Temporary Event Notice (<abbr title="Temporary Event Notice">TEN</abbr>) as I want to carry out a ‘licensable activity’ on unlicensed premises in England or Wales.</p>

<p class="govuk-body">Licensable activity includes:</p>

<ul class="govuk-list govuk-list--bullet">
<li>selling alcohol</li>
<li>serving alcohol to members of a private club</li>
<li>providing entertainment, such as music, dancing or indoor sporting events</li>
<li>serving hot food or drink between 11pm and 5am</li>
</ul>

<p class="govuk-body">
To find out more you can visit out website at:
<a class="govuk-link" href="#">https://reallylongurlformyeventthatneedsatemporaryeventsnotice.com</a>
</p>
'
},
actions: {
items: [
{
href: "#/additional-details",
text: "Change",
visuallyHiddenText: "additional details"
}
]
}
}
]
}) }}
Expand Down
10 changes: 7 additions & 3 deletions src/components/summary-list/_summary-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down Expand Up @@ -49,17 +50,17 @@
.govuk-summary-list__actions {
margin-bottom: govuk-spacing(3);
@include govuk-media-query($from: tablet) {
width: 20%;
padding-right: 0;
text-align: right;
}
}

.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 {
Expand All @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions src/components/summary-list/summary-list.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -370,8 +370,8 @@ examples:
text: Pneumonoultramicroscopicsilicovolcanoconiosis
value:
html: |
<p class="govuk-body">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.</p>
<p class="govuk-body">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.</p>
<p class="govuk-body">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."</p>
<p class="govuk-body">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.</p>
actions:
items:
- href: '#'
Expand Down