Page MenuHomePhabricator

As a 3d touch user, I expect previews to load quickly enough to be useful
Closed, ResolvedPublic

Description

Problem
Preview on 3D touch is slow to load. This is because we are using a web view.

Proposed solution
Make a special view for previews that we can load quickly.

Design
The preview adapts the card format we use for Because you read in the feed.
This both maintains design consistency and allows for reusing/adapting already existing components.

Initial 3D touch brings up the article preview card, followed by swipe to show actions

Lead image, 1 line title, 1 line WikidataImage, 2 line title, 2 line WikidataNo image, 2 line title, 2 line WikidataNo image, 1 line title, 2 line Wikidata
Peek - With image.png (667×375 px, 196 KB)
Peek - With image, two lines of title, two lines of Wikidata.png (667×375 px, 156 KB)
Peek - Without image, two lines of title, two lines of Wikidata.png (667×375 px, 89 KB)
Peek - No image, two line wikidata description.png (667×375 px, 89 KB)
Zeplin: https://zpl.io/ag8GjQAZeplin: https://zpl.io/aRMNexpZeplin: https://zpl.io/bAmGL7oZeplin: https://zpl.io/VQ0Wkvk

Design details

  • Title and Wikidata descriptions utilize the same truncation (2 lines for each) as on the Because you read feed card
  • Gray background increases in height to accommodate longer title / description strings (up to 2 lines each)
  • Image is capped at 150px (same as Because you read card)
  • If no image is available, no image is shown
  • Text is truncated at first paragraph or 135px in height

Related Objects

Event Timeline

JMinor updated the task description. (Show Details)
JMinor lowered the priority of this task from Low to Lowest.May 9 2016, 9:51 PM
JMinor moved this task from Backlog to Needs Estimation on the iOS-app-v5.1.0-Saturn board.
JMinor raised the priority of this task from Lowest to Medium.Aug 30 2016, 5:22 PM
JMinor moved this task from Tasks from Product Backlog to Doing on the iOS-app-v5.2.0-Honey board.
JMinor moved this task from Doing to Needs Engineering Sync on the iOS-app-v5.2.0-Honey board.

See edited task description with mocks.

Redline version is also on the Zeplin board:
https://zpl.io/Z21KiN7

We can use the preview store to load this data.

We need to ensure all API calls return extracts (like search)

Fjalapeno added a subscriber: JMinor.

@JMinor do you want us to prioritize this for the sprint?

There were comments from the other ticket on 3d touches to do this work. Figured we should bring in the real ticket for this instead of adding scope to the other ticket.

@JMinor – should showing actions immediately be broken out into a separate ticket based on meeting discussion that this would currently be a custom job?

@RHo Yes, we will need to file it as a follow on.

@NHarateh_WMF This is looking really good! Thanks for updating the typography to reflect the feed card styles.
There is just a remaining spacing issue for peeks of articles without an image.
Currently the spacing is not even above the Article title and below the Wikidata description (see below). Would it b possible to have the same spacing above the title as below the description? Thanks!

image.png (720×426 px, 131 KB)

Last comment moved to a task on 5.8.0, so resolving this, with the expectation spacing will be addressed there.