Update styling and grouping of cards on feed for iOS app 5.0
Closed, ResolvedPublic3 Story Points
Actions

Description

Update styling for the feed. here's a the spec for the feed styling that @KHammerstein and I worked on

Acceptance criteria:
Article Preview Card View layout in portrait mode should match the attached pholio mockup.

Note that if an article doesn't have a valid lead image, no image is shown. See spec for details on other details of Article Preview Card View behavior.

Related Objects
Search...

Status	Assigned	Task
Resolved	JMinor	T112998 Design fixes for the Wikipedia 5.0
Resolved	Mhurd	T113757 WMFArticlePreviewCell unsatisfiable constraints
Resolved	Mhurd	T113001 Update styling and grouping of cards on feed for iOS app 5.0

Nirzar created this task.Sep 17 2015, 11:21 PM

Nirzar updated the task description. (Show Details)

Nirzar raised the priority of this task from to Needs Triage.

Nirzar assigned this task to Fjalapeno.

Nirzar added a project: Wikipedia-iOS-App-Development.

Nirzar added a mock: M83: Feed styling spec.

Nirzar added subscribers: Aklapper, MBinder_WMF, MSyed and 4 others.

Nirzar removed Fjalapeno as the assignee of this task.Sep 18 2015, 6:10 PM

Nirzar set Security to None.

BGerstle-WMF edited projects, added Wikipedia-iOS-App-Backlog; removed Wikipedia-iOS-App-Development.Sep 18 2015, 6:43 PM

BGerstle-WMF moved this task from Needs Triage to Needs Estimation on the Wikipedia-iOS-App-Backlog board.

BGerstle-WMF mentioned this in T112998: Design fixes for the Wikipedia 5.0 .Sep 21 2015, 5:48 PM

@Nirzar @KHammerstein please attach pdf assets for the new icons for feed sections.

Nirzar updated the task description. (Show Details)Sep 25 2015, 5:22 PM

MBinder_WMF added a project: WorkType-NewFunctionality.Sep 25 2015, 7:24 PM

MBinder_WMF edited a custom field.

MBinder_WMF edited projects, added Wikipedia-iOS-App-Development; removed Wikipedia-iOS-App-Backlog.Sep 25 2015, 7:31 PM

@JMinor the assets for this have been added to https://phabricator.wikimedia.org/M91

The only one that is not there is the placeholder icon for images. here https://phabricator.wikimedia.org/M83/223/

So attaching the icon PDF here for that

image-placeholder.pdf4 KB

Mhurd moved this task from Tasks from Product Backlog to Doing on the Wikipedia-iOS-App-Development board.Oct 2 2015, 12:00 AM

Mhurd claimed this task.

@Nirzar Hey I'm starting on this ticket in the morning - are the attached assets still good to go?

Yes!

@Nirzar Cool thanks!

JMinor mentioned this in T105424: As a user, I would like to see Featured Article as a card in the Discover feed.Oct 2 2015, 4:36 AM

@Mhurd see if T113757 is fixed as a result of this styling

BGerstle-WMF mentioned this in T113757: WMFArticlePreviewCell unsatisfiable constraints.Oct 7 2015, 4:30 PM

BGerstle-WMF added a parent task: T113757: WMFArticlePreviewCell unsatisfiable constraints.

@Nirzar @JMinor

This PR implements the most obvious changes specified in the "treatment" mock - i.e. moving the title description below the image, edge-to-edge spacing, removing drop shadow etc:
https://github.com/wikimedia/wikipedia-ios/pull/148

I am starting on follow-on now to address all of the tiny padding, font-size/color and other smaller bits from the other mocks.

@Nirzar - hey in Treatment.png, should we use same blue for both collection title (i.e. "Edward norton" ) and "Save for later"? Right now they're slightly different...

Style updates cleaning up summary text and reducing vertical spacing between items:
https://github.com/wikimedia/wikipedia-ios/pull/153

Mhurd moved this task from Doing to Needs Code Review on the Wikipedia-iOS-App-Development board.Oct 12 2015, 9:34 PM

Mhurd moved this task from Needs Code Review to Needs QA on the Wikipedia-iOS-App-Development board.Oct 14 2015, 9:10 PM

@Mhurd
Image height incorrect - should be a 16:9 ratio. On iphone 6 ~ 192 pt

JMinor updated the task description. (Show Details)Oct 22 2015, 10:28 PM

Checked with 5.0.0.520 on iPad mini iOS 8.2 and iPhone 5 iOS 9.02
Checked with 5.0.0.520 on iPhone 6S+ 9.1