CSS, layout suggestions.

[edchat]

I was talking to Chris M. and he thought we should improve the CSS used for the details view, so that the view mode and the edit mode would be more obvious.
He suggested 1) that the labels not be bold, but the values be bold,
2) that for the view mode the textbox background match the background of the form, and that the border be removed.
3) that in view mode, fields without values set are not displayed (like the ios contacts).
4) That a border be placed around that label and textbox to group things like on the ios contacts.

[edchat]

I have an implementation for 1, 2 and 3 above, but I was not able to do 4 because the css for mblFormLayoutAuto setting display: table-row; prevents the borders from showing up. He also wanted a lighter background inside the border, but that does not work because display: table-row; also prevents me from being able to have any separation between the different sections,

.mblFormLayout.mblFormLayoutAuto > * {
display: table-row;
}

[cjolif]

How much code is that? This is a tutorial so even though the ideas are obviously good we should make sure not to complexity the code much more?

[edchat]

The biggest change is to try to hide the fields if there is no value set, but that does make it look pretty nice.
You can look at this commit to see the changes.
edchat@7f78ceb

The other concern is the setting of the background-color: rgba(0, 0, 0, 0); since that will not match android etc.

[cjolif]

@dmandrioli any feedback on the limitations @edchat mentioned? Is that something that could be improved/fixed in future releases?

[dmandrioli]

It's possible to add a border to table rows by adding "border-collapse: collapse" on the table. But round corners are not supported... A workaround is to set the border on table cells instead of rows.
Globally, there are really lots of limitations around CSS tables styling...

To have a gap between rows, add a BR between them.

For future releases, if all iOs forms look like this, we can consider using this style.
Let me know if you want the patch corresponding to the screenshot below.

[edchat]

Yes, I would like to see the patch.
Thanks

[cjolif]

Even better a pull request ;)