Styling improvements for the Analysis results.

[boblinthorst]

Split off from #492.

The PR became way too big, and addressing the styling comments in the PR would make it even bigger than it already is.

In the words of @maartenleenders:
The styling in the ContentAnalysis seems to be slightly below our standards, but that is my opinion. I think we'd do well to give everything a little more 'breathing room' with padding/margins. @hedgefield has offered to sit in on a little styling session to improve things. I would also be fine if you split this up into a new issue, as this PR has become quite big.

[hedgefield]

I checked out the components standalone app and did some tweaking. Here are some improvements:

• For each collapsible section, add margin-bottom: 8px
• For each collapsible section header, set font-size: 1.1em and padding: 8px 16px
• For each analysis result, set padding: 8px 16px

I assume the margin/padding around all the components is set globally on the sidebar element? Is it possible to remove it there and add it to each component individually? It's a little cumbersome, but it produces better results for the focus indicator. Update: Andrea mentions this is actually already the case in #653 and #654, so it should here too.

[afercia]

One important thing to consider is that the ContentAnalysis uses a custom implementation of the "collapsible header", duplicating great part of the code. I'd tend to think it shouldn't do this, and just reuse the Collapsible component which is going to be refactored in #653 and #654

[afercia]

For #653 and #654 I'm going to get rid of AnalysisCollapsible and use Collapsible directly, that implies adjusting various CSS so I'd like to take care of this, if no objections.

[afercia]

For each collapsible section header, set font-size: 1.1em

I'd need the value in pixels for this, as the em one varies depending on the context (standalone app or within the meta box) and i've also made other changes.

For each analysis result, set padding: 8px 16px

Do you mean each group of results or each single item in a group of results?

[hedgefield]

I'd need the value in pixels for this, as the em one varies depending on the context (standalone app or within the meta box) and i've also made other changes.

I'd say 14 then, just a tad bigger than the default 13px sidebar font size.

Do you mean each group of results or each single item in a group of results?

Each single item.

[afercia]

Each single item.

OK but I'd suggest to check it again once it's in the meta box. Right now, with the changes made on #676 the items already have a good spacing (see below). I'm afraid adding more padding will make them way too spaces, but again this needs to be checked in the meta box.

[hedgefield]

Ahh yes this looks very good, carry on.

[afercia]

We need to keep this open to adjust the left and right padding on the StyledSection in the meta box.

Now that the analysis has ben changed to have its own left and right paddings, the ones in the StyledSection add too much space. Moving to the queue.