feat: dashboard slideshow

[jenniferarnesen]

Implements DHIS2-13038

Details about how it works:

1. When entering the Slideshow/fullscreen, the parent div of the ItemGrid is put into browser fullscreen. That same div remains in fullscreen the entire time, while the dashboard items are displayed/hidden in turn using css opacity. Css opacity is used instead of display or visibility so that the items can first be resized to fullscreen while "invisible", and then be made visible.

2. When first opening the slideshow, a flag (isPreSlideshow) is used to initially hide the item with opacity: 0 so that it can be resized and then appear fullscreen without the user seeing the resizing happen. This works ok, but I'm not sure it's worth the trouble

3. Progressive loading. When the dashboard goes into fullscreen/slideshow, then progressive loading, instead of being based on proximity to the viewport, will load the next and previous items in the fullscreen display order.

TODO

• progressive loading
• check all item types
• small screen view (no fullscreen in small screen view)
• applied filters and active types
• verify print views, especially tables
• cypress tests
• Tested on large displays
• Disable nav buttons when there is only 1 item
• "Filter applied" label
• Offline should work
• Hi-res screen - navigation bar is visibly resizing
• Opening legend on chart, lose keyboard navigation

[dhis2-bot]

🚀 Deployed on https://pr-3081.dashboard.netlify.dhis2.org

[sonarcloud]

Quality Gate failed

Failed conditions
1 New issue
1 New Code Smells (required ≤ 0)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE