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

Improvements to Check your answers page #365

Merged
merged 3 commits into from
Jun 9, 2017
Merged

Improvements to Check your answers page #365

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
b006acd
Change markup and styling for Check your answers page
selfthinker Mar 3, 2017
451bfc5
Improve content of Check your answers page
selfthinker Apr 4, 2017
ce8e8b1
Use our standards around visually hidden content
selfthinker Apr 7, 2017
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
82 changes: 75 additions & 7 deletions app/assets/sass/patterns/_check-your-answers.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,82 @@
.check-your-answers {

td {
@include core-19;
vertical-align: top;
.govuk-check-your-answers {

@include media(desktop) {
display: table;
}

.change-answer {
text-align: right;
> * {
position: relative;
border-bottom: 1px solid $border-colour;

@include media(desktop) {
display: table-row;
border-bottom-width: 0;
}

> * {
display: block;

@include media(desktop) {
display: table-cell;
border-bottom: 1px solid $border-colour;
padding: em(12, 19) em(20, 19) em(9, 19) 0; // copied from Elements' td padding
margin: 0;
}
}

@include media(desktop) {
&:first-child > * {
padding-top: 0;
}
}
}

.cya-question {
font-weight: bold;
padding-right: 0;
margin: em(12, 19) 4em em(4,19) 0;
// top: from Elements' td
// right: due to length of "change" link (adjust if you change the link to be much longer)
// bottom: by eye
// using margin instead of padding because of easier absolutely positioning of .change
}

> *:first-child .cya-question {
margin-top: 0;
}

@include media(desktop) {
// to make group of q&a line up horizontally (unless there is just one group)
&.cya-questions-short,
&.cya-questions-long {
width: 100%;
}

// recommended for mostly short questions
&.cya-questions-short .cya-question {
width: 30%;
}

// recommended for mostly long questions
&.cya-questions-long .cya-question {
width: 50%;
}
}

.cya-answer {
padding-bottom: em(9, 19); // from Elements' td
}

.cya-change {
text-align: right;
position: absolute;
top: 0;
right: 0;

@include media(desktop) {
position: static;
padding-right: 0;
}
}

}
274 changes: 155 additions & 119 deletions docs/views/examples/check-your-answers-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,127 +7,163 @@
{% block content %}

<main id="content" role="main">
<div class="grid-row">
<div class="column-two-thirds">

<h1 class="heading-large">
Check your answers before sending your application
</h1>

<table class="check-your-answers">

<thead>
<tr>
<th colspan="2">
<h2 class="heading-medium">
Organisations involved
</h2>
</th>
<th>
</th>
</tr>
</thead>

<tbody>
<tr>
<td>
Exporter
</td>
<td>
Exporter name<br>
First line of address<br>
Second line of address<br>
Contact: Contact Name<br>
Tel: 01234 567 890<br>
Email: email@email.com
</td>
<td class="change-answer">
<a href="#">
Change <span class="visuallyhidden">Exporter name</span>
</a>
</td>
</tr>
<tr>
<td>
Producer
</td>
<td>
Producer name
</td>
<td class="change-answer">
<a href="#">
Change <span class="visuallyhidden">Producer name</span>
</a>
</td>
</tr>
<tr>
<td>
Site of export
</td>
<td>
Site of export name
</td>
<td class="change-answer">
<a href="#">
Change <span class="visuallyhidden">Site of export name</span>
</a>
</td>
</tr>
<tr>
<td>
Importer
</td>
<td>
Importer name<br>
First line of address<br>
Second line of address<br>
Contact: Contact Name<br>
Tel: 01234 567 890<br>
Email: email@email.com
</td>
<td class="change-answer">
<a href="#">
Change <span class="visuallyhidden">Importer name</span>
</a>
</td>
</tr>
<tr>
<td>
Recovery facilities
</td>
<td>
Recovery facilities name
</td>
<td class="change-answer">
<a href="#">
Change <span class="visuallyhidden">Recovery facilities name</span>
</a>
</td>
</tr>
<tr>
<td>
Recovery site
</td>
<td>
Recovery site name
</td>
<td class="change-answer">
<a href="#">
Change <span class="visuallyhidden">Recovery site name</span>
</a>
</td>
</tr>
</tbody>
</table>

<h2 class="heading-medium">Now send your application</h2>

<p class="text">
By submitting this notification you are confirming that, to the best of your knowledge, the details you are providing are correct.
</p>

<div class="form-group">
<a href="confirmation-page" class="button">Accept and send application</a>
</div>
<h1 class="heading-large">
Check your answers before sending your application
</h1>


<!-- only add a heading for a list if there is more than one list -->
<h2 class="heading-medium">
Personal details
</h2>

<!-- use additional modifier class to change column widths for multiple groups of questions and answers: -->
<!-- * `cya-questions-short` for short questions -->
<!-- * `cya-questions-long` for long questions -->
<!-- * none for single group of q&a -->
<dl class="govuk-check-your-answers cya-questions-short">
<div>
<dt class="cya-question">
Name
</dt>
<dd class="cya-answer">
Sarah Philips
</dd>
<dd class="cya-change">
<a href="#">
Change<span class="visually-hidden"> name</span>
</a>
</dd>
</div>

<div>
<dt class="cya-question">
Date of birth
</dt>
<dd class="cya-answer">
5 January 1978
</dd>
<dd class="cya-change">
<a href="#">
Change<span class="visually-hidden"> date of birth</span>
</a>
</dd>
</div>

<div>
<dt class="cya-question">
Home address
</dt>
<dd class="cya-answer">
72 Guild Street<br />
London<br />
SE23 6FH
</dd>
<dd class="cya-change">
<a href="#">
Change<span class="visually-hidden"> home address</span>
</a>
</dd>
</div>

<div>
<dt class="cya-question">
Contact details
</dt>
<dd class="cya-answer">
07700 900457<br />
sarah.phillips@example.com
</dd>
<dd class="cya-change">
<a href="#">
Change<span class="visually-hidden"> contact details</span>
</a>
</dd>
</div>
</dl>


<h2 class="heading-medium">
Application details
</h2>

<dl class="govuk-check-your-answers cya-questions-short">
<div>
<dt class="cya-question">
Previous application number
</dt>
<dd class="cya-answer">
502135326
</dd>
<dd class="cya-change">
<a href="#">
Change<span class="visually-hidden"> previous application number</span>
</a>
</dd>
</div>

<div>
<dt class="cya-question">
Licence type
</dt>
<dd class="cya-answer">
For personal use
</dd>
<dd class="cya-change">
<a href="#">
Change<span class="visually-hidden"> licence type</span>
</a>
</dd>
</div>

<div>
<dt class="cya-question">
Home address
</dt>
<dd class="cya-answer">
72 Guild Street<br />
London<br />
SE23 6FH
</dd>
<dd class="cya-change">
<a href="#">
Change<span class="visually-hidden"> home address</span>
</a>
</dd>
</div>

<div>
<dt class="cya-question">
Licence period
</dt>
<dd class="cya-answer">
This is a longer paragraph of text provided by the user to provide additional information.<br /><br />
This is a second paragraph of text provided by the user.
</dd>
<dd class="cya-change">
<a href="#">
Change<span class="visually-hidden"> licence period</span>
</a>
</dd>
</div>
</dl>


<h2 class="heading-medium">Now send your application</h2>

<p class="text">
By submitting this notification you are confirming that, to the best of your knowledge, the details you are providing are correct.
</p>

<div class="form-group">
<a href="confirmation-page" class="button">Accept and send application</a>
</div>

</div>
</div>
</main>

{% endblock %}