Change Details

As a reader, I want to understand when a relevant section is within a search result article, and have the ability to go directly to that section, so that I don’t overlook a relevant search result or have to move through irrelevant sections of a long article after clicking through. Providing a table of contents for an article in the results list helps readers verify that the relevant content they are looking for is within a large article, and allows them to go directly to that section. This is part of the quickview panel epic https://phabricator.wikimedia.org/T306341 **Note:** this does not include determining the relevance of sections. **Proposed Design** Desktop {F35182617} Mobile {F35182619} **Link to design in Figma** [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=1403%3A17899 | Desktop ]] [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=1536%3A16999 | Mobile ]] **Acceptance criteria** (Applicable to mobile and tablet) [] Show the header "Sections in the article" above the sections. [] Show all section levels starting from top i.e. include sub sections. [] Show as many sections as can be fit in three rows. (We can revisit this once we see how it works with actual data and increase the rows if needed) [] If the section name does not fit in a single row then crop the title with ellipsis at the end. [] If the section name is too long to fit in a row (with other section) have a line break and show that section in the second row. [] Clicking/tapping on section name will navigate users to that section of the article in a different window. [] Show "+ //n// sections" indicating the number of sections that are not shown in the quick view. [] If there is only 1 more section to show then show that section on the fourth row [] Clicking/Tapping on the "+ //n// sections" will navigate to the first of the remaining number of sections in the article. [] Do not repeat the sections that have been already mentioned above the "Sections" list as shown in this [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=1536%3A16289 | mock ]]. **Technical notes** - Retrieve sections for a given page via sections property - https://en.wikipedia.org/w/api.php?action=parse&format=json&page=Pet&prop=sections

As a reader, I want to understand when a relevant section is within a search result article, and have the ability to go directly to that section, so that I don’t overlook a relevant search result or have to move through irrelevant sections of a long article after clicking through. Providing a table of contents for an article in the results list helps readers verify that the relevant content they are looking for is within a large article, and allows them to go directly to that section. This is part of the quickview panel epic https://phabricator.wikimedia.org/T306341 **Note:** this does not include determining the relevance of sections. **Proposed Design** Desktop {F35182617} Mobile {F35182619} **Link to design in Figma** [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=1403%3A17899 | Desktop ]] [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=1536%3A16999 | Mobile ]] **Acceptance criteria** (Applicable to mobile and tablet) [] Show the header "Sections in the article" above the sections. [] Show all section levels starting from top i.e. include sub sections. [] Show as many sections as can be fit in three rows. (We can revisit this once we see how it works with actual data and increase the rows if needed) [] If the section name does not fit in a single row then crop the title with ellipsis at the end. [] If the section name is too long to fit in a row (with other section) have a line break and show that section in the second row. [] Clicking/tapping on section name will navigate users to that section of the article in the same tab. [] The quick view panel (if it was previously open before navigating to an article) should stay open when user return to search results using browser back button. [] Show "+ //n// sections" indicating the number of sections that are not shown in the quick view. [] If there is only 1 more section to show then show that section on the fourth row [] Clicking/Tapping on the "+ //n// sections" will navigate to the first of the remaining number of sections in the article. [] Do not repeat the sections that have been already mentioned above the "Sections" list as shown in this [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=1536%3A16289 | mock ]]. **Technical notes** - Retrieve sections for a given page via sections property - https://en.wikipedia.org/w/api.php?action=parse&format=json&page=Pet&prop=sections

As a reader, I want to understand when a relevant section is within a search result article, and have the ability to go directly to that section, so that I don’t overlook a relevant search result or have to move through irrelevant sections of a long article after clicking through. Providing a table of contents for an article in the results list helps readers verify that the relevant content they are looking for is within a large article, and allows them to go directly to that section. This is part of the quickview panel epic https://phabricator.wikimedia.org/T306341 **Note:** this does not include determining the relevance of sections. **Proposed Design** Desktop {F35182617} Mobile {F35182619} **Link to design in Figma** [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=1403%3A17899 | Desktop ]] [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=1536%3A16999 | Mobile ]] **Acceptance criteria** (Applicable to mobile and tablet) [] Show the header "Sections in the article" above the sections. [] Show all section levels starting from top i.e. include sub sections. [] Show as many sections as can be fit in three rows. (We can revisit this once we see how it works with actual data and increase the rows if needed) [] If the section name does not fit in a single row then crop the title with ellipsis at the end. [] If the section name is too long to fit in a row (with other section) have a line break and show that section in the second row. [] Clicking/tapping on section name will navigate users to that section of the article in a different windowthe same tab. [] The quick view panel (if it was previously open before navigating to an article) should stay open when user return to search results using browser back button. [] Show "+ //n// sections" indicating the number of sections that are not shown in the quick view. [] If there is only 1 more section to show then show that section on the fourth row [] Clicking/Tapping on the "+ //n// sections" will navigate to the first of the remaining number of sections in the article. [] Do not repeat the sections that have been already mentioned above the "Sections" list as shown in this [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=1536%3A16289 | mock ]]. **Technical notes** - Retrieve sections for a given page via sections property - https://en.wikipedia.org/w/api.php?action=parse&format=json&page=Pet&prop=sections