Stop hiding search box in menu bar

[awfki]

Issue type: feature request

Python version: 2.7.5
NetBox version: 2.1.1

The search box in the menu bar (upper-right corner next to the login name) is hidden when the window is less than 1600 pixels wide. At 1200 pixels wide there still seems to be plenty of space for that box. That's a key UI element for my users so I'd love it if we could leave it visible as much as possible.

[jeremystretch]

Could you please submit a pull request with the modified CSS you'd like to implement?

[awfki]

Created PR 1404.
#1404

[jeremystretch]

The problem with this is that the search box gets bumped down a line with longer usernames (e.g. when email addresses are used as usernames).

[bellwood]

I would say:

1. at that breakpoint, provide an icon that when clicked gives search in a drop down

2. when the navbar collapses, add search to the head of the menuing items

Would be similar to this:
https://bootsnipp.com/snippets/featured/navbar-search-add-on-bs-3

...but with the added dropdown for search at the larger breakpoint

If this is something agreeable I will make a UI PR

[jeremystretch]

@bellwood sounds good to me.

[bellwood]

Will do

[bellwood]

So some thoughts here... Being that we can't assume how long a username will be and therefore accommodate every installation, what if we simply moved the search out of the nav header and either:

1. sticky a container wide search bar under the nav header that is always persistent

2. move the search to an off-screen canvas that you can pull out when needed

In the spirit of keep things simple and universal, option 1 seems best, however I can see how some folks may not want to give up 50-ish pixels of vertical real-estate.

As a compromise for option 1 we could add an icon to the menu that toggles the visibility of the search box

Just wanted some further input before I make PR's without the input of other users.

[jeremystretch]

The first option I think is too wasteful of screen space. I like the idea of an icon that pops down a little search box. It'd still be just one click if showing the dropdown autofocuses on the search field.

[bellwood]

   How does this look for the various screen sizes? Edit: no clue why GH isn't inlining the screenshots

[bellwood]

Feedback on this, anyone?

[jeremystretch]

@bellwood might make sense to have the search bar both embedded in the nav menu and as a dropdown, and only display one or the other depending on the screen size (so that the search bar appears to condense into a dropdown when the screen shrinks).

[awfki]

That would be acceptable though my preference would be to keep the search box visible all the time. I'd prefer condensing the username into an icon or condensing the menu by hiding the sub-menus one at a time. So for instance, Secrets shifts to a drop down on the end of the menu, then Circuits, etc.

…

On Wed, Aug 23, 2017 at 9:16 AM, Jeremy Stretch ***@***.***> wrote: @bellwood <https://github.com/bellwood> might make sense to have the search bar both embedded in the nav menu *and* as a dropdown, and only display one or the other depending on the screen size (so that the search bar appears to condense into a dropdown when the screen shrinks). — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#1397 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEAkYjqFQWIoT0Kcfo-L3zSYFk4sqo3wks5sbCYygaJpZM4Otyt1> .

[bellwood]

I'd prefer condensing the username into an icon

That may honestly be preferable, then the search as it exists (with a change to the CSS media query to hide it) would natively collapse on its own...

Would be as simple as wrapping the username in a span that hides at the same collapse point as the rest of the menu

I'm all for keeping things simple

[traveler3468]

Im ok with the way things are to be honest. The global search doesnt need to be visible while viewing more specific data. As long as the search for the specific data is available then you dont need to global search. If youre searching globally then go back to the home page and search there.

[jeremystretch]

This was addressed in 124878e