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

Shortcode: Move label above input to make more room for input #11111

Conversation

@arunsathiya
Copy link
Contributor

commented Oct 26, 2018

Description

This PR attempts to fix #11079.

When 3 or more shortcode blocks are used inside a column block, the input region is seen to be very narrow.

This PR attempts to move the shortcode label from the left to above the input region, to make more room for input, as suggested by @billerickson on the issue. I feel that it's a nice solution as well.

Before

screenshot 2018-10-26 at 16 42 19

Image indicating three shortcode blocks inside the column block that are having a very narrow space for input

After

screenshot 2018-10-26 at 16 41 26

Image indicating three shortcode blocks inside the column block that are having more space for input

How has this been tested?

  • Tested by adding the shortcode block on all available columns, 6 in total
  • Tested on Google Chrome Version 70.0.3538.67 (Official Build) (64-bit) for macOS 10.14 - Mac OS Mojave

Types of changes

Minor change that moves the placement of the Shortcode label on the shortcode block, from left of the input to above the input.

@arunsathiya arunsathiya changed the title Move shortcode label above input to make more room for input Shortcode: Move label above input to make more room for input Oct 26, 2018

@chrisvanpatten

This comment has been minimized.

Copy link
Member

commented Oct 26, 2018

Congrats, you win the award for best PR number! 1️⃣1️⃣1️⃣1️⃣1️⃣

I like this, but I'm going to flag for a design review just to be safe!

@chrisvanpatten chrisvanpatten requested a review from jasmussen Oct 26, 2018

@karmatosed karmatosed self-requested a review Oct 28, 2018

@karmatosed
Copy link
Member

left a comment

Great catch! Ideally I would like it to when space be on the same line but adjust to be below when there isn't and it gets below a certain height. Would this be possible?

@arunsathiya

This comment has been minimized.

Copy link
Contributor Author

commented Oct 29, 2018

@karmatosed I attempted to work on your suggestions with CSS-only flexbox concepts, but I am unable to achieve the goal. My understanding is that this would involve JavaScript logic, which I am pretty new to. I will have to give up on this PR.

@arunsathiya

This comment has been minimized.

Copy link
Contributor Author

commented Nov 2, 2018

I am closing this PR for now.

@arunsathiya arunsathiya closed this Nov 2, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.