Open shainanigans opened 2 years ago
Thanks for documenting the design! I like it but I'd like to raise some concern I have about this approach. Most significantly, this would be considerable technical work within Stacks (and additional work in Core to implement), and it's enough of a departure from our existing design it probably will warrant some CM cycles to communicate these specific changes and collect feedback. Before I forge ahead with implementing this, I figured it's best to see if there's a lighter-lift approach here.
I included some specific notes below.
Describe the bug The Deque audit of Teams raised three issues related to the mobile or zoomed view of the topbar:
Content is lost at 200% zoom
Content overlaps other content at 320px width
Horizontal scrolling at 320px
To Reproduce Steps to reproduce the behavior:
Go to stackoverflow.com
Open the developer tools
Use the responsive emulator and select iPhone 12 (this will give you a similar experience to both a mobile user and a user operating the site at 200% zoom)
See the horizontal scrollbar that appears around the action menus and the lost information on the avatar
Expected behavior The design of the topbar for smaller screens is adapted to better suit the available real estate as per the Figma file.
Functional specs
- Priority navigation for the action menu btns (see CSS Tricks or this example), which moves items into the overflow menu as the screen changes sizes.
If at all possible, I'd like to avoid JavaScript solutions for this issue. Having JS handle this issue has the potential to introduce FOUC from the topbar loading before JS has hidden items and it could also introduce additional other accessibility issues (market share and issues for people browsing with JS disabled are remarkably under-reported because most analytics/audit tools report using JS).
FWIW, I think we could handle this in pure CSS using a combination of media queries and :nth-child() rules.
Here's a very rough pure CSS proof of concept:
When outside the overflow menu, action menus are full width and use existing UI (see the search example)
When inside the overflow menu, action menus open like an accordion and use existing UI (see the help example)
The overflow menu can only have one open action menu at once
Entire block for menu items (e.g. “Help” in the overflow menu) and subitems (e.g. the Help subitems) are clickable
Sub menus and dropdowns inherit the theme (Teams is always dark, public depends on user’s theme)
There must be at least a 96px gap (TBC; this should be configurable so we can play with it) between the end of the team name or SO logo and the first menu item unless the first possible item is the overflow menu, in which case the team names gets a ... at the end (rather than wrapping). Exception: logged out view.
I have a few notes on this design:
.s-expandable
component.These are just a few thoughts I came up with and I'd be glad to brainstorm with or expand on any points I made if you'd like.
@dancormier Thanks for having a look. In terms of a lighter lift approach, the only thing that comes to mind is shoving all the action menus under the overflow menu from the get-go, but we lose some nice visibility of functionality for the user. Depending on how we handle no.1 below, we can have a think about that more seriously.
Edit re no.4 I just had a look at the code and fortunately those panels are added in the right place in the DOM underneath the opening item, so all that should be required is removing position: absolute
from them in a media query.
I'm currently reviewing this in detail and will write up my thoughts separately. In the meanwhile, here are some common cases that have not been outlined in this exploration:
Stack Exchange network sites topbar is a little different
Logged in to the network, but no user on this site
topbar is shared with https://stackexchange.com/
@b-kelly apologies for the slowest reply ever :) I think all of these cases can easily follow the pattern established. Have a look at the updated Figma here and let me know if you have any other concerns!
@dancormier and @b-kelly any fresh thoughts on this?
I’ve done some thinking and tinkering on this. @shainanigans I think your initial suggestion of priority navigation is probably a better approach than my original suggestion (and other CSS-based approaches I’ve since considered). Going CSS-only seems too fragile and inflexible.
A few finer points/questions on the priority navigation approach:
My most significant concern with these changes is resourcing. Since the topbar is such a hotpath component, we’ll need to allocate time to test, retest, and share changes with the community to gather and address feedback/bug reports.
Thanks for looking into this @dancormier :)
If it's possible to build the priority navigation pattern in such a way that it can be available for all sorts of other menus, it might prove useful. For example, if we design a sidebar that opens and closes and changes the available space of a menu, we could listen to the button click that controls the sidebar and re-render the menu.
What needs to happen to get these resources allocated? Is there anything I can do from a design perspective?
Describe the bug The Deque audit of Teams raised three issues related to the mobile or zoomed view of the topbar:
To Reproduce Steps to reproduce the behavior:
Expected behavior The design of the topbar for smaller screens is adapted to better suit the available real estate as per the Figma file.
Functional specs