Skip to content
This repository was archived by the owner on Jun 10, 2019. It is now read-only.

Disable boardcard animations for mobile. #830

Merged
merged 5 commits into from
Jan 30, 2018

Conversation

jvillama
Copy link
Contributor

Description of changes

Disable boardcard height and opacity style for mobile (viewports less than 850px).

Issue Resolved

Fixes #829

@@ -63,3 +63,14 @@
align-self: left;
padding: 1rem 0 0 0;
}

@media screen and (max-width: 850px) {
Copy link
Member

Choose a reason for hiding this comment

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

This won't deactivate the animation.

You'll want to set transition: none on the classes and states involved (:hover, :active, etc).

Let's do it on devices under 450px in width instead of 850, also. The animations should work okay on tablets.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done. I appreciate the review feedback.

@@ -31,6 +31,7 @@ class Team extends Component {

const boardMembers = BoardMembers.map(boardMember => (
<BoardCard
key={`${Math.random()} + ${boardMember.name}`}
Copy link
Member

Choose a reason for hiding this comment

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

It's a huge nitpick, but we can simply use ${boardMember.name} + ${boardMember.role} inside key to avoid a function call.

@kylemh kylemh merged commit 084da39 into OperationCode:master Jan 30, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Disable BoardCard member animations for mobile.
2 participants