Top Menu Layout Request

NOYB

Would like it a lot if the top menu would pop up to the right of the logo (same line as the logo) at the same window width that the dashboard transitions from one to two columns. Currently by the time the top menu pops up to the same line next to the logo the window is so wide it has lots of wasted space on the right and left of the dashboard columns.

phil.davis

I agree. For some reason the top menu row jumps down below the pfSense logo before it really needs to.

NOYB

Thinking I might even prefer that it never jump down below the logo. Just go to two rows like it does anyway if the window gets too narrow. But remaining to the right of the logo on the same line. The logo height seems like it would be enough vertical space for two menu rows.

jdillard

It goes to the hamburger vertical nav now before jumping rows, which is at 1200px width.

That nav functionality could improve more, but for 2.3 I think it should stay like this so we can concentrate on other things.

edit: it is only on dark theme currently (applying to regular theme now). I also didn't take into account notices being present so working on a fix for that.

NOYB

Only vertical nav available all the way out to 1200 px wide is way too wide. Horizontal nav should be available at least by the time the dashboard transitions from one to two columns.

Snap3.jpg_thumb

NOYB

@jdillard:

. . . for 2.3 I think it should stay like this so we can concentrate on other things.

Think the main menu (global nav menu) user friendliness and functionality should be pretty high on the priority list. With out it the whole system becomes annoying to navigate.

NOYB

This works well for me (attached GitHub patch).

Single line horizontal top nav menu at same width dashboard transitions from one column to two columns.

Snap1.jpg_thumb
0001-Top-Menu-Horizontal-Medium-Width.zip

jdillard

@NOYB:

@jdillard:

. . . for 2.3 I think it should stay like this so we can concentrate on other things.

Think the main menu (global nav menu) user friendliness and functionality should be pretty high on the priority list. With out it the whole system becomes annoying to navigate.

When I made that comment I had just looked at a bunch of different fancy nav techniques. I applied a fix to get it down to where it transitions to one column. I also made sure it worked when there were notices present.

NOYB

When less than 1200 px width top nav horizontal menu is placed below the logo. This consumes too much vertical space, obscuring the page headers. The main cause is the logo space consumption not leaving enough horizontal space for the menu. So it forms a new line below the logo.

jdillard

@NOYB:

When less than 1200 px width top nav horizontal menu is placed below the logo. This consumes too much vertical space, obscuring the page headers. The main cause is the logo space consumption not leaving enough horizontal space for the menu. So it forms a new line below the logo.

I just committed, sorry for not clarifying. did you gitsync or just upgrade?

Did you clear you cache just to be sure?

Also if the issue persists, what browser?

NOYB

I gitsync'd but must not have refreshed. Thanks for the reminder. I like this much better.

Though for menu transition to be in unison with the dashboard transition from single to double column I think the @media (max-width: 992px) should be 991px. With the 992px setting the menu transition is one pixel wider then the dash board columns transition. Kind of creates a flicker effect.

This works well for me.


 @media (max-width: 991px) {
	/* change top navbar from horizontal to vertical */

jdillard

Ok cool, just pushed that change.

Also if you want to generate a notice you can go to Diagnostics > Command Prompt and enter file_notice("test", "test"); in the PHP commands box, then refresh.

I also made the fixed nav a BETA option for now as it was causing issues with the long dropdowns, so you might notice a change there.

edit: TODOs include:

cleaning up notice modal
making the notice badge stay visible in the nav on smaller screens
trying to fit a logout icon up there somehow.

NOYB

Notifications works.

Logout. People actually do that? How long are inactive sessions retained without any keep-alives, etc.?

jdillard

Cool. thanks for the help.

Yea, if anything for peace of mind. I played around with it a little and #2 and #3 on that list and they are going to be low priority to give time to make sure it is implemented correctly.

Now to clean up the modal…

NOYB

For the top nav horizontal menu to expand in unison with widget width the "@media (max-width: 1200px)" should be 1199px. At 1200px the menu and widget widths expand one pixel apart from each other.


@media (max-width: 1199px) {
    .nav>li>a {
        padding: 14px 9px 10px 9px;
    }
 }

JeGr

Logout. People actually do that? How long are inactive sessions retained without any keep-alives, etc.?

Yes people do and should do that. It's been more than one customer where I got access to a browser, that was logged into the system a while ago and I could open and access their pfSense without authenticating. Also users tend to go the easiest route so some of them even disable auto-logout alltogether. When working in larger setups and scenarios, you often have systems with multiple users/administrator levels, so re-logging is something you absolutely do!

@NOYB Perhaps the menu or widget width should be enlarged by 1px instead of reducing even boundaries like (1200)?

jdillard

@NOYB:

For the top nav horizontal menu to expand in unison with widget width the "@media (max-width: 1200px)" should be 1199px. At 1200px the menu and widget widths expand one pixel apart from each other.

Thanks! Just pushed this change.

NOYB

@JeGr:

@NOYB Perhaps the menu or widget width should be enlarged by 1px instead of reducing even boundaries like (1200)?

max 1199 sets the boundary at 1200. So transition happens at 1200 instead of at 1201.