WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#29321 closed defect (bug) (fixed)

Improve styling of reviews in plugin details modal

Reported by: Clorith Owned by: helen
Milestone: 4.0 Priority: normal
Severity: normal Version: 4.0
Component: Plugins Keywords: needs-patch
Focuses: ui Cc:

Description

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

Attachments (4)

proposed plugin review visual.png (283.4 KB) - added by Clorith 6 years ago.
Suggestion for plugin visual
29321.patch (995 bytes) - added by Clorith 6 years ago.
Style the plugin reviews
29321.diff (1.2 KB) - added by celloexpressions 6 years ago.
Improve the display of reviews with the existing markup (css changes only).
29321.png (15.2 KB) - added by celloexpressions 6 years ago.
With 29321.diff.

Download all attachments as: .zip

Change History (15)

#1 @SergeyBiryukov
6 years ago

  • Milestone changed from Awaiting Review to 4.0

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

See #29309.

#2 @SergeyBiryukov
6 years ago

  • Summary changed from Plugin details modal to Improve styling of reviews in plugin details modal

@Clorith
6 years ago

Suggestion for plugin visual

#3 @Clorith
6 years ago

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
6 years ago

Style the plugin reviews

#4 @Clorith
6 years ago

  • Keywords has-patch ui-feedback added

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>

This ticket was mentioned in IRC in #wordpress-dev by helen. View the logs.


6 years ago

@celloexpressions
6 years ago

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

#7 @helen
6 years ago

  • Owner set to helen
  • Resolution set to fixed
  • Status changed from new to closed

In 29619:

Plugin details: better review styling.

props Clorith, celloexpressions.
fixes #29321.

#8 @helen
6 years ago

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.

#9 @ocean90
6 years ago

  • Keywords needs-patch added; has-patch ui-feedback removed

[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.

Last edited 6 years ago by ocean90 (previous) (diff)

#10 @ocean90
6 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

#11 @helen
6 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 29624:

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

Remove some unnecessary CSS from [29619].

fixes #29321.

Note: See TracTickets for help on using tickets.