Support for manual viewport size input & reintroduce resize key combinations

[JosefBredereck]

Info

This one is a re-request of #1146 because of a wrong merge the other branch couldn't be saved. See the conversation on the other ticket for further information and topics.

Closes

Issue	Title
#1145	Viewport resizing

Summary of changes:

Features

• Ability to change viewport width by changing the value manually

[bmuenzenmeyer]

IMO, the following is still needed:

• blurring out of an input should update the value.
• em should be editable as well, or removed altogther. it's odd to only have one editable

[JosefBredereck]

Eiter way I need acknowledgment of everybody that both ways are ok a good aproach. Or which one to take. Em or no em thats the question 😅

[bmuenzenmeyer]

Em or no em thats the question 😅

@bradfrost do you have thoughts on the current state of using em to define and test media queries?

[JosefBredereck]

blurring out of an input should update the value.

Maybe I misunderstood that in the first place. I implemented to reset the value to the current size. But you meant to update the viewport size on blur, right?

[bmuenzenmeyer]

update the viewport size on blur, right?

yes, but that's just my opinion. someone with better UX chops or experience can certainly overrule me.

[bradfrost]

@bradfrost do you have thoughts on the current state of using em to define and test media queries?

Almost every codebase I've encountered over the last number of years uses em units exclusively for media queries.

I'm flying blind here and unfortunately don't have the bandwidth to pull this down and look at it, but my strong preference would be to retain the existing functionality. That functionality is:

• px and em values are both editable
• Submitting a value and hitting enter updates the viewport and the px/em values
• Using the up/down keys increments/decrements the value (which is especially helpful for debugging)

Does that make sense? Again, sorry I don't have time to get hands on with this, but let me know if you have questions.

[JosefBredereck]

Thank you @bradfrost for me it's clear now. I implemented also the ability to edit also the em value.

Also, I implemented the ability for up and down keys in the following way:

If you click up/down the value for px will go up/down by 1px.
If you click shift up/down the value for px will go up/down by 10px.

If you click up/down the value for em will go up/down by 0.1em.
If you click shift up/down the value for em will go up/down by 0.5em.

This PR is now ready for review @sghoweri 😃

[sghoweri]

Thank you @bradfrost for me it's clear now. I implemented also the ability to edit also the em value.

Also, I implemented the ability for up and down keys in the following way:

If you click up/down the value for px will go up/down by 1px.
If you click shift up/down the value for px will go up/down by 10px.

If you click up/down the value for em will go up/down by 0.1em.
If you click shift up/down the value for em will go up/down by 0.5em.

This PR is now ready for review @sghoweri 😃

Thanks @JosefBredereck! I'll check this out later today or tomorrow (worst case)!

[sghoweri]

+1 on moving this logic out out into utils. Been itching to do this but hadn't gotten around to it!

[sghoweri]

I still need to double-check the updated viewport resizer buttons + functionality (ex. hay mode) but wanted to flag an issue I'm noticing...

I can't seem to enter a specific size in the viewport resizer input field (ex. 600) via keyboard and by tabbing away (or by hitting enter on the keyboard) have that new value get used.

Pressing up / down on the keyboard + up / down with shift all works great though. I just can't seem to manually type in a value that'll get used. 🤔

[JosefBredereck]

I can't seem to enter a specific size in the viewport resizer input field (ex. 600) via keyboard and by tabbing away (or by hitting enter on the keyboard) have that new value gets used.

Yes, this behavior is intended. (But enter should work) As brad frost said in the following

Submitting a value and hitting enter updates the viewport and the px/em values

Also, if you have some insights on handling stuff in react better than I did I would really appreciate to get hints and quirks of that framework.

[JosefBredereck]

I see, found the bug. It seems to work on the first two entries and then it breaks. Will debug and find this one.

[JosefBredereck]

@sghoweri I was able to fix this issue. The problem is that some values can only be checked at keypress, others at key down and also some others at key up 🙈

[bmuenzenmeyer]

This passes a check of the default functionality found on the handlebars preview, and looks to address all of Brad's feedback.

Nice work @JosefBredereck !

I'll defer the merge to @sghoweri feels satisfied - he owns the UI.

[sghoweri]

Overall this looks really great -- very nice work @JosefBredereck!

Tested locally (including with disco, random, and hay modes enabled) and at first glance, everything seems to be working as expected.

There's just two small things I still think need to get addressed however I'd recommend we tackle these separately and get the bulk of this work merged down ASAP.

1. @bmuenzenmeyer's earlier comment, "blurring out of an input should update the value" is still outstanding as far as I can tell.

Currently users have to hit enter after typing in a value in the input field whereas I feel like typing in a valid value and blurring away should also trigger the viewport to be resized.

2. Based on testing this out on my phone, it looks like the input field still zooms in when the input is focused on. Not a deal breaker but would definitely be something I'd want to button up.

Thanks again for all the work putting this together! 🎉

[bmuenzenmeyer]

After testing the preview I'm ok with blurring the input reverting back to the set value too.

[sghoweri]

After testing the preview I'm ok with blurring the input reverting back to the set value too.

lol - put me down as "on the fence" for this one. I see some UX pros and cons to both approaches. Not a deal breaker here so we'll keep iterating on these small micro-interactions.

[JosefBredereck]

Based on testing this out on my phone, it looks like the input field still zooms in when the input is focused on. Not a deal-breaker but would definitely be something I'd want to button up.

I will make a test on the weekend with my phones also. Maybe I can do anything against that.

[JosefBredereck]

@sghoweri I fixed the zooming problem

[sghoweri]

@sghoweri I fixed the zooming problem

@JosefBredereck thanks! Taking another look now.

[sghoweri]

@sghoweri I fixed the zooming problem

@JosefBredereck thanks! Taking another look now.

Works great 👍 - lets get this merged.