Page MenuHomePhabricator

Implement link preview on mobile beta
Closed, ResolvedPublic

Description

Bucketing
Only deploy for 50% of users on mobile beta, determined on a random basis.
Currently deployed to all beta users. We can re-evaluate this later.

Design
First version of link preview will have only title, text extract, and continue to article button. Link preview will pop up on any click on a link on article pages (not from search or anywhere else).

Title - Georgia, 22px
Text extract - regular body text font stack, 15px, same extract length as gather cards
Spacing included in mock
Animates up and down from bottom like other drawers

.
On wider screens, link preview will have a max-width of 500 px.
Increase padding to left and right of text to 30px.


Only on mobile beta, since we're going to be using the normal text extracts API because the extracts RESTBASE api is still in the works Restbase text extracts seems like it would be deployed the 20th https://phabricator.wikimedia.org/T117082.

Event Timeline

Jdlrobson assigned this task to KHammerstein.
Jdlrobson raised the priority of this task from to Normal.
Jdlrobson updated the task description. (Show Details)
Jdlrobson set Security to None.

Ping @KHammerstein we need this by Monday...preferably Friday so we can discuss.

Jdlrobson edited a custom field.Sep 24 2015, 5:54 PM

@Jdlrobson Talked with @JKatzWMF and we will delay this just a bit so that we can further analyze data from link preview on android. Read more first!

@KHammerstein let's use prototype 1 from android for now. Hopefully this can be finished by EOD Monday before the sprint starts.

KHammerstein edited a custom field.
KHammerstein updated the task description. (Show Details)
KHammerstein updated the task description. (Show Details)

@KHammerstein please add dismiss button. Thanks!

Jdlrobson moved this task from Backlog to Tasks on the MobileFrontend board.Nov 4 2015, 5:01 PM
Jhernandez renamed this task from Implement link preview on mobile to Implement link preview on mobile beta.Nov 16 2015, 5:25 PM
Jhernandez updated the task description. (Show Details)
KLans_WMF removed subscribers: Jhernandez, Nirzar.
JKatzWMF updated the task description. (Show Details)Nov 16 2015, 5:43 PM
Jhernandez updated the task description. (Show Details)Nov 17 2015, 6:51 PM

@Nirzar still pissing dismiss button

@Nirzar still pissing dismiss button

Dude, some guy just broke in and wrote a crazy sounding sentence on my computer. I barely caught a glimpse of him, but he looked dangerous. Watch out.

Missing. We are missing the dismiss button.

@JKatzWMF hmm.. katz burglar

yes, we are missing the dismiss but i was also thinking of doing a popover style preview for tablets. let me just add an iteration right here. we can discuss then.

i was also thinking of doing a popover style preview for tablets. let me just add an iteration right here. we can discuss then.

@ nirzar first things first, as we kick-off on Monday

@JKatzWMF alright. here's a working prototype

click on the "San Francisco Bay" blue link in the article to view the link-preview
http://nirzar.github.io/prototypes/mobile-web/link-preview/index.html

@Nirzar thanks, this is awesome.

Change 254776 had a related patch set uploaded (by Florianschmidtwelzow):
[WIP] Add link preview feature to beta mode

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

I was a bit confused about the design, because @Nirzar's design in the task description differs a bit from the prototype, so I was free and took the one of the task description (without a dismiss button). The above change will result in the following:

when the text is loading
when the drawer is open (mobile device)
when the drawer is open (desktop/tablet)

Open questions:

  • Shouldn't there a dismiss button (e.g. like in the prototype, or like in other drawers with a little X at the top right)? It could be a bit confusing for a user, if the drawer has only the "Continue to article" option, even if he could close the drawer by clicking on the content.
  • I still think, that changing the default behaviour how links work in browsers, isn't such a good idea, but hey! So, my suggestion: The change already checks for a localStorage/Cookie, and if set, it will not load the linkpreview feature. But I haven't implemented an option to change the value. So the question: Would you be ok with such an option (please say yes! :P)? If yes, I'll invest some work to implement this (and logged-in users will not get any linkpreview module to reduce data usage) :)

@Florian

  1. yes, we need dismiss button. we want to keep it simple for now and just add a secondary button to the drawer which says dismiss. like in the prototype
  2. we can have similar option like the hovercards on desktop. a cog which has options to disable this feature. but that's more scope i guess. ping @JKatzWMF

Minor visual design tweak needed from what I'm seeing the screenshots.

  1. the spacing below (margin botton) of the title is more than what is there in the html prototype.
  2. there is no overlay under the drawer like in the html prototype
  3. the loading indicator can be vertically centered

you can pickuo font sizes, styles, colors, margins and paddings from the html prototype.

@Florian

  1. yes, we need dismiss button. we want to keep it simple for now and just add a secondary button to the drawer which says dismiss. like in the prototype

And both buttons should be right aligned?

  1. we can have similar option like the hovercards on desktop. a cog which has options to disable this feature. but that's more scope i guess. ping @JKatzWMF

Like I said, I would be very unhappy, if this feature wouldn't have an "off"-switch :)

  1. the spacing below (margin botton) of the title is more than what is there in the html prototype.

Yes, 20px fixed, like in the mockup of the task description :) So, I should use the sizes of the prototype?

  1. there is no overlay under the drawer like in the html prototype

Hmm, it's missing in the mockup :P let me implement it ;)

  1. the loading indicator can be vertically centered

+1

And both buttons should be right aligned?

Yes

Yes, 20px fixed, like in the mockup of the task description :) So, I should use the sizes of the prototype?

The spacing below the title can be 20px but the screenshot that you attached, it's 35px. (the green box shown above is 20px square)

Hmm, it's missing in the mockup :P let me implement it ;)

one small note on that, tapping on the overlay should dismiss the drawer like usual overlay behavior

There we go :)

"normal" page view
loading (mobile device)
when the drawer is open (mobile device)
when the drawer is open (desktop/tablet)

Clicking "Continue to article" will redirect the user to the article. Clicking "Dismiss", or tapping the gray overlay, will close the drawer without redirecting to the article.

Jdlrobson lowered the priority of this task from Normal to Low.Dec 3 2015, 10:15 PM
Jdlrobson changed the task status from Open to Stalled.Dec 22 2015, 12:08 AM

Waiting for some feedback from Florian about where this feature should live.

Change 260578 had a related patch set uploaded (by Florianschmidtwelzow):
[WIP/MobileFrontend] Add link preview feature to mobile beta mode

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

Change 254776 abandoned by Florianschmidtwelzow:
[WIP] Add link preview feature to beta mode

Reason:
See Idbaae9fe2decd89b73e623a25fbd39464c316fb2 in Popups

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

Florian changed the task status from Stalled to Open.Dec 22 2015, 2:54 PM

The change above has the same design, I simply moved the code to the popups extension.

Thanks @Florian for clarifying! What can we help with?

Change 260787 had a related patch set uploaded (by Florianschmidtwelzow):
Add mw-content-text class to bodytext

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

Change 260787 abandoned by Florianschmidtwelzow:
Add mw-content-text class to bodytext

Reason:
it's better to do this:
I11fd44f183a95c7564961c6273235c126eaa3b8b

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

Jdlrobson changed the task status from Open to Stalled.Jan 28 2016, 11:44 PM

Stalled until @Florian removes the WIP tag. I think it looks good so not sure what we're waiting on! Let's get this moving! :)
@Florian set status back to open when you want some more review.

Florian changed the task status from Stalled to Open.Jan 29 2016, 5:09 PM

I'm still working on it :)

Patch is -1ed

Change 260578 merged by jenkins-bot:
Add link preview feature to mobile beta mode

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

Jdlrobson closed this task as Resolved.Mar 12 2016, 12:46 AM
Jdlrobson updated the task description. (Show Details)

Change 279934 had a related patch set uploaded (by Florianschmidtwelzow):
Enable mobile link preview (popups) on beta labs wikis

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

Change 279934 merged by jenkins-bot:
Enable mobile link preview (popups) on beta labs wikis

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