Page MenuHomePhabricator

Article table of contents
Closed, ResolvedPublic

Description

User story

As a KaiOS user, I want to be able to see a table of contents, so that I can jump to the section that’s most interesting to me quickly

Acceptance criteria

Clickable button that leads to options to choose sections of an article

Note

Table of contents can also be done through tabs (see News App, or KaiOS store)

Proposed design

Mocks
Article headerArticle TOC (aka Sections)
https://zpl.io/aR7YDxzhttps://zpl.io/bPDxOzM
Screen type: list
Interaction details
ScreenD-pad centerD-pad up/downD-pad left/rightLSKRSK
Article headerSelects focused linkUp- N/A, Down - Moves to next page in articleCycles through header options (and links if there is no lead image)Returns to search resultsOpens menu
Article TOC (aka Sections)Selects focused list itemShifts focus up and down the listN/ACloses view and returns to last shown screenn/a
Design details
  • Readers can access the TOC (called 'sections' either by selecting it from the quick access buttons on the article title page or by tapping on the right software key (labeled 'sections') throughout the article view.
  • Sections is presented as a list view with different type stylings used to differentiate between H1s, H2s and H3s

Event Timeline

AMuigai created this task.Oct 4 2019, 1:17 PM
Restricted Application added a project: Inuka-Team. · View Herald TranscriptOct 4 2019, 1:17 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
AMuigai updated the task description. (Show Details)Oct 4 2019, 1:58 PM
AMuigai moved this task from Backlog to Q2 on the Inuka-Team board.Oct 4 2019, 2:49 PM
cmadeo updated the task description. (Show Details)Oct 22 2019, 7:55 PM
AMuigai moved this task from Q2 to Kanban on the Inuka-Team board.Oct 28 2019, 5:14 PM
AMuigai edited projects, added Inuka-Team (Kanban); removed Inuka-Team.
AMuigai moved this task from Backlog to Ready for Dev on the Inuka-Team (Kanban) board.
cmadeo updated the task description. (Show Details)Nov 13 2019, 8:17 PM
hueitan claimed this task.Dec 4 2019, 2:00 PM

How do we show h3 styling in this toc?

when h2 text overflow, we will show it as below screenshot

cmadeo added a subscriber: cmadeo.Dec 11 2019, 5:09 PM

Hi @hueitan!

The overflow on all cells is fine :)

For H3s can we indent the text by 15pts in from the H2? This is similar to what we do on the iOS and Android apps.
I've also updated the Zeplin to reflect this: https://zpl.io/bPDxOzM

For H3s can we indent the text by 15pts in from the H2

Thanks, confirmed, we can.

This is the screenshot when the list item has only a few items, let me know if there is a design change.

@hueitan except for the font this looks great!

@hueitan Please move this task to QA when you are done.

hueitan moved this task from Dev to QA on the Inuka-Team (Kanban) board.Dec 13 2019, 9:34 PM
Jpita added a subscriber: Jpita.

minor improvement to be done on T240992, moving this to done

@cmadeo Would you please provide the zeplin files for the quick action icons from v2 on the title screen?

cmadeo updated the task description. (Show Details)Jan 21 2020, 12:41 PM

@AMuigai uploaded and updated!

AMuigai closed this task as Resolved.Feb 6 2020, 7:59 PM