Modals and supporting different screen sizes
Modals (http://
Today, forms like "launch instance" are also used in a modal. The number of items to display for such form makes the modal really big. In several cases, it doesn't fit in the screen size. And in all cases, we could use the available space around the modal to inline inputs, display more elements and avoid scrolling (most of screens have horizontal ratio).
Below (whiteboard) a list of screenshots for the top 8 screen sizes to start discussing about concerns and improvements.
Blueprint information
- Status:
- Complete
- Approver:
- David Lyle
- Priority:
- Medium
- Drafter:
- Cédric Soulas
- Direction:
- Needs approval
- Assignee:
- tshirtman
- Definition:
- Approved
- Series goal:
- Accepted for icehouse
- Implementation:
-
Implemented
- Milestone target:
-
2014.1
- Started by
- Cédric Soulas
- Completed by
- David Lyle
Related branches
Related bugs
Sprints
Whiteboard
[soulascedric 2013-10-21]
According to sources [1], top 8 screen resolutions are:
#1 1366x768
#2 1024x768
#3 1280x800
#4 1920x1080
#5 1280x1024
- 768x1024, 1440x900 and 1600x900
As you can see on Horizon screenshots [1], the "launch instance" modal doesn't fit the screen for sizes #1, #2 and #3. In the other cases we could use the available space around the modal to display more elements: see Launch Instance UX Enhancement blueprint [2].
[1] https:/
[2] https:/
[gabrielpettier 2013-12-17]
Video demo of partial implementation (fullscreen + responsive)
http://
[lblanchard 2013-12-20]
Gabriel, this looks great, nice work on this!! Currently it looks like the size of the form vs. the text on the right is different in different tabs. Is this something that will be tackled when the content is worked on in the other blueprint? Thanks very much for this work!
[gabrielpettier 2013-12-23]
Thanks for the feedback and encouragements! Indeed the columns are not using the same ratio in the video, i'll make all of them use the 8/4 ratio (currently the penultimate panel doesn't follow that). Work in other blueprints may influence content, but the flexibility brought by this one will be used at this point.
[david-lyle 2014-1-22] moving to i-3
[gabrielpettier 2014-03-13]
fullscreen attribute for modal has been merged by
https:/
Work Items
Dependency tree
* Blueprints in grey have been implemented.
