600397 - Implement add-on details view of discovery pane

Status: RESOLVED FIXED

(addons.mozilla.org Graveyard :: Discovery Pane, defect, P1)

Description

[Justin Scott [:fligtar]]

We should implement the details view of the discovery pane. Mocks are here: http://people.mozilla.com/~chowse/drop/amo/discovery/v2/

chowse also gave some style guidelines here: https://bugzilla.mozilla.org/show_bug.cgi?id=582410#c3

Other notes:
* All links should open in new tabs except any links back to the disco pane. (the <base> should be the same as the main disco pane page)

* The main disco pane should be updated to link all add-ons to this view in the same tab.

* Install buttons and links to the full add-on details page should have src=discovery-pane

* All roadblocks will open in a new tab to the normal roadblock page. (contributions, eula) Do not implement the EULA subpage shown in the mocks.

* Ideally we would never see any experimental or incompatible add-ons here, but unless it's really difficult, we should show the standard install button pop-ups here.

Comment 1

[Wil Clouser [:clouserw]]

Any updates here?

Comment 2

[Craig Cook (:craigcook)]

(In reply to comment #1)
> Any updates here?

I'll be able to start on it as soon as I finish up some work on QMO, so you should have it by the end of next week.

Comment 3

[Wil Clouser [:clouserw]]

awesome, thanks

Comment 4

[Wil Clouser [:clouserw]]

Any updates?

Comment 5

[Craig Cook (:craigcook)]

(In reply to comment #4)
> Any updates?

Sorry, I'm behind and it's still in progress, but I should have it finished tonight.

What's the best method for delivery? Should I just zip the static files again, or put it somewhere in SVN or Git? The new page shares some of the same resources as the main pane so I should at least sync up with any CSS/JS/image changes you've made.

Comment 6

[Wil Clouser [:clouserw]]

(In reply to comment #5)
> (In reply to comment #4)
> > Any updates?
> 
> Sorry, I'm behind and it's still in progress, but I should have it finished
> tonight.
> 
> What's the best method for delivery? Should I just zip the static files again,
> or put it somewhere in SVN or Git? The new page shares some of the same
> resources as the main pane so I should at least sync up with any CSS/JS/image
> changes you've made.


If you're able, forking github.com/jbalogh/zamboni and committing to your own branch is ideal.  Otherwise, a zip is fine.  All of our css/js/image changes are at that github address - let me know if you need any help with that.

Comment 7

[Craig Cook (:craigcook)]

I've added two new static templates and updated the CSS and JS in my own branch (hope I did that right) at https://github.com/craigcook/zamboni/, specifically https://github.com/craigcook/zamboni/commit/fae48c8fc3b464ec6bd9220922d99af7acedc779. Let me know if I broke something, but hopefully you can just merge that in and start working.

You can see previews at http://mozilla.focalcurve.com/discoverypane/detail.html and http://mozilla.focalcurve.com/discoverypane/detail-eula.html

The mockups indicate that the screenshot thumbnails should open with a zooming lightbox effect, but I haven't yet done anything with that because I thought you might already be using that effect somewhere else. Do you already have that that effect in use somewhere that we can swipe from, or should I hunt down a good jquery plugin?

I saw you removed all the -moz- prefixes from the border-radius declarations, but when I test in beta6 there are still no rounded corners without the prefix. Do we have it on good authority that unprefixed border-radius will be supported in the final release of FF4? Same goes for box-shadow.

Also, I've only added styles for green and blue buttons. Do we need any other button styles? The yellow caution buttons or gray disabled buttons?

Comment 8

[Justin Scott [:fligtar]]

(In reply to comment #7)
> The mockups indicate that the screenshot thumbnails should open with a zooming
> lightbox effect, but I haven't yet done anything with that because I thought
> you might already be using that effect somewhere else. Do you already have that
> that effect in use somewhere that we can swipe from, or should I hunt down a
> good jquery plugin?
> 

Hmm, I wonder if we could do that with CSS transitions instead.

Comment 9

[Potch [:potch]]

The code in the branch looks solid.

Comment 10

[Wil Clouser [:clouserw]]

w00t, thanks for the code craig and the review potch.  We'll get someone to merge this in for 5.12.4

Comment 11

[Wil Clouser [:clouserw]]

Chris, can you merge this in and make sure it works?  Let me know if there are questions.

Comment 12

[Christopher Van Wiemeersch [:cvan]]

Per the discussion here -- https://bugzilla.mozilla.org/show_bug.cgi?id=582410#c4 -- upon click, should the thumbnails be opened in a lightbox?

Comment 13

[Justin Scott [:fligtar]]

Yes, we want hardcore zooming action. I think it's probably doable with CSS transitions, which we'd prefer, but JS is acceptable as a last resort. I'm not sure if we want it to be lightbox in the sense that the background should fade and it should be modal. I think it'd actually probably look just fine only zooming the image and clicking off to zoom back.

chowse?

Comment 14

[Chris Howse [:chowse]]

(In reply to comment #13)
> I'm not
> sure if we want it to be lightbox in the sense that the background should fade
> and it should be modal. I think it'd actually probably look just fine only
> zooming the image and clicking off to zoom back.

Here's how the lightbox should look/behave:

* There should be an animated transition from the thumbnail to the lightbox.
  It's not essential that the image itself zooms (it could simply be a white
  frame that expands and then loads the image), but it would be ideal. You
  can find an example of the effect here:
  http://static.railstips.org/orderedlist/demos/fancy-zoom-jquery/

* Clicking outside the lightbox should dismiss it. Clicking ON the lightbox
  itself (except, perhaps, on the caption) should dismiss it too. I might
  make an exception for the latter if we support navigation within the
  lightbox itself (see below). The key thing is, it should be quick to step
  through screenshots.

* Because of the aforementioned action, I'd recommend fading the content
  beneath the lightbox in some fashion. In my mock-ups, I did this by
  overlaying the page with an rgba(216,225,239,.75) background. This can also
  be used to trap the click-outside-the-lightbox action.

* (Optional) It would be nice to navigate between screenshots within the
  lightbox itself. We could do this by adding rockers (similar to the ones
  on the screenshot carousel) to each side of the lightbox, and moving 
  backwards/forwards through the list on a click. The only difference I'd
  suggest is making the rockers completely invisible until the user moves
  their mouse close to them. Because this would be more complex to implement
  (changing the size of the lightbox, updating captions and images, keeping
  track of image order and boundaries), I'd be okay to drop this feature for
  the first release.

Comment 15

[Christopher Van Wiemeersch [:cvan]]

Committed: https://github.com/jbalogh/zamboni/commit/d420097

Comment 16

[Stephen Donner [:stephend] Not actively reading bugmail]

Might this have caused bug 615363?