-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* make tables scrollable in results * add css for responsive table * include nhs changes * update templates * add colons to column names, utilise truncatewords for descriptions & update tests * change to tablet resolution and use truncatewords_html post markdown * remove truncation of table description
- Loading branch information
1 parent
1370020
commit 13b69b1
Showing
6 changed files
with
119 additions
and
26 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
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 |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| /** | ||
| This component is based on the NHS design system's responsive | ||
| tables: | ||
| https://github.com/nhsuk/nhsuk-frontend/blob/e8928ebe19d39fe6137a5ca046217f9ac043b29b/packages/components/tables/_tables.scss | ||
| * 1. Hiding the thead on tablet | ||
| * 2. Displaying the thead on tablet | ||
| * 3. Removing default screen reader behaviour | ||
| * 4. Assigning role of table-row on tablet to give default screen reader behaviour | ||
| * 5. Using justify content to space out elements in the row on tablet | ||
| * 6. Assigning a minimum width in case of black cell | ||
| * 7. Aligning content to the right on tablet | ||
| * 8. Aligning tablet header to left to split it from the data | ||
| * 9. Hiding tablet specific header from tablet view | ||
| * 10. Adding a display block value due to IE 11 not having full flex support | ||
| */ | ||
| .app-table-responsive { | ||
| width: 100%; | ||
|
|
||
| thead { | ||
| @include govuk-media-query($until: tablet) { | ||
| @include govuk-visually-hidden; /* [1] */ | ||
| } | ||
| } | ||
|
|
||
| .app-table-responsive__body { | ||
| .app-table-responsive__heading { | ||
| @include govuk-typography-weight-bold(); | ||
| padding-right: govuk-spacing(3); | ||
| text-align: left; /* [8] */ | ||
|
|
||
| @include govuk-media-query($from: tablet) { | ||
| display: none; /* [9] */ | ||
| } | ||
| } | ||
|
|
||
| .app-table-responsive__row { | ||
| display: block; /* [3] */ | ||
| margin-bottom: govuk-spacing(4); | ||
|
|
||
| &:last-child { | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| @include govuk-media-query($from: tablet) { | ||
| display: table-row; /* [4] */ | ||
| } | ||
|
|
||
| th { | ||
| text-align: right; | ||
| @include govuk-media-query($from: tablet) { | ||
| text-align: left; | ||
| } | ||
| } | ||
|
|
||
| td { | ||
| display: block; // For browsers that don't support flexbox | ||
| display: flex; | ||
| justify-content: space-between; /* [5] */ | ||
| min-width: 1px; /* [6] */ | ||
| @media all and (-ms-high-contrast: none) { | ||
| /* [10] */ | ||
| display: block; | ||
| } | ||
|
|
||
| @include govuk-media-query($from: tablet) { | ||
| display: table-cell; | ||
| } | ||
|
|
||
| @include govuk-media-query($until: tablet) { | ||
| padding-right: 0; | ||
| text-align: right; /* [7] */ | ||
| &:last-child { | ||
| border-bottom: 3px solid $govuk-border-colour; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
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
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
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
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