Page MenuHomePhabricator

Table of Contents community prototype testing
Open, HighPublic

Description

Background

Similar to what we did in T269155: Make community prototype production-ready, we would like to prepare a prototype for community testing that focuses on the new table of contents

Feature list

  • Table of Contents
  • Most recent iteration of the sticky header (for consistency)

Event Timeline

ovasileva triaged this task as Medium priority.Sep 10 2021, 4:54 PM
ovasileva moved this task from Incoming to Planned future work on the Readers-Web-Backlog board.
ovasileva moved this task from Incoming to Table of Contents on the Desktop Improvements board.
ovasileva raised the priority of this task from Medium to High.Oct 6 2021, 2:33 PM

Change 734364 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] [POC] Prototype - Table of Contents in sidebar.

https://gerrit.wikimedia.org/r/734364

Test wiki created on Patch Demo by JDrewniak (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/4b80cc8580/w/

Test wiki created on Patch Demo by JDrewniak (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/02233882a6/w/

@Jdrewniak to-do list:

  • ensure that the toc is highlighting the correct section (seems to work fine when scrolling, but when clicking a toc heading it sometimes gets confused: example)
  • add more space between toc and article
  • add a little more space between top-level toc items (5px)
  • close sidebar & show toc automatically when scrolled below bottom of sidebar
  • when clicking on a heading in the toc with sub-sections, expand & show sub-sections, and collapse any other open sections
  • add Introduction as first heading in toc, clicking it should take you to the top of the page
  • when sections open automatically the arrow should flip down
  • fix positioning of ⓘ button
  • replace ⓘ icon with gear/settings icon
  • make top-level heading stay bold when on a sub-section below it
  • lower z-index (currently it's on top of the search dropdown)

stretch goal:

  • load toc faster (if we can't do this maybe we could put a placeholder toc there?)

alright, final updates per the meeting @ovasileva @Jdrewniak and myself just had:

Clicking on a section heading

  • if the section has sub-sections, it should expand to show it's sub-section headings
  • if any other sections (with sub-sections) are expanded, collapse them

Clicking on a section sub-heading

  • if a section is expanded and I click on a sub-section heading, make sure that the section doesn't collapse (currently it does)

Clicking on Introduction

  • scroll all the way back up to the top of the page

Test wiki created on Patch Demo by JDrewniak (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/81c1e9ffb1/w/

Test wiki on Patch Demo by JDrewniak (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/81c1e9ffb1/w/

Test wiki created on Patch Demo by JDrewniak (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/d2973a74dd/w/

Test wiki on Patch Demo by JDrewniak (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/d2973a74dd/w/

Test wiki created on Patch Demo by JDrewniak (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/ed654c2127/w/

Test wiki on Patch Demo by JDrewniak (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/ed654c2127/w/

Test wiki created on Patch Demo by JDrewniak (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/8b17b5bfd1/w/

Test wiki on Patch Demo by JDrewniak (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/8b17b5bfd1/w/

Test wiki on Patch Demo by JDrewniak (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/02233882a6/w/

Test wiki on Patch Demo by JDrewniak (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/4b80cc8580/w/

@Jdrewniak I realized one other thing: currently the ToC assumes the sticky header will be present, and therefore has top: 72px. It would be great if that could be conditional, and if they sticky header isn't present it should have top: 20px.

@Jdrewniak sorry forgot to add a comment after our meeting yesterday:

  • the arrows should be independent from the section titles, so you can toggle them open & closed without navigating anywhere

(click to view GIF)

toc toggle.gif (552×450 px, 832 KB)