Try: Flip orientation of submenus that are towards the right of the viewport #30342
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
|
Size Change: +575 B (0%) Total Size: 1.42 MB
ℹ️ View Unchanged
|
vcanales
reviewed
Apr 6, 2021
There was a problem hiding this comment.
Tested this and it works as described!
Thinking out loud here — do you think it would be necessary to flip the arrow that indicates the presence of a submenu when elements are flowing left instead of right? This might not be possible without JavaScript, but in testing it felt slightly "surprising" to see the submenu pop up on the opposite side of where the arrow indicates.
Test navigation menus justified right or space between, with a bunch of submenus.
In testing, I found an issue that is tangentially related to the limitation where deeper submenus add width to the site indefinitely in order to flow; is it possible to take the changes here further in order to get rid of this issue for all alignments?
Editor
Frontend
The thought occurred to me, so I looked to see what the Mac does, and it doesn't change the setup:
Probably they evaluated the systematization of label / icon in menus, and found that it was more important to have the icon show up in a consistent place, than to swap place based on direction:
So far we have two ingredients in play to mitigate it. This PR, which flips the direction on items we know are on the right, and a separate PR to limit the depth to 5. The 3rd obvious ingredient would be to detect using JavaScript when a submenu bumps against the edge, and then flips direction. While that's something we can do, I think we should put it at the back of the queue, as it's very probably going to be quite complicated. The JS would have to be output in editor and frontend, be resilient in both cases (editor isn't yet iframed), and be aware of arbitrary width dropdown menus. In the mean time, two other aspects could likely mitigate this further. Basically, when you have enough submenu nesting that switching direction becomes necessary, you might want to toggle "Unfold nested submenus" as suggested in #30370. Or you might want to combine that with a mega menu instead, for which I had an idea this morning, how to address in a simple-ish way: #23745 (comment) |
vcanales
approved these changes
Apr 6, 2021
7 tasks
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.
Description
Navigation block menus open down and to the right. Cool.
But this is not so cool, when you're reached the right screen edge:
This PR fixes that by flipping the direction a menu opens, when the menu is justified right, or for the last item when the menu is justified space-between:
This PR pairs well with #30199.
But even with both this and 30199 in place, it will be possible for a theme to make a menu that gets viewport cropped. However we shoul allow this, because:
How has this been tested?
Test navigation menus justified right or space between, with a bunch of submenus.
Bonus points if you test the Page List block.
Checklist:
*.native.jsfiles for terms that need renaming or removal).