Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: scroll away control bar when viewing dashboard on screen with height <=480px #1550

Merged
merged 4 commits into from
Feb 18, 2021

Conversation

jenniferarnesen
Copy link
Collaborator

@jenniferarnesen jenniferarnesen commented Feb 18, 2021

When the screen height is <=480px, then scroll all the content, including the control bar. When more than 480px, scroll only the actual dashboard. Note that progressive loading is not working consistently right now (pre-existing issue - currently being investigated)

Small refactor:

  • move styling from App.css and into a css module on a new component DashboardContainer
scrollctrlbar.mov

@jenniferarnesen jenniferarnesen changed the title feat: scroll away control bar when viewing dashboard on screen with heigh <=480px feat: scroll away control bar when viewing dashboard on screen with height <=480px Feb 18, 2021
document.getElementsByClassName('dashboard-scroll-container')
).forEach(container => {
container.scroll(0, 0)
})
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not using querySelector still?
I understand there is always only 1 element with that class.
Or maybe use this instead?

Suggested change
})
document.getElementsByClassName('dashboard-scroll-container').item(0)?.scroll(0,0)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, there can be 2 elements with the class

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, i missed the one in DashboardContainer.
Nvm the comments.

Array.from(
document.getElementsByClassName('dashboard-scroll-container')
).forEach(container => {
container.addEventListener(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See comment above.

@jenniferarnesen jenniferarnesen merged commit 0caf0d8 into master Feb 18, 2021
@jenniferarnesen jenniferarnesen deleted the feat/scroll-ctrlbar-sm-height branch February 18, 2021 11:24
dhis2-bot added a commit that referenced this pull request Feb 18, 2021
# [31.12.0](v31.11.2...v31.12.0) (2021-02-18)

### Features

* scroll away control bar when viewing dashboard on screen with height <=480px ([#1550](#1550)) ([0caf0d8](0caf0d8))
@dhis2-bot
Copy link
Contributor

🎉 This PR is included in version 31.12.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants