Improve visual appearance of trees and lists (MGNLUI-633)

[MGNLUI-100] Fix alignment of column headers and values in lists and trees Created: 25/Oct/12  Updated: 10/May/13  Resolved: 08/May/13

Status: Closed
Project: Magnolia UI
Component/s: design, tree/list
Affects Version/s: 5.0
Fix Version/s: 5.0

Type: Sub-task Priority: Major
Reporter: Andreas Weder Assignee: Samuli Penttilä
Resolution: Fixed Votes: 0
Labels: frontend
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File 01 Column with only icons.png     PNG File Assets app - good.png     PNG File Assets app - now.png     PNG File Firefox.png     PNG File Good styling.png     PNG File Pages app - good.png     PNG File Pages app - now.png     PNG File Safari.png     PNG File Screen Shot 2013-05-07 at 1.53.42 PM.png     PNG File Screen Shot 2013-05-07 at 1.55.49 PM.png     PNG File Security app - good.png     PNG File Security app - now.png    
Template:
Date of First Response:
Sprint: Beta 2

 Description   

In all apps I've visited, the column title and the values in the rows below are not properly horizontally aligned. The title should be aligned with the icon in the list, with a possible arrow from trees being on the left of that combo.

The visual design rules are as follows:

  • column headers are left-aligned (I think that's the case everywhere)
  • column values are left-aligned as well, if they consist of either only text or of an icon plus some text
  • column values are centered if icons are used to represent them. Examples are the "Status" column in the page tree and the "Type" column in the messages list (see attached screen shot)
  • if a column shows a tree and thus every row contains icons and text as well as open and close arrows:
    • the arrows should be to the left of the column header
    • an optional icon and the non-optional text should be left-aligned with the header (see attachment)
  • if there is no open/close arrow, there also should be no gap between the check boxes and the title value.


 Comments   
Comment by Andreas Weder [ 25/Oct/12 ]

Attached screen shots showing alignment of trees and icons in columns.

Comment by Andreas Weder [ 03/Dec/12 ]

Added component(s) to make it easier to filter issues.

Comment by Andreas Weder [ 20/Dec/12 ]

Updated issue with up-to-date info - some additional screen shots follow.

Comment by Andreas Weder [ 20/Dec/12 ]

Re-uploaded this image and renamed it so that it gets added at the top of the screen shots.

Comment by Andreas Weder [ 20/Dec/12 ]

Added images of Asset app showing current and desired state.

Comment by Andreas Weder [ 20/Dec/12 ]

Added images of Pages app showing current and desired state.

Comment by Andreas Weder [ 20/Dec/12 ]

Added images of Security app showing current and desired state.

Comment by Andreas Weder [ 22/Apr/13 ]

BTW: I know that not all screens in the style guide are accurate in this regard; sometimes, the icons a left-aligned, sometimes the trees in column are off as well. The above is the visual idea that should be followed.

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

Fixed by tuning alingnments in CSS.

Comment by Andreas Weder [ 24/Apr/13 ]

I'm reopening this as I've noticed some small defects:

  • on Safari (6.0.4), the icon is 1px too low than in the "good styling" you've shown to me today on HipChat (see )
  • on Firefox (20.0), the texts are 1px too low in addition (see )

I've also attached your "good styling" example from Hipchat (see )

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

Creating identical results in different browsers is challenging at least. The best result that can be done in reasonable time is that by average browser problems are minimised. I tuned CSS so that in Safari and Firefox the text and icons are aligned vertically correct but with Chrome these are off by one pixel. This page http://phrogz.net/css/vertical-align/ demonstrated an example how vertical center alignment can be achieved but looking close you can see from zoomed screenshots that result is different nevertheless. Here in this example Chrome and FF was compared and both mentioned methods were used.

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