Skip to content

Commit

Permalink
Change markup and styling for Check your answers page
Browse files Browse the repository at this point in the history 
Switch markup from using a table to using a description list
and improve styling to be clearer and responsive.

Visual changes:
* Don't use the full page width if the items are short
* Remove the bold from the change link
* Make the key bold
* Make key and value wrap on smaller screens

The descripion list uses a div around each dt/dd grouping.
That is currently invalid but
a) in the HTML 5.2 Working Draft [1]
b) supported in all the browsers (even IE6)

[1] https://www.w3.org/TR/html52/grouping-content.html#the-dl-element
  • Loading branch information
@selfthinker
selfthinker committed Mar 21, 2017
1 parent c80fc49 commit 3703789
Show file tree
Hide file tree
Showing 2 changed files with 182 additions and 125 deletions.
71 changes: 65 additions & 6 deletions app/assets/sass/patterns/_check-your-answers.scss
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,73 @@

.check-your-answers {

td {
@include core-19;
vertical-align: top;
> * {
position: relative;
border-bottom: 1px solid $border-colour;

> * {
display: block;
}
}

.change-answer {
text-align: right;
.question {
font-weight: bold;
padding-right: 0;
margin: em(12, 19) 4em $gutter/6 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 (~4-5px)
// using margin instead of padding because of easier absolutely positioning of .change
}

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

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

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


@include media(desktop) {

display: table;

> * {
display: table-row;
border-bottom-width: 0;

> * {
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;
}

&:first-child > * {
padding-top: 0;
}
}

// to make multiple sections' items line up horizontally
&.multiple-sections {
width: 100%;

// depending on length of keys and values, services might need to override this value
.question {
width: 30%;
}
}

.change {
position: static;
padding-right: 0;
}
}
}
236 changes: 117 additions & 119 deletions docs/views/examples/check-your-answers-page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,127 +7,125 @@
{% 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>

<h2 class="heading-medium">
Organisations involved
</h2>

<dl class="check-your-answers">
<div>
<dt class="question">
Exporter
</dt>
<dd class="answer">
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
</dd>
<dd class="change">
<a href="#">
Change <span class="visuallyhidden">Exporter name</span>
</a>
</dd>
</div>

<div>
<dt class="question">
Producer
</dt>
<dd class="answer">
Producer name
</dd>
<dd class="change">
<a href="#">
Change <span class="visuallyhidden">Producer name</span>
</a>
</dd>
</div>

<div>
<dt class="question">
Site of export
</dt>
<dd class="answer">
Site of export name
</dd>
<dd class="change">
<a href="#">
Change <span class="visuallyhidden">Site of export name</span>
</a>
</dd>
</div>

<div>
<dt class="question">
Importer
</dt>
<dd class="answer">
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
</dd>
<dd class="change">
<a href="#">
Change <span class="visuallyhidden">Importer name</span>
</a>
</dd>
</div>

<div>
<dt class="question">
Recovery facilities
</dt>
<dd class="answer">
Recovery facilities name
</dd>
<dd class="change">
<a href="#">
Change <span class="visuallyhidden">Recovery facilities name</span>
</a>
</dd>
</div>

<div>
<dt class="question">
Recovery site
</dt>
<dd class="answer">
Recovery site name
</td>
<dd class="change">
<a href="#">
Change <span class="visuallyhidden">Recovery site name</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 %}

0 comments on commit 3703789

Please sign in to comment.