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.

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

Cards tuning #1460

Merged
merged 9 commits into from Feb 23, 2018
Merged

Cards tuning #1460

merged 9 commits into from Feb 23, 2018

Conversation

noirbizarre
Copy link
Contributor

@noirbizarre noirbizarre commented Feb 21, 2018

This PR perform some tuning on cards:

Clickable cards

The entire card is now a link itself and so clickable
The hover effect is done on the border color (which reuse @link-hover-color)

Graceful responsive degradation

This PR makes cards play wells with lower resolution (or simply narrower browser window). The body width is calculated relatively, the footer take the entire width (and so can display more footer details).

Wide resolution

Before After
screenshot-data xps-2018 02 21-20-05-58 screenshot-data xps-2018 02 21-20-02-20

narrow resolution

Before After
screenshot-data xps-2018 02 21-20-05-27 screenshot-data xps-2018 02 21-20-02-58

Reuse add button

The reuse add button is now a card too (same size, benefit from all styling and responsive adjustment)

Before After
screenshot-data xps-2018 02 21-20-06-51 screenshot-data xps-2018 02 21-20-01-21

Cleanup

Remove all references to resources list in reuse list markup

@noirbizarre
Copy link
Contributor Author

Added the following:

  • uniform convention: .card__footer has been renamed into .card-footer and .card__cover into .card-cover
  • admin cards have the same design than frontend, layouts have been fixed
  • admin card list remove cross position has been fixed
  • uniformize admin cards, they all have the same properties (clickable, selected) and behavior (non clickable by default, dispatch type:clicked if clickable)
  • cards colors has been extracted into the gouvfr theme. Default cards are neutral and :hover/.selected effect is @link-hover-color on border
  • removed some !important css directives

Frontend

screenshot-data xps-2018 02 23-12-29-48
screenshot-data xps-2018 02 23-12-34-51

Admin

screenshot-data xps-2018 02 23-12-38-04
screenshot-data xps-2018 02 23-12-37-12
screenshot-data xps-2018 02 23-12-35-27
screenshot-data xps-2018 02 23-13-08-39

screenshot-data xps-2018 02 23-13-01-34

@noirbizarre noirbizarre merged commit 69f4dd9 into opendatateam:master Feb 23, 2018
@noirbizarre noirbizarre deleted the cards-tuning branch February 23, 2018 16:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants