[desktop] How to scroll through screenshots?

RESOLVED FIXED in 2013-01-31

Status

Marketplace
Consumer Pages
P4
normal
RESOLVED FIXED
6 years ago
5 years ago

People

(Reporter: krupa, Assigned: spasovski)

Tracking

2013-01-31
Points:
---

Details

(Whiteboard: u=patron p=2, URL)

Attachments

(3 attachments)

(Reporter)

Description

6 years ago
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.
Blocks: 766199
No longer blocks: 756282
I take it this is different from bug 782714?
(Reporter)

Comment 2

6 years ago
(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.
(Reporter)

Updated

6 years ago
Summary: How to scroll through screenshots? → [desktop] How to scroll through screenshots?
Priority: -- → P4
No longer blocks: 766199
Let's also do this for the lightbox.

Comment 4

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

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

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

Comment 7

6 years ago
(In reply to Matt Basta [:basta] from comment #6)
> they don't activate on hover.
Goodness me! Definitely not that.
Whiteboard: [janus] → uiwanted
Maria, what should this look like?
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.
(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

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

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

6 years ago
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?
(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.
Created attachment 688304 [details]
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.
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].)
Created attachment 688360 [details]
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
Michael, excellent. All looks good for implementation. Thank you!
Whiteboard: uiwanted
Target Milestone: --- → 2013-01-17
Assignee: thepotch → dspasovski
Target Milestone: 2013-01-17 → 2013-01-24
(Assignee)

Updated

5 years ago
Target Milestone: 2013-01-24 → 2013-01-31
Whiteboard: u=patron p=2
(Assignee)

Updated

5 years ago
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.