Issue Type: Improvement Improvement
Assignee: Unassigned
Components: design, forms
Created: 17/Mar/14 4:52 PM
Description:

In forms, the in-line help and validation messages currently look too blocky. They extend to the full width of the dialog, but were actually designed to be only as wide as the right part of the form, covered by the input fields. Also, the inline message are too high and their paddings are too large.

As one result of this, error and warning messages look way too alarming. Please make sure they look as designed, which means:

  1. Fields
  • Must have a 2px red (error) or yellow (warning) border
  • Error or warning signs should be inside an input field and right-aligned.
    • If that's not possible (e.g. check boxes), show it next to the field with a 8px padding.
  1. The message box
  • Has the same width as the value part of a field they're pointing to.
    • Left edge is where all input fields start.
    • Right edge is where the area for input fields ends: 42 px from right border.
  • Less padding to make the box to appear smaller:
    • Use 6px above and below.
    • Increase left and right padding to 12px.
  • The arrow of a message box must be closer to the field it points to. The div currently containing it has a 5px top padding: remove that.
    • The arrow should be horizontally centered for large, full-width input fields.
    • The arrow should be at 100px from left edge of message box for smaller, half-width input fields.
  1. The message banner at the top
  • Set font-size to 12 px.
  • Set text color of "Jump to next error" link button to <75>, on hover to white.
  • Use less padding above and below: use 6px only.
  • Make sure that the message banner has a 2px margin at the top and at the bottom.
Fix Versions: 5.2.x
Project: Magnolia UI
Labels: ux usability
Priority: Neutral Neutral
Reporter: Andreas Weder
Security Level: Public
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators
For more information on JIRA, see: http://www.atlassian.com/software/jira



----------------------------------------------------------------
For list details, see: http://www.magnolia-cms.com/community/mailing-lists.html
Alternatively, use our forums: http://forum.magnolia-cms.com/
To unsubscribe, E-mail to: <[email protected]>
----------------------------------------------------------------

Reply via email to