search

ContextInstitute / bfcom

http://bfn.context.org
GNU General Public License v3.0
4 stars 1 forks source link

Making the submenu responsive #69

Closed rgilman closed 5 years ago

rgilman commented 5 years ago

At the moment, the submenus for single groups and single persons are quite long, much too long to fit on a mobile screen. We've solved that problem for the top menu by using icons for mobile but I feel we can't do that for the submenu since it would then create too many icons and too much to remember/interpret.

The strategy I'd like to adopt for the submenus is to:

  1. Prioritize the order so the most used items are first in the list.
  2. Adjust the length of the list via media queries that change the visibility of the lower-priority menu items based on what will fit in the viewport.
  3. Add a more ... item at the visible end of the list that serves as a button for a dropdown panel like we are currently doing with the user menu in the upper right of the header. All of the submenu items that aren't visible directly would be included in the dropdown panel.

Any thoughts on that strategy?

rgilman commented 5 years ago

Let me add that I'm expecting to have the php in nav-bfc-submenu.php output two versions of the submenu: one for the normal display and the other for the dropdown panel. There will be overlap/redundancy between the two versions which we will resolve through display: none in appropriate places via the media queries.

Any advice on either how to do this or why an alternative approach might be preferable is most welcome.

iangilman commented 5 years ago

Sounds good to me!

rgilman commented 5 years ago

I sorted it out using nth-child(n+A) and lots of media queries. There must be a more elegant solution (likely with JS) but this works. See PR #75

iangilman commented 5 years ago

Good enough for now, safe enough to try. :)

rgilman commented 5 years ago

I'm going to call this done for now via PR #75