Background
In usability testing the synced scrolling was difficult for users to discover and they were particularly confused when clicking did nothing (when an element was in view but not at the top). This should help users discover the feature, but also help the information they want be more easily findable.
For reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
Might be easier after we disconnect the old sidebar (because this might be hidden in the BookletLayout class) - do we investigate now or save this for later?
Requirements
- In the sidebar, if the user clicks the name of a template, then it scrolls into view on the right-hand side with the template name visible at the top of the pane. If the template is already in view, but the name is not at the top, then it should still scroll to the top.
- In the sidebar, if the user clicks the name of a checked/added parameter, then it scrolls into view on the right-hand side with the parameter label visible at the top of the pane. If the parameter is already in view, but the name is not at the top, then it should scroll to the top.
- If user adds a new template (to multi-part or creating multi-part), the search component appears and scrolls to to top.
- If user adds a wikitext element, the field appears and scrolls to top.
- In any case, if the element is already at the top of the pane, then nothing happens. (For example if they click it for a second time after the scroll has happened already)
- If element is near the bottom and cannot scroll to top, it should scroll up as far as it can.
- Applies to desktop, minerva, and narrow mode
Specs
When elements scroll to top, there should be padding equal to the height of the label text