===Why are we doing this?
Rethinking the visual UI of the threading was done to:
Adapt and implement the new features developed on the web by the Editing team for their [[ https://www.mediawiki.org/wiki/Talk_pages_project/Updates?tableofcontents=1 | Talk pages project ]]
Find a better way of showing nested threads than using indentation. The indentation (as seen on we ) takes up too much space on mobile, shrinks the line width and is less clear on a smaller screen.
Create more visual hierarchy & distinction between topics & threads.
===Audience story
As a contributor/reader, I want to be able to identify each topic, easily read the full thread of comments and know who is replying to whom under each topic
===Relevant information
**Access**
* Topics found on each article talk page will be collapsed when first opened. Contributor/reader can see comments once they tap anywhere on the topic cell.
Once tapped the cell will open (accordion) and display all topics (all comments visible).
**Organization**
* Comments will be organized from least to most recent.
* The contributor will be able to respond to any comment in the thread.
**The UI**
* Minimum height of the reply field will be 4 lines. No maximum.
* Each comment will have a
* A ‘reply’ button at the end of it.
* The signature and timestamp at the end of it.
* Link to the author's username.
* The ‘sticks’
* The number of sticks will indicate how deep a comment is nested.
* Width of all ‘sticks’ cannot take more than half of the available field width.
* If a comment is nested deeper than can be displayed via the sticks, a ‘+ [ x ]’ value will be shown to indicate how much deeper the comment is.
* Longest ‘sticks’ are closest to the text, shortest ‘sticks’ farthest from the text.
* ‘Stick’ height decreases by 8px
* ‘Sticks’ are 6px apart.
| Example | Field: Max. 1/2 field of sticks, and min. 4 line-height field | Shorter comment deeply nested | Longer comment | Longer comment deeply nested |
| {F35222132} | {F35222135} | {F35222142} | {F35222144} | {F35222146} |
====Additional research and resources
- [[ https://docs.google.com/presentation/d/1wifraOKuy0-p0JPCEHtdfEFQ01u5BYVB22SQiGWnY5M/edit#slide=id.g100edd01f5e_0_0 | Communication on iOS: Talk pages]]
- [[ https://docs.google.com/presentation/d/1E5xrCbX5eTfXY2K0i_uHU5cS8s42aci15sGkEok_wMA/edit#slide=id.g520bc2121f_0_0 |Talk pages audit - iOS ]]
- [[ https://www.figma.com/file/CKyugF8bKsPF4lRAoPt2j0/User-map--journey-iOS?node-id=51%3A1183 | Talk Pages Journey Maps (Figma link) ]]
- [[ https://docs.google.com/presentation/d/15ZkkDzP_wK81qoNqbpQ0bD8fYIjlP0X3pNmXFp8s2Uc/edit#slide=id.p | Research on Talk Pages iOS Nov 2021 ]]
- [[ https://www.mediawiki.org/wiki/Talk_pages_project?tableofcontents=1
| Editing Team’s talk page project ]]