feat: dashboard slideshow #3081
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
🚀 Deployed on https://pr-3081.dashboard.netlify.dhis2.org |
…tepretations component
|
jenniferarnesen
added
e2e record
janhenrikoverland
approved these changes
Dec 20, 2024
jenniferarnesen
merged commit cb2b931
into
feat/release-DHIS2-18441-and-DHIS2-13038
64 of 68 checks passed
jenniferarnesen
added a commit
that referenced
this pull request
Dec 20, 2024
Implements https://dhis2.atlassian.net/browse/DHIS2-13038 Details: 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. This means that the user doesn't see a flash of the visualization in its regular item size before it gets resized. 2. Progressive loading. When the dashboard goes into fullscreen/slideshow, then progressive loading will load the next and previous items in the fullscreen display order instead of being based on proximity to the viewport. 3. RTL support has been implemented for the slideshow navigation buttons. It was decided after discussions with in-house RTL experts that the order of the dashboard items would remain LTR.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Implements DHIS2-13038
Details about how it works:
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. Cssopacityis used instead ofdisplayorvisibilityso that the items can first be resized to fullscreen while "invisible", and then be made visible.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
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