Improve styling of reviews in plugin details modal

[Clorith]

The new plugin modal looks visually good, with the exception of the review tab which unfortunately lags behind a bit.

When you click into the reviews you get a "wall of text".

There's no proper clear separation between the reviews with the current styling, and the star rating by the individual users have been replaced with a decimal system (also a bit redundant as there are no half-value review options on wp.org).

Bringing the visual up to date on the actual reviews to also more closely represent the wp.org visual will probably go a long way here.

We should also consider making the "not tested with" notification run the error class as opposed to the current updated

[SergeyBiryukov]

We should also consider making the "not tested with" notification run the error class as opposed to the current updated

See #29309.

[Clorith]

Suggestion for plugin visual

[Clorith]

A suggestion for what might work well for the reviews, it will require an update to the current API output as the avatar is currently not in the avatar container but rather in the meta text next to the user name.

If the avatar is moved to the appropriate container, this should be quite easy to achieve.

[Clorith]

Style the plugin reviews

[Clorith]

Took the liberty of plotting up a slight change to the API output from wp.org for the individual reviews. Also attached 29321.patch based on the proposed change to the format that will style things as suggested above.

It also changes the string for the rating, I don't know if this will have an impact in any way regarding string freeze, but I felt that saying "x rating" doesn't help those who rely on screen readers.
The new format tells them the range of the rating in the format of "Rated X our of Y" which I personally (probably up for discussion) think is better.

<div class="review">
	<div class="review-head">
		<div class="reviewer-avatar">
			<a href="//profiles.wordpress.org/Clorith" target="_blank"><img alt="" src="https://secure.gravatar.com/avatar/93de37a5f38e3a34568814ac7b1bfb75?s=36&amp;d=monsterid&amp;r=g" class="photo avatar avatar-36"></a>
		</div>
		<div class="reviewer-info">
			<div class="review-title-section">
				<h4>This is the review title</h4>
			</div>
			<div class="star-rating"><span class="screen-reader-text">Rated 4 out of 5</span><div class="star star-full"></div><div class="star star-full"></div><div class="star star-full"></div><div class="star star-full"></div><div class="star star-empty"></div></div>
			
			<div class="review-meta">
				By <a href="//profiles.wordpress.org/Clorith" target="_blank">Clorith</a>,
				<span class="review-date">August 23, 2014</span>
				<span class="review-wp-version">for WP 4.0</span>
			</div>
		</div>
	</div>
	<div class="review-body">
		<p>
			This is the review body.
		</p>
	</div>
</div>

[ocean90]

See ticket:28884#comment:16.

[celloexpressions]

Improve the display of reviews with the existing markup (css changes only).

[celloexpressions]

With 29321.diff​.

[helen]

In 29619:

Plugin details: better review styling.

props Clorith, celloexpressions.
fixes #29321.

[helen]

I think larger avatars might actually be a little distracting in this context. I think for now we are good. If the API happens to change, then we can adjust to it then. The only change I've requested is to to move the stars before the review title.

[ocean90]

[29619] brokes scrolling in the review tab. "Based on x ratings" looks broken too, see ​https://cloudup.com/cTV-Lzb-2dc.

Also noticed that there is always a p-tag around the <div class="review"> container.

[helen]

In 29624:

Plugin details: Fix review scrolling in some browsers (cough, Chrome).

Remove some unnecessary CSS from [29619].

fixes #29321.