Add scroll capability to HCP Initializing Self-Monitoring
When the HCP is using a desktop with a mouse the horizontal scroll is not apparent though is possible with left/right keyboard buttons.
-
Scroll button needs to be made: Default and hover states are needed for the buttons.
-
Scroll buttons need to be added: when spill over to the left or right or both, the scroll bottons should appear
-
Interaction with button
- EITHER: On mouse hover of a category with spillover scroll buttons appear
- OR: Steady shown for any category that has spillover of cards
Implementation suggestions 😄
When we introduced the question card lanes, things did not seem too complicated so I opted to handle all the scrolling related issues just with CSS. But adding buttons to the story introduced a new level to the story. I was in the exact same situation when I setup the slides to answer questions on the PAT side. I first tried ionic's slider component, but that was over the top and had it's own short comings, so I built another component: RccSliderwhich will come in handy here as well.
Where to start
The QueryRunComponentuses the slider, see /lib/features/src/queries/query-run/query-run.component.html That template also uses rcc-query-panelto remotely control the slides with buttons, which makes it a good source of examples :)
scroll-snap-align can be set using CSS – the component will recognize that and makes use of it when scrolling.