[MGNLUI-4501] Resurface dialogs: dynamic height Created: 12/Jul/18  Updated: 03/Oct/18  Resolved: 02/Oct/18

Status: Closed
Project: Magnolia UI
Component/s: None
Affects Version/s: None
Fix Version/s: 6.0

Type: Task Priority: Neutral
Reporter: Maxime Michel Assignee: Cedric Reichenbach
Resolution: Fixed Votes: 0
Labels: responsive-design
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Issue Links:
relation
is related to MGNLUI-4482 Resurface: light dialog Closed
is related to MGNLUI-4454 Resurface: simple and complex dialogs Closed
Template:
Acceptance criteria:
Empty
Task DoR:
Empty
Date of First Response:
Epic Link: Resurface theme
Sprint: Basel 156, Basel 157
Story Points: 5

 Description   

This ticket is about reworking the Resurface POC dialogs to fulfil the scenarios described in Zeplin when it comes to content height (max-height, scroll bars, etc.).

  1. this will be tried with CSS exclusively by creichenbach
  2. if that doesn't work, the legacy logic will be carried over
    1. info.magnolia.ui.vaadin.gwt.client.dialog.connector.DialogContainingFormConnector#doResize() 
    2. https://vaadin.com/docs/v8/framework/gwt/gwt-extension.html

User story:

As a user I want dialogs (with a lot of input fields) to use available screen estate so that i can see and edit as much content as possible without scrolling.

Acceptance criteria:

Margin-top

  • All dialogs are displayed with a top margin of 77px.
  • No matter what height they have.

Dialog height:

  • Dialogs have a fixed header and footer of 75px.
  • Only the content area is flexible in height.
  • Min. height of content area for simple dialogs is = 296px, see here https://zpl.io/aXzE55g.
  • Min. height of content area for complex dialogs is = 245px (because there is also a tab sheet), see here https://zpl.io/aRqDzXe.
  • If input fields don't fit in min. height the content area (height) adjusts dynamically so they can fit in.

Flexible Margin-bottom

  • Bottom margin adjusts according to dialog height.
  • If the dialog height reaches bottom margin of 77px then


 Comments   
Comment by Evzen Fochr [ 12/Jul/18 ]

This is commit with some styling for old tabsheet https://git.magnolia-cms.com/users/efochr/repos/ui-resurface/commits/7083a138bab379b9e70651258e7c43019a89041d

Comment by Maxime Michel [ 19/Sep/18 ]

For the records, the styling for the old tabsheet is actually not necessary at all after MGNLUI-4614. Even in legacy scenarios, a Vaadin8 tabsheet is created and wraps the legacy form views.

Generated at Mon Feb 12 09:17:14 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.