Top-level icons in mobile mode

[iangilman]

@rgilman What was the plan there? The menu would just be icons in mobile mode? I guess that means it doesn't need to go vertical, then, right?

[rgilman]

Yes, the plan is to stay with horizontal menus. The top level is just icons in mobile mode. The second level is the most important 2 or 3 nav items as words followed by a more ... or just ... that does provide a fly-out / drop-down but is out of the way until you need it. That way the real content can be visible in the bottom 3/4 or more of the screen.

[rgilman]

Here's a rough mockup of the concept, illustrating being in a specific group:

Lots of rough edges here. Just meant to convene the basic idea.

[iangilman]

Sounds good! @DavidScottBernstein are you up for taking this one on?

[iangilman]

BTW, because this has to do with mobile, you'll need to know about media queries.

The basic idea is something like so:

body {
    background-color: teal;
}

@media (max-width: 767px) {
    body {
        background-color: lightblue;
    }
}

This means the body's background color will be teal unless the condition in the media query is met. The color will be light blue if the window is less than or equal to 767 pixels wide.

Anyway, there's already a media query that drops the menu into vertical alignment when you make the window narrow enough; you'll likely just want to work with/override that.

[DavidScottBernstein]

Wow, nice progress!

@iangilman I changed the indenting as per your request but haven’t pushed yet.

@rgilman, you answered my next question by providing the links to the user flyout menu. I’ve added those links to my local version and they look great. Before I check in, I’d like to update the icons we’re using for the top menu to the ones you show in the phone menu mockup, specifically Groups, Resources, and Blogs but I’d like all of them from you for consistency, so I can add it to the build. Is there any significance to the Blogs menu icon being blue? If this indicates the selected page, then I’ll need copies of the icons in blue and suggestions for implementation.

I’ll be in and out today.

[rgilman]

@DavidScottBernstein, unfortunately those icons are locked up in the Mockplus software. We need to find a set that we can use. I think it's fine to stay with what you've got for now. It will be easy to swap them out later.

[DavidScottBernstein]

@rgilman Okay sounds good.

[rgilman]

@DavidScottBernstein, please look at #38. Doing that switch to CSS Grid is a near-term task for me (unless you would like to do it!). You might wait on working on the mobile version until that switch is complete.

[rgilman]

@DavidScottBernstein, now that the recode to using CSS Grid (#38) is complete, assets/styles/style.css includes a media query at the (current) bottom of the file. The breakpoint is around 768 pixels. You will likely want to build off of that media query.