-
Notifications
You must be signed in to change notification settings - Fork 236
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Change markup and styling for Check your answers page
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 width of the first column can be controlled via modifiers `cya-questions-short` or `cya-questions-long`, if there is no modifier, 'columns' automatically adjust their widths to their content The description 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
1 parent
7e7b39e
commit fac8e6c
Showing
2 changed files
with
194 additions
and
126 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,84 @@ | ||
| .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; | ||
|
|
||
| > * { | ||
| display: block; | ||
| } | ||
| } | ||
|
|
||
| @include media(desktop) { | ||
| > * { | ||
| 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; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .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) { | ||
| .cya-change { | ||
| position: static; | ||
| padding-right: 0; | ||
| } | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters