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

Rework clickable cards using CSS invisible overlay rather than JS event handler #762

Merged
merged 17 commits into from
Oct 10, 2022
Merged

Rework clickable cards using CSS invisible overlay rather than JS event handler #762

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
5f152db
Rework clickable cards using CSS invisible overlay rather than JS eve…
andymantell Aug 3, 2021
def3854
Changelog entry for https://github.com/nhsuk/nhsuk-frontend/pull/762
andymantell Aug 3, 2021
cdcd345
Trick IE10 into rendering the invisible clickable area on clickable c…
andymantell Aug 3, 2021
c16d0a0
CSS linting fix
andymantell Aug 3, 2021
b51e75a
CSS linting fix
andymantell Aug 3, 2021
9cb0904
Merge branch 'master' into feature/rework-clickable-cards
andymantell Sep 22, 2021
e07ef91
Merge branch 'master' into feature/rework-clickable-cards
andymantell Oct 21, 2021
24c426b
Update changelog - move reworked clickable cards to a breaking change
andymantell Oct 21, 2021
72d8e9e
Merge branch 'master' into feature/rework-clickable-cards
andymantell Dec 15, 2021
0b52bcd
remove stray merge marker
andymantell Dec 15, 2021
a465242
Merge branch 'master' into feature/rework-clickable-cards
andymantell Dec 16, 2021
3492e79
Tabs tests - Initial dom setup
wa-rren-dev Aug 22, 2022
fb3f445
Update tabs.test.js
wa-rren-dev Aug 25, 2022
201265d
Tidy up
wa-rren-dev Oct 7, 2022
f759740
Merge pull request #841 from nhsuk/alpha/tabs-tests
wa-rren-dev Oct 7, 2022
583066c
Merge branch 'feature/rework-clickable-cards' into al7-backup
wa-rren-dev Oct 7, 2022
c14b01b
Prettier fix
wa-rren-dev Oct 7, 2022
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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
:wrench: **Fixes**

- Transactional header defaults to wrapping underneath the logo without the need for a modifier ([Issue 720](https://github.com/nhsuk/nhsuk-frontend/issues/720)).
- Rework clickable cards using CSS invisible overlay rather than JS event handler to avoid problems with using Ctrl-click, middle click, right click to open new tabs ([PR 762](https://github.com/nhsuk/nhsuk-frontend/pull/762))

## 5.1.0 - 14 May 2021

Expand Down
12 changes: 0 additions & 12 deletions packages/components/card/card.js
View file
Open in desktop

This file was deleted.

29 changes: 13 additions & 16 deletions packages/components/card/card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,15 @@
========================================================================== */

/**
* 1. Is needed for the :active top positioning.
* 1. Is needed for the :active top positioning, and invisible clickable overlay.
* 2. Border is used to create a divider between the white content
* box and an image.
* 3. Creates the 'pressed down' effect when clicked.
* 4. Removes padding-top from headings directly after the card group.
* 5. Includes the border width to achieve the correct left alignment.
* 6. Stops the heading from spanning the full width of the card.
* 7. Removes padding top for the feature heading positioning.
* 8. Trick IE10 into rendering the invisible clickable area. Without this it does not.
*/

$card-border-width: 1px;
Expand Down Expand Up @@ -38,8 +39,6 @@ $card-border-hover-color: $color_nhsuk-grey-3;
.nhsuk-card__content {
@include top-and-bottom();
@include nhsuk-responsive-padding(5);

position: relative;
}

.nhsuk-card__heading,
Expand All @@ -54,20 +53,18 @@ $card-border-hover-color: $color_nhsuk-grey-3;
.nhsuk-card--clickable {
border-bottom-width: $card-border-bottom-width;

&:hover,
&:active {
cursor: pointer;

.nhsuk-card__heading a,
.nhsuk-card__link {
color: $nhsuk-link-hover-color;
text-decoration: none;

&:focus {
color: $nhsuk-focus-text-color;
}
.nhsuk-card__heading a,
.nhsuk-card__link {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@chrimesdev I've put both these selectors in here in order to be consistent with what came before. Is this still necessary? I assume it's backwards compatibility before the .nhsuk-card__link class was added

&::before {
background-color: rgba(255, 255, 255, 0); /* [8] */
bottom: 0;
content: '';
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
}

}

&:hover {
Expand Down
2 changes: 0 additions & 2 deletions packages/nhsuk.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
// Components
import Card from './components/card/card';
import Checkboxes from './components/checkboxes/checkboxes';
import Details from './components/details/details';
import ErrorSummary from './components/error-summary/error-summary';
Expand All @@ -11,7 +10,6 @@ import './polyfills';

// Initialize components
document.addEventListener('DOMContentLoaded', () => {
Card();
Checkboxes();
Details();
ErrorSummary();
Expand Down