[Bootstrap] Instance Details missing indentation

[Cindy Lu]

Bootstrap 3 update: https://review.openstack.org/#/c/107042/

There are a few small bugs now for the 'Detail' pages. Before we had indentation on the second line, like:

Name
     apple

Now it is:

Name
apple
(aligned left)

Same for other Detail pages like Volume, Swift Container Detail.

Also, the 'No rules defined' is indented too much. :)

See image.

[Akihiro Motoki (amotoki)]

The review has been proposed: https://review.openstack.org/#/c/111329/

[Aaron Sahlin (asahlin)]

There was a comment about using bootstap's dl-horizontal to style the details page. I adding a screenshot showing the differences between what is done now vs bootstrap class. Can someone from UX please give their opinion on which is preferred?

[Cindy Lu (clu-m)]

From a non-UX perspective, I think the bootstrap dl-horizontal looks really nice. :)

[Liz Blanchard (lblanchard)]

Hi all,

I just wanted to give some comments on the horizontal label/field vs. vertical label/field alignment discussion. There is a lot of discussion within the UX community about the pros and cons of each (unfortunately there really isn't a clear cut solution to use). Please take a look at this article written by Luke W (a very well-known designer around Forms in UX):
http://www.lukew.com/ff/entry.asp?1502

Based on a lot of research you can see that the vertical label/field alignment tests very well for readability of forms. Users only need to read down to follow a form and fill it out. Now, this also uses a lot of vertical space and could cause major scrolling for long forms :) If we have a good solution for multiple columns of form data, this might not be an issue for Horizon moving forward.

If we prefer to go with the horizontal alignment, the readability from label to label suffers a bit, but usability testing shows that you should at least right-align the label to the field so that the left to right readability is still useful.

So again, there isn't a clear cut solution on one or the other...it's a bit dependent on the length of our forms and if we want to support multiple columns or not.

Hopefully this helps the discussion for a UX point of view! I'm happy to chat further on this topic if folks would like to.

Liz

[Aaron Sahlin (asahlin)]

Thanks for the all the input. There was also some some comments posted to the review. Based on the UX folks I heard from I applied Bootstrap's styling, but in addition made the labels left justified.

[OpenStack Infra (hudson-openstack)]

Fix proposed to branch: master
Review: https://review.openstack.org/115119

[OpenStack Infra (hudson-openstack)]

Change abandoned by Aaron Sahlin (<email address hidden>) on branch: master
Review: https://review.openstack.org/111329
Reason: Change to use Bootstrap styling was done under this review:

https://review.openstack.org/#/c/115119/

[OpenStack Infra (hudson-openstack)]

Fix proposed to branch: master
Review: https://review.openstack.org/115693

[OpenStack Infra (hudson-openstack)]

Change abandoned by Aaron Sahlin (<email address hidden>) on branch: master
Review: https://review.openstack.org/115119
Reason: Somehow the Change-Id of this review is the same as the Change-Id of the review I previously abandoned and was messing things up, so unfortunately this review will also be abandoned, the new merged code is at this review

https://review.openstack.org/#/c/115693/

[Aaron Sahlin (asahlin)]

Added screen shot to show what it looks like with patch as it is in veresion 29 vs taking out "row" class and wrapper div with "col-sm-12" to make sure we want to do that.

[Aaron Sahlin (asahlin)]

Sorry forgot to mention.. image on left is with "row" and col-sm-12 div removed, right is as patch sits now (Sections are indented)

[Pieter (pckruith)]

Hi Aaron,

Do you have an example of a Data Label that has multiple rows of data associated with it? Also, what happens when the data label gets huge such as Shawdenlipta FrauStinkistan.

[Aaron Sahlin (asahlin)]

Hello Pieter -

Let me see if I can find examples for your questions.. In the meantime can I get your opinion on which you prefer from UX perspective. Right or left justified labels. I added screenshot for each, plus original without patch for reference. David Lyle made a comment on the patch about right justifying label, or somehow give more visual separation so rows are easier to read

Thoughts?

[Aaron Sahlin (asahlin)]

For long label it adds the ellipsis (for both left/right justifed), no flyover or nothing to see entire text.

[Aaron Sahlin (asahlin)]

Here is 2 lines of data example.

[OpenStack Infra (hudson-openstack)]

Reviewed: https://review.openstack.org/115693
Committed: https://git.openstack.org/cgit/openstack/horizon/commit/?id=439585105020c292a50ff470ba569637a713c7f5
Submitter: Jenkins
Branch: master

commit 439585105020c292a50ff470ba569637a713c7f5
Author: Aaron Sahlin <email address hidden>
Date: Wed Aug 20 10:32:51 2014 -0500

    Fixed display issues on Details Page caused by bootstrap 3 update

    Per UX suggestion applied Bootstrap 'dl-horizontal' styling plus
    added css to left justify the labels on the details page. Also
    addeds col-sm-12 div inside all row divs in detail views, to achieve
    proper bootstrap grid usage.

    Closes-bug: #1349602
    Change-Id: I337150c7a8c90cc838fac8cb89a552a0566789e3