784125 - [desktop] How to scroll through screenshots?

Status: RESOLVED FIXED

(Marketplace Graveyard :: Consumer Pages, defect, P4)

Description

[krupa raj[:krupa]]

steps to reproduce:
1. Load https://marketplace-dev.allizom.org/app/checkers/?src= in 320x480
2. Try to scroll through screenshots

observed behavior:
a) Lot of padding on the screen on the left of the first screenshot
b) Unable to scroll through screenshots. We need a solution which works for both desktop and mobile.

Comment 1

[Christopher Van Wiemeersch [:cvan]]

I take it this is different from bug 782714?

Comment 2

[krupa raj[:krupa]]

(In reply to Chris Van Wiemeersch [:cvan] from comment #1)
> I take it this is different from bug 782714?

yes. The other bug is about screenshots not being visible. This is for scrolling.

Comment 3

[Christopher Van Wiemeersch [:cvan]]

Let's also do this for the lightbox.

Comment 4

[Matt Basta [:basta]]

cvan and I talked about point B offline a few days ago. Here is my proposed solution (for the details page only):

- Page scrolls like normal when mouse is outside of the screenshot tray
- When the cursor is inside the screenshot tray, scrolling down will scrub left (forward) in the screenshots. Scrolling up will scrub right (back).
- If the user scrolls such that they have scrubbed to the end of the screenshot tray (in either direction), the scroll wheel reverts to scrolling as usual.

Comment 5

[Potch [:potch]]

I'm always super nervous about trapping scroll, but if we can do this in a way that's quality I'm open to it! I'd also be just as open to putting some arrows in there, for the record :)

Comment 6

[Matt Basta [:basta]]

I like arrows too, as long as you have to click on them and they don't activate on hover.

Comment 7

[Potch [:potch]]

(In reply to Matt Basta [:basta] from comment #6)
> they don't activate on hover.
Goodness me! Definitely not that.

Comment 8

[Christopher Van Wiemeersch [:cvan]]

Maria, what should this look like?

Comment 9

[Maria Sandberg [:mushi]]

Can you guys clarify what platform you are asking about now? I know that Potch did some work on this for mobile, so is this question mostly desktop now? 

I'll be out next week, punting this one to Maureen.

Comment 10

[Christopher Van Wiemeersch [:cvan]]

(In reply to Maria Sandberg [:mushi] from comment #9)
> Can you guys clarify what platform you are asking about now? I know that
> Potch did some work on this for mobile, so is this question mostly desktop
> now? 

Per the bug title, this is for desktop.

For example we have the carousel here: http://people.mozilla.org/~cwiemeersch/mkt-mocks/desktop/Details.jpg

1) Do we need arrows or something? (Using the mouse how does the user swipe to the next image?)
2) The little circle icons: say the first circle is active (blue), would the first screenshot be visible in the center (and nothing on the left side)? (In other words, should the behaviour for desktop be exactly the same as the behaviour we're doing for mobile currently : https://marketplace.firefox.com/app/pasjanssolitaire/)

> I'll be out next week, punting this one to Maureen.

Comment 11

[Maureen Hanratty]

1) Do we need arrows or something? (Using the mouse how does the user swipe to the next image?)

Yes, I think we might need arrows (on hover?) so the user can advance the carousel (the circles are too small target for a mouse). I'll look at what other sites are doing and get back to you with a final confirm.

For a user with a touchpad, would it be possible for the user to put their pointer in the carousel box and swipe through the screenshots? Currently you have to click and then swipe which is kind of tough.

2) The little circle icons: say the first circle is active (blue), would the first screenshot be visible in the center (and nothing on the left side)? (In other words, should the behaviour for desktop be exactly the same as the behaviour we're doing for mobile currently : https://marketplace.firefox.com/app/pasjanssolitaire/)

I think

Comment 12

[Maureen Hanratty]

2) The little circle icons: say the first circle is active (blue), would the first screenshot be visible in the center (and nothing on the left side)? (In other words, should the behaviour for desktop be exactly the same as the behaviour we're doing for mobile currently : https://marketplace.firefox.com/app/pasjanssolitaire/)

I think it looks ok with the current implementation. Mike--what do you think?

Comment 13

[Michael Maslaney [:mmaslaney] ([e-mail])]

I think the desktop should mirror the same behavior as mobile (carousel order and gesture swiping), with the exception of carousel arrows for desktop users without a touch pad device.

I can provide a comp to further illustrate the carousel arrows for the desktop screen.

Comment 14

[Maureen Hanratty]

Attachment: lightbox view on desktop

That would be great if you could mock up the carousel arrows. In addition to the view in comment #10 can you also mock arrows up for the lightbox view?

Comment 15

[Michael Maslaney [:mmaslaney] ([e-mail])]

(In reply to Maureen Hanratty from comment #14)
> Created attachment 685325 [details]
> lightbox view on desktop
> 
> That would be great if you could mock up the carousel arrows. In addition to
> the view in comment #10 can you also mock arrows up for the lightbox view?

For sure.

Comment 16

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Scroll Arrows + Interactions (on hover)

Please find the following App preview scroll arrows, designated for desktop users who do not have a touchpad device:

https://www.dropbox.com/s/68syabwje28p38d/Marketplace-%28Desktop%29-i01-AppDetails.psd

Note: We can use the same arrows and their interactions for the "lightbox" screen.

Comment 17

[Christopher Van Wiemeersch [:cvan]]

Thanks, Michael. This looks good. How should the modal look when you click on a screenshot to view its full-size version? (See attachment 685325 [details].)

Comment 18

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Scroll Arrows + Interactions (on hover)

Chris, 

I went ahead and created a mockup for this interaction.

Let me know if you need anything else.

FILE:
https://www.dropbox.com/s/68syabwje28p38d/Marketplace-%28Desktop%29-i01-AppDetails.psd

Comment 19

[Christopher Van Wiemeersch [:cvan]]

Michael, excellent. All looks good for implementation. Thank you!

Comment 20

[Davor Spasovski [:spasovski]]

done: https://github.com/mozilla/zamboni/commit/0279123