Improve visual appearance of trees and lists
(MGNLUI-633)
|
|
| 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: |
|
| 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:
|
| 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:
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. |