Uploaded image for project: 'Magnolia UI'
  1. Magnolia UI
  2. MGNLUI-4943

Vertical spacing: add responsiveness to additional components

    XMLWordPrintable

Details

    • Improvement
    • Resolution: Fixed
    • Neutral
    • 6.1
    • None
    • None
    • None
    • 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

        Acceptance criteria

        Attachments

          Issue Links

            Activity

              People

                jsimak Jaroslav Simak
                avongunten Anja von Gunten
                Votes:
                0 Vote for this issue
                Watchers:
                2 Start watching this issue

                Dates

                  Created:
                  Updated:
                  Resolved:

                  Checklists

                    Task DoD

                    Time Tracking

                      Estimated:
                      Original Estimate - Not Specified
                      Not Specified
                      Remaining:
                      Remaining Estimate - 0d
                      0d
                      Logged:
                      Time Spent - 1d
                      1d