Skip to content

[Polish] Improve Mobile Styles#37

Open
drewandrew wants to merge 20 commits intomasterfrom
polish
Open

[Polish] Improve Mobile Styles#37
drewandrew wants to merge 20 commits intomasterfrom
polish

Conversation

@drewandrew
Copy link
Collaborator

@drewandrew drewandrew commented Sep 21, 2018

This PR improves the mobile device usability. Most of the CSS added in this PR is going to be refactored when we remove .

There is more polishing to be done but this is a good start. 🐳

TODO: fix the bug with editing counters on mobile.

{this.state.counters.map((counter, index) =>
<div key={index} className="creature-form__counter">
<DragHandle><FontAwesomeIcon icon={faSort} /></DragHandle>
<DragHandle><FontAwesomeIcon icon={faSort} cursor="pointer" /></DragHandle>
Copy link
Collaborator

Choose a reason for hiding this comment

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

This should be in CSS, not here.

tabIndex="-1"
>
<FontAwesomeIcon icon={faTrashAlt} />
<FontAwesomeIcon icon={faTrashAlt} cursor="pointer" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

Ditto

justify-content: center;
font-size: 24px;
min-width: 50px;
max-width: 97%;
Copy link
Collaborator

Choose a reason for hiding this comment

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

Don't do this. Use 100% and an appropriate box-sizing model.

display: flex;
justify-content: flex-start;

& {
Copy link
Collaborator

Choose a reason for hiding this comment

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

Indentation

@drewandrew
Copy link
Collaborator Author

@joshleecreates ready for re-review

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants