[MGNLUI-1047] Implement more compact look for dialogs Created: 05/Apr/13  Updated: 09/Dec/15  Resolved: 08/Apr/13

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

Type: Bug Priority: Neutral
Reporter: Andreas Weder Assignee: Samuli Penttilä
Resolution: Fixed Votes: 0
Labels: design
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File Dialog review.png     PNG File Dialog.compact.png     PNG File Dialog.compact.styleguide.png     PNG File Dialog.original.png    
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Date of First Response:

 Description   

During a review with the goal to implement a more compact look for Magnolia's new UI, we've also defined a slightly more compact appearance for forms. This issue is about implementing these changes.

The changes are:

  • header and footer become less high
  • the font size of the dialog title gets smaller
  • the left and right padding in header, footer and body of a dialog become smaller as well
  • note that, as a result of the change of the padding, the padding inside tabs has to change as well.

You'll find a style guide with the new measurements attached to this issue. You'll also find two screen shots showing the difference: the first shows the original design, the second the more dense, new one.



 Comments   
Comment by Samuli Penttilä [ 08/Apr/13 ]

Fixed by tuning CSS.

Comment by Andreas Weder [ 08/Apr/13 ]

Adding screen shots visualizing the results from the ticket review.

Comment by Andreas Weder [ 08/Apr/13 ]

May I ask you to verify the left borders both in the header and the footer of a dialog/embedded form? They look to wide to me (see new screen shot I attached).

And while you're add it, please also make sure that the help icon is properly aligned vertically.

Comment by Samuli Penttilä [ 08/Apr/13 ]

Tuned size to be exactly 16px by removing margins.

Comment by Andreas Weder [ 08/Apr/13 ]

Ok, looks fine now. Thanks.

Generated at Mon Feb 12 08:42:50 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.