Viewport size select

[ripla]

When creating a design, I want to quickly preview different sizes so that I can make sure my design works on all devices

Scenarios

UX

• Dropdown menu to select a preset size
  • Show options grouped by category (arbitrary size, desktop, tablet, mobile).
  • Mark a tick ✔︎ next to the currently selected option.
  • Selecting “Custom size” makes the currently selected viewport size editable either typing new values to the “width” and “height” inputs in the toolbar, or by dragging the viewport edges/corners in the design area
  • Selecting a preset from desktop, laptop, tablet or mobile category changes the “width” and “height” values in Toolbar to match the preset values.
• Viewport width and height inputs to select a custom size
• User can at any time click and type a new value to the width or height field.
• The visible viewport size changes accordingly after submitting (hit enter or blur field)
• Hitting esc during typing cancels the action. Viewport size doesn’t change and the original value is shown again in the field.
• While a fixed preset is selected from the dropdown, the dropdown value changes automatically to “Custom size” when a new value is submitted using the width or height input

Category list

Category	Name	Size
Desktop	Desktop XL	1920 x 1080
Desktop	Desktop L	1680 x 1050
Desktop	Desktop M	1440 x 900
Desktop	Desktop S	1280 x 800
Tablet	iPad Pro	1024 x 1366
Tablet	iPad	768 x 1024
Phone	iPhone X	375 x 812
Phone	iPhone 8 Plus	414 x 736
Phone	iPhone 8	375 x 667
Phone	iPhone SE	320 x 568
Phone	Galaxy S8	360 x 740

[ripla]

Includes creating a new component with lit

[stale[bot]]

Hello there!

It looks like this issue hasn't progressed lately. There are so many issues that we just can't deal them all within a reasonable timeframe.

There are a few things you could help to get things rolling on this issue (this is an automated message, so expect that some of these are already in use):

• Check if the issue is still valid for the latest version. There are many duplicates in our issue tracker, so it is possible that the issue is already tackled.
• Provide more details how to reproduce the issue.
• Explain why it is important to get this issue fixed and politely draw others attention to it e.g. via the forum or social media.
• Add a reduced test case about the issue, so it is easier for somebody to start working on a solution.
• If the issue is clearly a bug, use the Warranty in your Vaadin subscription to raise its priority.

Thanks again for your contributions! Even though we haven't been able to get this issue fixed, we hope you to report your findings and enhancement ideas in the future too!

[stale[bot]]

The issue was automatically closed due to inactivity. If you found some new details please comment on the issue so that maintainers can re-open it.

[stale[bot]]

Hello there!

It looks like this issue hasn't progressed lately. There are so many issues that we just can't deal them all within a reasonable timeframe.

There are a few things you could help to get things rolling on this issue (this is an automated message, so expect that some of these are already in use):

• Check if the issue is still valid for the latest version. There are many duplicates in our issue tracker, so it is possible that the issue is already tackled.
• Provide more details how to reproduce the issue.
• Explain why it is important to get this issue fixed and politely draw others attention to it e.g. via the forum or social media.
• Add a reduced test case about the issue, so it is easier for somebody to start working on a solution.
• If the issue is clearly a bug, use the Warranty in your Vaadin subscription to raise its priority.

Thanks again for your contributions! Even though we haven't been able to get this issue fixed, we hope you to report your findings and enhancement ideas in the future too!