Details
-
Improvement
-
Resolution: Fixed
-
Neutral
-
None
-
None
-
None
-
-
Empty show more show less
-
Features 5, Features 6, Features 7
-
8
Description
To optimize vertical spacing for different screen sizes we want to take advantage of the breakpoints we already have. Optimal usage of screen estate in different screen sizes goes hand in hand with responsive design specs.
We already use 2 break points for 3 screen sizes
- BP 1: 1200px
- BP 2: 1600px
- L: >1600px
- M: >1200px & <1600px
- S: <1200px
Add responsive behaviors to following components:
tab sheet - add responsive heights & font sizes
- L: height 45px / font 14px / app icon size=?
- M: height 45px / font 14px / app icon size=?
- S: height 35px / font 12px / app icon size=?
filter box - add responsive heights & font sizes
- L: height 60px / font in labels 12px (opacity 40%) / font in select boxes: 14px
- M: height 60px / font in labels 12px (opacity 40%) / font in select boxes: 14px
- S: height 45px / font in labels 10px (opacity 40%) / font in select boxes: 12px
- reduce/adjust spacings btw label and select box
footer - add responsive height (for all views)
- the footer is a global element, so verify that the following changes apply to all footers for all views (find bar, app launcher, all sub app views, browser view, form layout, small layout, dialogs,…)
- L: height 75px
- M: height 55px
- S: height 35px
buttons - add responsive button sizes (for primary + secondary button in form layout & dialogs)
- primary + secondary buttons are the green + white buttons in the footer
- L: button & select box height 45px, font-size 14px
- M: button & select box height 35px, font-size 14px
- S: button & select box height 25px, font-size 12px
action bar - add responsive title sizes (font size)
(this one doesn't actually help to optimize space but harmonizes the look for the different sizes)
- change title font style to text-light
- L: 26px, action buttons start at 125px from border-top
- M: 24px, action buttons start at 100px from border-top
- S: 20px, action buttons start at 80px from border-top
Checklists
Attachments
Issue Links
- is related to
-
MGNLRES-326 Wrap filter checkbox into CssLayout so it can be nicely styled
-
- Closed
-