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

Change the layout for Check your answers pages #334

Closed
wants to merge 1 commit into from
Closed

Change the layout for Check your answers pages #334

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
9 changes: 1 addition & 8 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,7 @@
.check-your-answers {

td {
@include core-19;
vertical-align: top;
}
border-bottom: 1px solid $border-colour;

.change-answer {
text-align: right;
font-weight: bold;
padding-right: 0;
}

}
202 changes: 84 additions & 118 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 @@ -8,124 +8,90 @@

<main id="content" role="main">

<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 class="grid-row">

<div class="column-two-thirds">

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

<div class="check-your-answers">
<h2 class="heading-small">Exporter</h2>
<span class="visuallyhidden">Answer</span>
<p>ACME Exports<br />
First line of address<br />
Second line of address<br />
Contact: Contact Name<br />
Tel: 01234 567 890<br />
Email: email@email.com</p>
<footer class="group">
<p><a href="#" class="change-answer">Edit<span class="visuallyhidden"> your answer for Exporter</span></a></p>
</footer>
</div>

<div class="check-your-answers">
<h2 class="heading-small">Producer</h2>
<span class="visuallyhidden">Answer</span>
<p>ACME Products</p>
<footer class="group">
<p><a href="#" class="change-answer">Edit<span class="visuallyhidden"> your answer for Producer</span></a></p>
</footer>
</div>

<div class="check-your-answers">
<h2 class="heading-small">Site of export</h2>
<span class="visuallyhidden">Answer</span>
<p>Site of export name</p>
<footer class="group">
<p><a href="#" class="change-answer">Edit<span class="visuallyhidden"> your answer for Site of export</span></a></p>
</footer>
</div>

<div class="check-your-answers">
<h2 class="heading-small">Importer</h2>
<span class="visuallyhidden">Answer</span>
<p>ACME Imports<br>
First line of address<br />
Second line of address<br />
Contact: Contact Name<br />
Tel: 01234 567 890<br />
Email: email@email.com</p>
<footer class="group">
<p><a href="#" class="change-answer">Edit<span class="visuallyhidden"> your answer for Importer</span></a></p>
</footer>
</div>

<div class="check-your-answers">
<h2 class="heading-small">Recovery facilities</h2>
<span class="visuallyhidden">Answer</span>
<p>Recovery facilities name</p>
<footer class="group">
<p><a href="#" class="change-answer">Edit<span class="visuallyhidden"> your answer for Recovery facilities</span></a></p>
</footer>
</div>

<div class="check-your-answers">
<h2 class="heading-small">Recovery site</h2>
<span class="visuallyhidden">Answer</span>
<p>Recovery site name</p>
<footer class="group">
<p><a href="#" class="change-answer">Edit<span class="visuallyhidden"> your answer for Recovery site</span></a></p>
</footer>
</div>

<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>
Expand Down