Create Task
Maniphest T113001

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

  • M83 Feed styling spec
    30

    • 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...

    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.
    JMinor added a comment.Sep 24 2015, 8:41 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
    Nirzar added a comment.Oct 1 2015, 5:51 AM

    @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 KBDownload

    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.
    Mhurd added a comment.Oct 2 2015, 12:22 AM

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

    • BGerstle-WMF added a subscriber: • BGerstle-WMF.Oct 2 2015, 6:57 PM

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

    Mhurd added a comment.Oct 7 2015, 8:54 PM

    @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.

    Mhurd added a comment.Oct 7 2015, 11:54 PM

    @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...

    Mhurd added a comment.Oct 10 2015, 2:41 AM

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

    • KHammerstein added a comment.Oct 20 2015, 12:37 AM

    @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
    Etonkovidova added a subscriber: Etonkovidova.Nov 25 2015, 10:37 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

    iPad mini iOS 8.2

    iPhone 6S 9.1

    iPhone 5 iOS 9.02

    Restricted Application added a subscriber: StudiesWorld. · View Herald TranscriptNov 25 2015, 10:37 PM
    JMinor closed this task as Resolved.Dec 3 2015, 12:32 AM
    Content licensed under Creative Commons Attribution-ShareAlike 3.0 (CC-BY-SA) unless otherwise noted; code licensed under GNU General Public License (GPL) or other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL