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

[Mobile] Clicking the "nav to" icon in phone portrait doesn't collapse the treeview #326

Open
charlesh88 opened this issue Nov 21, 2015 · 2 comments
Labels
bug:platform specific to OS/Browser/Installation method bug:regression It used to work. Now it doesn't :( bug:retest Retest without a specific milestone severity:medium type:bug

Comments

@charlesh88
Copy link
Contributor

charlesh88 commented Nov 21, 2015

In mobile phone portrait mode, the treeview should be collapsed when the user clicks an item in the tree.

@charlesh88
Copy link
Contributor Author

charlesh88 commented May 5, 2018

Important note: the collapse behavior as noted above should only be implemented in phone portrait mode. The JavaScript we have now that adds portrait and landscape classes only fires on page load - but the user can rotate their phone anytime to change the orientation. CSS media queries are therefore used to control the layout of the treeview and main view panes. A JS-based solution to collapse the treeview on a navigate action is going to need to detect the orientation at any time after load and only fire when we're in portrait (we can already detect phone vs. tablet and the user can't change that after page load :))

window.matchMedia() may be an option, as in

if (window.matchMedia("(orientation: portrait)").matches) {
     // Collapse that treeview
}

Checkout this CodePen: https://codepen.io/mattdsteele/pen/FmLva. Although it didn't work for me in the actual phone, I'm hoping that has something to do with CodePen being the wrapper.

I like this because it seems to use the same basic methodology as media queries and would update as the user manipulates their device. In fact, if we can modify the code that adds these classes to the <body> tag to use this approach for orientation, that would be better - the current approach is not useful.

@unlikelyzero unlikelyzero added bug:retest Retest without a specific milestone and removed fixed? labels Oct 30, 2021
@unlikelyzero unlikelyzero added the bug:platform specific to OS/Browser/Installation method label Jan 18, 2022
@unlikelyzero unlikelyzero added this to To do in Mobile Support via automation Jan 18, 2022
@rukmini-bose
Copy link
Contributor

rukmini-bose commented Mar 21, 2024

This is an oldie goldie 👴 ! Going to be fixed with #7313

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug:platform specific to OS/Browser/Installation method bug:regression It used to work. Now it doesn't :( bug:retest Retest without a specific milestone severity:medium type:bug
Projects
Development

No branches or pull requests

5 participants