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

Refine inner block margins #547

Closed
3 tasks
iamthomasbishop opened this issue Feb 6, 2019 · 3 comments
Closed
3 tasks

Refine inner block margins #547

iamthomasbishop opened this issue Feb 6, 2019 · 3 comments
Assignees
Labels
[Type] Enhancement Improves a current area of the editor
Milestone

Comments

@iamthomasbishop
Copy link
Contributor

Inner block paddings are a bit loose right now, let's make sure these are refined.

Block Anatomy

By default, every block type (including Title) contains internal padding of 12pt top/bottom and 16pt left/right.

Static

image

Focused

When a block is focused, we show the inline toolbar (44pt height) and collapse the margin-bottom, like so:

image

Currently

(proper paddings indicated with green, improper in red)

Android:

image

As you can see, left/right paddings on Android are 👍 , however top/bottom paddings are a bit off.

iOS:

ios

Punch-list

Both Platforms

  • Ensure padding-top is always 12 (static + focused)
  • Remove padding-bottom when block is focused

iOS

  • Ensure padding on left/right sides is 16pt
@iamthomasbishop iamthomasbishop self-assigned this Feb 6, 2019
@iamthomasbishop iamthomasbishop added this to the Beta milestone Feb 6, 2019
@iamthomasbishop iamthomasbishop added the [Type] Enhancement Improves a current area of the editor label Feb 6, 2019
@iamthomasbishop
Copy link
Contributor Author

Previous, related issue: #393

@SergioEstevao SergioEstevao self-assigned this Feb 20, 2019
@SergioEstevao
Copy link
Contributor

@iamthomasbishop I update the margins here, one of the issue we where having is that the text container had a minimum height of 50px so when we had a single line on it we were still getting 50px of height to it making it look to have bigger margins. Here is a screenshot with some extra colors:
simulator screen shot - iphone xr - 2019-02-20 at 11 05 29

@iamthomasbishop
Copy link
Contributor Author

Pulled this into Sketch to double check, and all of these margins look aligned perfectly.

image

Thanks for taking care of this @SergioEstevao !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Enhancement Improves a current area of the editor
Projects
None yet
Development

No branches or pull requests

2 participants