557879 - Port user review pages to zamboni

Status: RESOLVED FIXED

(addons.mozilla.org Graveyard :: Public Pages, defect, P2)

Description

[krupa raj[:krupa]]

https://preview.addons.mozilla.org/en-US/firefox/reviews/display/<addonID>
should be fully ported to zamboni if we are planning to push add-on details page live in 5.10.

Comment 1

[Wil Clouser [:clouserw]]

Why can't we use the existing remora pages?

Comment 2

[krupa raj[:krupa]]

There is already a zamboni page for reviews which is incomplete.
(https://preview.addons.mozilla.org/z/en-US/firefox/addon/1865/reviews/)

I filed a bug for tracking as we plan to push the add-on detail page live in 5.10.

I also think we can fix a few review bugs in the process(http://tinyurl.com/yc3p239)

Comment 3

[Jeff Balogh (:jbalogh)]

(In reply to comment #1)
> Why can't we use the existing remora pages?

We can, we'll just have to temporarily hijack Review.get_url_path.  The buttons and maybe some other things will be inconsistent, but oh well.

(In reply to comment #2)
> I also think we can fix a few review bugs in the
> process(http://tinyurl.com/yc3p239)

Holy scope creep!

Comment 5

[Wil Clouser [:clouserw]]

-> P2 for this bug, not for the scope creep

Comment 6

[Jeff Balogh (:jbalogh)]

Here's what could get rolled into this bug:

# Old bugs
spam filtering (bug 537105)
url for each review (bug 384798)
link to developer review from front page (bug 453128)
show the version the review was for (bug 386625)
rss feed (bug 568127, 480002, 456418)


# Other
show all developer replies in one page
show thread for developer replies?
separate versions from reviews -- necessary for personas


# UI improvements
less emphasis on reporting (bug 508215)
different color/decoration for developer comments

Chowse, do you have any ideas for the UI improvements?  Attachment 392450 [details] shows bug 508215, and I have no idea what we do for dev comments right now.  But we should probably call those out since they're answering user questions.

Comment 7

[Chris Howse [:chowse]]

(In reply to comment #6)
For reporting:

- Replace the <select> with a link that exposes a drop-down. For an example, see
  the 'Add to Collection' in this mock-up:
  http://people.mozilla.com/~chowse/drop/amo/electric-bandwagon/v1/Interactions.png

- Use a smaller typeface.

- Place it (along with the reply/delete actions) after the message.

- (Optionally) Hide or fade the actions until the user hovers over the message.


Other random thoughts:

- Developer responses could be highlighted with color or visual markers
  (icons, labels, etc).

- We need a better visual separation of replies (dotted line, boxes, etc).

- Can replies be nested? If not, do we support blockquoting or backlinks?

- If we can't show an individual review on a page, we could use a 'brighten
  and lighten' effect when the user visits the page through a hash (see
  http://developer.yahoo.com/ypatterns/richinteraction/transition/brighten.html)

Let me see if I can turn these into quick mocks.

Comment 8

[Jeff Balogh (:jbalogh)]

(In reply to comment #7)
> - We need a better visual separation of replies (dotted line, boxes, etc).

Yes!

> - Can replies be nested? If not, do we support blockquoting or backlinks?

Developer replies can be nested, but that's the only method we expose to nest reviews.  We don't have blockquoting or backlinking either, though I've seen reviews trying to talk to each other.  Unlimited nesting is way more out of scope than the other things I'm already including.

> - If we can't show an individual review on a page, we could use a 'brighten
>   and lighten' effect when the user visits the page through a hash

We'll be able to do both.

Thanks chowse.

Comment 9

[Chris Howse [:chowse]]

Attachment: Mock-up of Review Page

Here's a mock-up of how the Review page could look w/ the proposed changes, along with a few other random ideas (review sorting, a star rating breakdown, etc.).

Comment 10

[Justin Scott [:fligtar]]

Awesome!

Comment 11

[Wil Clouser [:clouserw]]

To be consistent with our current duplication of data the breadcrumbs should include the <h2> title on the page too.  Otherwise it does look awesome.  I don't think we currently allow people to reply to developers though (or, more accurately, developers are given one reply to any comment and that's it), so the reply box should be for another review.

Comment 12

[Chris Howse [:chowse]]

(In reply to comment #11)
> I don't think we currently allow people to reply to developers though

Sorry, poor documentation on my part. The 'Report' options is available to anyone, the 'Reply' option for authors (and admins?), and the 'Delete' option for admins or the review writer. If the person viewing the page doesn't have permissions, that element should be removed.

> (or, more
> accurately, developers are given one reply to any comment and that's it)

Is that one reply per review, or one reply for ALL reviews (like a developer's bulletin board)?


> so the reply box should be for another review.

Yes. I included it there to show the relationship to the review, but there should be no need for a second reply (but maybe a way to edit the existing reply?)

Comment 13

[Jeff Balogh (:jbalogh)]

chowse: do you want me to freestyle on "See <n> previous reviews from this user"? http://grab.by/4SU1

Comment 14

[Chris Howse [:chowse]]

Latest review mock-ups:

  Complete Version:
  http://people.mozilla.com/~chowse/drop/amo/reviews/Reviews.png

  Simplified Version (no avatars, sorting, all vs.latest version):
  http://people.mozilla.com/~chowse/drop/amo/reviews/Reviews-Simpler.png

  Masters (Omnigraffle):
  http://people.mozilla.com/~chowse/drop/amo/reviews/amo-reviews.graffle.zip

And here's the styling for some of the new elements:

.review {
   background: #fff;
   border: 1px solid #c8e8f2;
   padding: 1em;
   border-radius: .5em;
}

.review .title {
   font-size: 16px;
   font-weight: bold;
}

.review .text-below-title {
   font-size: 11px;
}

.review .footer-text {
   font-size: 11px;
   font-style: italic;
}

.review .footer-links {
   color: #999;
   font-style: normal;
}

.review:hover .footer-links {
   color: /* typical link color */;
}

.review.author-reply {
   background: #f2f9ee;
   border-color: #c6dbb5;
}

.review.author-reply-form {
   background: #c8e8f2;
}

.review.older-version {
   background: #f0f0f0;
   border-color: #e0e0e0;
}

.sidebar .title {
   font-size: 14px;
}

.sidebar .text {
   font-size: 11px;
}

.sidebar .bars {
   background: #93bfcd;
}

.sidebar .middle-bar {
   border-left: 1px solid #999;
}

.sidebar .separators {
   border-bottom: 1px dotted #93bfcd;
}

Everything else should follow the existing Zamboni styling. Feel free to look at the masters if I overlook anything.

Comment 15

[Jeff Balogh (:jbalogh)]

The first (non-interactive) part of this landed in http://github.com/jbalogh/zamboni/commit/06939f6.

Comment 16

[Jeff Balogh (:jbalogh)]

All dependent bugs are in 5.11.7, I'm calling this fixed.

Comment 17

[Jeff Balogh (:jbalogh)]

adding & replying: http://github.com/jbalogh/zamboni/commit/6d4a5f3