Does "animate" mean just that, or some kind of drag mechanics (where the card moves in sync with your finger so it feels like dragging paper)? The latter is common on mobile apps but probably more effort.

In T268709#6647494, @Tgr wrote:

Does "animate" mean just that, or some kind of drag mechanics (where the card moves in sync with your finger so it feels like dragging paper)? The latter is common on mobile apps but probably more effort.

Preferably the latter with some haptic feedback.

@mewoph -- this is a user interface improvement that is Ready for Development, and is a good candidate for our interlude period right now. My understanding is that nothing in Mediawiki works like this yet, and I imagine that the first order of business is just to get a sense of what it would take to make this "grabbing and swiping" gesture possible for our mobile web experience. After we assess that, we can decide whether/how to proceed.

Some rough ideas for swipe gesture implementation:

• Calculate the delta of Touch.clientX via touchstart and touchmove events and use that to determine whether the swipe gesture was for left or right (will need to make sure to handle both LTR and RTL sites)
• Make suggested-edits-card draggable, create drop areas on the sides and update the content upon drop

In either case, we probably need to render two cards at once instead of one so that when the top one moves, the second one appears.

Hi @RHo,

A couple of things:

• Haptic feedback is not possible on iOS since iOS & Safari do not support Navigator.vibrate API, so haptic feedback would only be for Android.
• The task description is not part of the card. Would the description for the new card just pop in when the next card becomes the top card?

In T268709#7195210, @mewoph wrote:

Hi @RHo,

A couple of things:

• Haptic feedback is not possible on iOS since iOS & Safari do not support Navigator.vibrate API, so haptic feedback would only be for Android.
• The task description is not part of the card. Would the description for the new card just pop in when the next card becomes the top card?

hi @mewoph - yes that's right, the description should pop in if it's different on swiping forward/backward in the queue. I've added a screencast from the axure prototype as an indicative demo if that helps.

Change 704634 had a related patch set uploaded (by MewOphaswongse; author: MewOphaswongse):

[mediawiki/extensions/GrowthExperiments@master] [WIP] Suggested Edits: Add mobile swiping gesture

https://gerrit.wikimedia.org/r/704634

Updated navigation:

Change 704634 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Add mobile swiping gesture for task feed

https://gerrit.wikimedia.org/r/704634

Hi @mewoph thanks this looks good to me but it looks like there has been a slight regression where the card no longer has the border-radius 2px (you can still see it on desktop).
Would you prefer I open a new task or to keep on this one?

Hi @RHo, please open a new task. I don't think this is a regression. We never had the rounded corners for the mobile task card. Here's a screenshot from before this change was merged.

Hi @MMiller_WMF,

Making the card stick to the touch would be a different set of work and might require a fairly significant reworking of the suggested edits screen. Can you file a separate task?

The timing of the animation can be updated easily. Reducing the sensitivity of the vertical swipe should be fairly straightforward as well. Updated via T289627: Suggested Edits: Improve swiping animation (mobile)

FYI I filed another task to make the topic & difficulty filters so the vertical scrolling should be less weird since only the content would scroll T288842: Suggested Edits: Topic & difficulty filters should be fixed along with header (mobile)