mobile-html: update footer with updated design
Closed, ResolvedPublic
Actions

Description

Background information

The design of the mobile-html footer was updated in T226094 to unify the look across both platforms

What

Update the page footer to match the new design in T226094.
Save buttons were removed so any functionality related to the save buttons and article saved state can be removed.
Allow clients to pass in page fragments for the sections that will be added so they can add the corresponding sections to the table of contents. The interface would change from:

pagelib.c1.Footer.add({
...
  menuItems: [pagelib.c1.Footer.MenuItemType.languages, pagelib.c1.Footer.MenuItemType.lastEdited, pagelib.c1.Footer.MenuItemType.pageIssues, pagelib.c1.Footer.MenuItemType.disambiguation, pagelib.c1.Footer.MenuItemType.talkPage, pagelib.c1.Footer.MenuItemType.referenceList],
...
  readMore: { 
    itemCount: 3,
    baseURL: 'https://en.wikipedia.org/api/rest_v1'
  }
})

pagelib.c1.Footer.add({
...
  menu: {
    items: [pagelib.c1.Footer.MenuItemType.languages, pagelib.c1.Footer.MenuItemType.lastEdited, pagelib.c1.Footer.MenuItemType.pageIssues, pagelib.c1.Footer.MenuItemType.disambiguation, pagelib.c1.Footer.MenuItemType.talkPage, pagelib.c1.Footer.MenuItemType.referenceList],
    fragment: 'about_this_article'
  },
...
  readMore: {
    fragment: 'read_more',
    itemCount: 3,
    baseURL: 'https://en.wikipedia.org/api/rest_v1'
  }
})

Related Objects
Search...

Status	Subtype	Assigned	Task
Open		None	T169242 Develop Page Content Service for Reading Clients
Open		None	T177425 Develop General Layer of PCS
Open		None	T177433 Develop HTML Content API to be used with companion structured JSON APIs
Resolved	Spike	JMinor	T228459 mobile-html: prioritized list of remaining bugs & feature requests
Open		None	T226094 Unified iOS and Android article footer design
Resolved		MSantos	T230036 mobile-html: update footer with updated design

Event Timeline

JoeWalsh created this task.Aug 7 2019, 3:55 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 7 2019, 3:55 PM

JoeWalsh mentioned this in T228459: mobile-html: prioritized list of remaining bugs & feature requests.Aug 7 2019, 3:56 PM

JoeWalsh added a parent task: T226094: Unified iOS and Android article footer design.

JoeWalsh triaged this task as Medium priority.Aug 7 2019, 3:59 PM

JoeWalsh added a parent task: T228459: mobile-html: prioritized list of remaining bugs & feature requests.

JoeWalsh updated the task description. (Show Details)Aug 10 2019, 10:28 AM

Jhernandez assigned this task to bearND.Aug 14 2019, 3:43 PM

Jhernandez edited projects, added Product-Infrastructure-Team-Backlog (Kanban); removed Product-Infrastructure-Team-Backlog.

Jhernandez moved this task from Needs triage to Needs analysis on the Product-Infrastructure-Team-Backlog board.

Not sure who to best ping about this at this time.

It would be helpful to spell out what has to be done on the mobile-html or page library side for this task.

Save buttons removed

If we just want the save buttons to be removed then we just could have the native side not call pagelib.c1.Footer.updateReadMoreSaveButtonForTitle() anymore or stop doing anything for the ReadMoreTitlesRetrieved action. Or would you like the page lib to remove sending the ReadMoreTitlesRetrieved action?

Add Read More section to TOC

Currently the Android app adds a fake ToC entry at the end of the list for "About this article" in the ToCHandler.java file. Do we want to stop doing that? I'm not claiming that this is the cleanest solution. It's an option. Not sure what the iOS app is doing for this.
(This may be related to/dependent on T230035 if we decide to move getting the ToC from the pagelib instead of the metadata endpoint.)
Alternatively, I suspect whatever we end up doing for getting ToC info to the native side we could add it there as well.

On iOS, we append 2 special items to TOC - “About this article” (https://github.com/wikimedia/wikipedia-ios/blob/ca4df05eaeab29aaa9c023aa8bb9ce59f5feb39e/Wikipedia/Code/WMFArticleContainerViewController%2BTOC.swift#L124) and "Read more" (https://github.com/wikimedia/wikipedia-ios/blob/ca4df05eaeab29aaa9c023aa8bb9ce59f5feb39e/Wikipedia/Code/WMFArticleContainerViewController%2BTOC.swift#L127).
If the user taps on “About this article“, we scroll them to pagelib_footer_container_menu. For “Read more”, it’s pagelib_footer_container_readmore (https://github.com/wikimedia/wikipedia-ios/blob/ca4df05eaeab29aaa9c023aa8bb9ce59f5feb39e/Wikipedia/Code/WMFArticleContainerViewController%2BTOC.swift#L60).

JoeWalsh updated the task description. (Show Details)Aug 23 2019, 6:05 PM

JoeWalsh updated the task description. (Show Details)Aug 23 2019, 6:35 PM

MSantos claimed this task.Aug 26 2019, 11:52 AM

MSantos mentioned this in T226094: Unified iOS and Android article footer design.Aug 26 2019, 12:07 PM

@JoeWalsh I don't understand how the 3rd bullet point is related to the footer design, it seems to be related to the edit/preview feature, am I correct?

Allow clients to pass in page fragments for the sections that will be added so they can add the corresponding sections to the table of contents.

JoeWalsh updated the task description. (Show Details)Aug 26 2019, 12:48 PM

@MSantos I updated the description to clarify - the pagelib.c1.Footer.add interface would change to allow clients to pass in fragments for the sections so they are able to use them to scroll to the corresponding sections. This is just a proposal, feel free to suggest changes if you have a better idea for this or any other part of the footer interface.

MSantos moved this task from To Do to Doing on the Product-Infrastructure-Team-Backlog (Kanban) board.Aug 26 2019, 2:02 PM

PR: https://github.com/wikimedia/wikimedia-page-library/pull/245

@cmadeo in the PR I posted some pictures, I would appreciate if you take a look at it.

The only thing that I think is missing is the Wikipedia logo color update, which is also a base64 image.

MSantos moved this task from Doing to Code Review on the Product-Infrastructure-Team-Backlog (Kanban) board.Aug 29 2019, 9:11 PM

Thanks for sharing these images with me @MSantos, will final styling occur on the client side or should I do a full design critique against the iOS and Android proposed mocks?

In T230036#5454119, @cmadeo wrote:

Thanks for sharing these images with me @MSantos, will final styling occur on the client side or should I do a full design critique against the iOS and Android proposed mocks?

Probably better to wait for these changes to be reviewed and available for a full design critique against the mocks. Thanks!

MSantos moved this task from Code Review to Doing on the Product-Infrastructure-Team-Backlog (Kanban) board.Sep 12 2019, 9:47 PM

MSantos moved this task from Doing to Code Review on the Product-Infrastructure-Team-Backlog (Kanban) board.Sep 17 2019, 3:27 PM

MSantos moved this task from Code Review to To Deploy on the Product-Infrastructure-Team-Backlog (Kanban) board.Sep 18 2019, 4:11 PM

MSantos moved this task from To Deploy to Sign off on the Product-Infrastructure-Team-Backlog (Kanban) board.Sep 19 2019, 8:02 PM

Mholloway closed this task as Resolved.Sep 30 2019, 3:59 PM