[ER] scrollable drop-down menus in pfsense_ng theme…



  • Well, the problem isn't new, but I thought I bring it up again:
    Something like a MacBook Air is a fairly common computer, and an ideal ultra-portable sysadmin workstation, because it's light enough that one actually brings it along.

    But the screenshot below demonstrates what happens after a few packages are installed: anything after SNMP in my case becomes inaccessible.

    So there are two not mutually exclusive ways to fix this:
    a) hierarchical menus, that would e.g. group all sorts of DNS related things in one menu item with a list of sub-items, similar with all the DHCP stuff, etc.

    b) the menus become scrollable somehow (not a CSS wizard, but I have seen stuff like that, before, so it must be possible to do somehow).

    ![Screen Shot 2012-05-24 at 18.51.54.png](/public/imported_attachments/1/Screen Shot 2012-05-24 at 18.51.54.png)
    ![Screen Shot 2012-05-24 at 18.51.54.png_thumb](/public/imported_attachments/1/Screen Shot 2012-05-24 at 18.51.54.png_thumb)


  • Rebel Alliance Developer Netgate

    We auto-switch the theme to the "pfsense" theme with the menus down the side on mobile devices, to avoid just this problem.

    If someone wants to find a css/js way to make the menus scrollable, that would be preferable. Hierarchical menus are a mess and would be even more trouble.



  • How about this approach, then?

    http://css-tricks.com/long-dropdowns-solution/

    Even though better grouping with hierarchical menus might have other benefits, because it's nice to find e.g. all proxies in one spot, DNS services in another, DHCP related things in a third, etc. but that would likely require that various packages be changed where they place themselves into a more hierarchical structure, or the menu structure would have to be user definable; neither of which are quick fixes and would be something that would be better undertaken with a major version upgrade, say 2.5 or 3.0

    Long-term, I think the menu needs to be cleaned up a bit, and needs more descriptive names


  • Rebel Alliance Developer Netgate

    Yikes, not fond of that one at all, it makes it really hard to narrow in on something since the menu scrolls by as you simply move. One you can manually drag or scroll with arrows would be preferable.


  • Rebel Alliance Developer Netgate

    We had talked about, in the future, having fully customizable menus - as in the user could move any entry to any menu they want and change the names/descriptions/etc.

    Many of the descriptions are limited due to space restrictions on the menu to prevent them from wrapping/overflowing.

    But as the old saying goes… ideas are cheap. There are tons of good ideas (just check redmine for things labeled "future"), the problem is implementation.



  • @jimp:

    Yikes, not fond of that one at all, it makes it really hard to narrow in on something since the menu scrolls by as you simply move. One you can manually drag or scroll with arrows would be preferable.

    I actually thought this felt very natural, at least to a user of various iOS devices where things scroll by somewhat similarly. But it could be that this is also sensitive to mouse settings and how the browser handles events. On my Mac here with a touchpad and Firefox, his demo performed really well, could go back and forth with ease, and also it stopped as soon as I stopped moving the mouse.

    But there are a slew of pages that came up when I googled "css js scrollable drop down menu", however this seemed to behave the most like native menus from the feel of it.

    Of course with mouse, different OS/Browser combination, etc. this may work less smoothly.



  • Of course, there's the other less elegant solution: stop the menubar from being floating, such that it scrolls up with the window content, because then I can just scroll the browser window, the menu bar disappears because it's nailed to the top of the page rather than to the top of the view, and then we can access things in arbitrarily long windows..

    Otherwise, I'm not sure if these sort of things are applicable here:

    http://www.codeproject.com/Questions/229885/how-to-make-scroll-bars-in-dropdown-list

    Another approach might be to replace the menu with drop-down boxes. Might offer less options to style to look, but it would also work on small devices like e.g. an iPhone, because it would pop-up a big selector to choose the items. A solution to a different problem made me think about that: http://css-tricks.com/convert-menu-to-dropdown/


  • Rebel Alliance Developer Netgate

    Well for those, see above, re: theme change.

    That's why the other themes exist – the default isn't the best for everyone.



  • Actually, this has kind of nifty stuff, too, even for other parts of the pfSense GUI; I really like the way they do multiple selects. That would make quite a few things nicer.

    http://harvesthq.github.com/chosen/

    The neat thing is, that it just could be turned off on mobile devices, and then e.g. touch optimized elements can take over.


  • Rebel Alliance Developer Netgate

    Yeah we've looked at that one specifically before (or one nearly exactly like that) - I especially like the multi-select parts, the one with the grouping would be nice for VIP selections.



  • @jimp:

    But as the old saying goes… ideas are cheap. There are tons of good ideas (just check redmine for things labeled "future"), the problem is implementation.

    Maybe more two done by a package:

    • favorites menu

    • hide less used/unsued menu options



  • Hello,

    This pull request https://github.com/bsdperimeter/pfsense/pull/141 improve menu css style removing some gifs, including more effects and automatic scroolbars to menus with more then 260px

    Tested in: Firefox 12/13, Chrome 19.0.1084.46, IE 8 and 9

    See the screenshot attached




  • Big thumbs up for this one!!! Awesome! Now at least a device like an 11" MacBook Air or some netbook can be used comfortably. That was just like a birthday gift for me :D

    Now if we get the multiple selection stuff from "Chosen" in, the GUI will have taken a massive step forward.


  • Rebel Alliance Developer Netgate

    Github was reporting that it couldn't be merged in for some reason. Might need updated and resubmitted as a new pull request.


  • Netgate Administrator

    260 pixels seems a bit low to me. I wouldn't want this on a standard machine if it didn't need it. What length menu can you fit on a netbook (1024x600) screen? In full screen mode?

    Steve



  • I use a netbook a lot, carry it around and plug it into an external monitor at home and work. It is annoying when dropdown lists, menus, dialog boxes etc extend down below the screen and I can't easily select the lower items, or press the OK button! When there is something to test, I am happy to put it through its paces, switching between the netbook screen and external monitor, seeing if things automatically adjust etc.
    Hopefully the scrollbars only appear if the menu won't fit on the screen - so people with big screens will never see them.



  • @jimp:

    Github was reporting that it couldn't be merged in for some reason. Might need updated and resubmitted as a new pull request.

    Ok Jimp. I resubmitted the pull request with my respository sync.

    thanks


  • Rebel Alliance Developer Netgate

    Would there be some way to make that dynamic based on the window height? Seems that should only need to kick in for small screens. I do not want scrollbars on my full size window when it's capable of showing the whole menu.



  • Well,

    The this pull request https://github.com/bsdperimeter/pfsense/pull/144  add scrollbar in dropdown menu based in window height.

    I think this may solve the problem of big and small screens

    ;)


  • Rebel Alliance Developer Netgate

    I shrank my window's vertical size way down (it was a tiny strip across) and it didn't kick in for me… hmm.


  • Rebel Alliance Developer Netgate

    aha, had to clear cache first (or shift+reload)


  • Rebel Alliance Developer Netgate

    looks good! Though the menu could actually be a little longer. It's sized base on the height but it's leaving quite a bit of room under it



  • @jimp:

    looks good! Though the menu could actually be a little longer. It's sized base on the height but it's leaving quite a bit of room under it

    Nice!

    To increase menu size,  change the value '100' in line 32 of  file /usr/local/www/themes/pfsense_ng/loader.js
    hwindow = (jQuery(window).height()-100);

    I usage the formule: 'window.height - 100' to define menu size, so per example:  'window.height - 50'  increase the dropdown menu

    :)


  • Rebel Alliance Developer Netgate

    35 seems to be the most comfortable fit for me, I committed that change. It leaves enough room for the bottom of the menu, the shadow, and few px worth of open space (Tried it on FF, Chrome, and Opera)



  • @jimp:

    35 seems to be the most comfortable fit for me, I committed that change. It leaves enough room for the bottom of the menu, the shadow, and few px worth of open space (Tried it on FF, Chrome, and Opera)

    Cool!

    Thank you :)



  • I loaded:
    2.1-BETA0 (i386)
    built on Wed Jun 13 20:47:21 EDT 2012
    FreeBSD 8.3-RELEASE-p3

    Using Firefox 13.0 browser.

    As Jim did, I had to cleared my cache once to get the scrollbars happening.
    The scollbars happen based on the browser window size when I login. Works well for me.
    If I resize the browser window while logged in, the scrollbars don't come or go, the dropdown menu doesn't get longer or shorter. But I guess that is fine. The fine touch would be to make the dropdown menu sizing/scrollbar calculation get re-invoked from some window-resizing callback - then it would adjust itself automagically when the window is resized - but I have no idea about implementing stuff like this.
    I should have played more before posting - after resizing the window a simple page reload makes the menus and scrollbars adjust to the new window size. Also, selecting something from the menus makes a whole new page draw up, which also resets the menus and scrollbars to the new window size. All working very nicely for me.

    This is very handy when working from small screens. Particularly for the Diagnostics and Status menus, that are fairly long. Murphy's Law in this case states that you will always want to select the first item on the menu that is not visible. Now Murphy will have to think of something else  :)

    Thanks for this handy UI feature.



  • @phil.davis:

    I loaded:
    2.1-BETA0 (i386)
    built on Wed Jun 13 20:47:21 EDT 2012
    FreeBSD 8.3-RELEASE-p3

    Using Firefox 13.0 browser.

    As Jim did, I had to cleared my cache once to get the scrollbars happening.
    The scollbars happen based on the browser window size when I login. Works well for me.
    If I resize the browser window while logged in, the scrollbars don't come or go, the dropdown menu doesn't get longer or shorter. But I guess that is fine. The fine touch would be to make the dropdown menu sizing/scrollbar calculation get re-invoked from some window-resizing callback - then it would adjust itself automagically when the window is resized - but I have no idea about implementing stuff like this.
    I should have played more before posting - after resizing the window a simple page reload makes the menus and scrollbars adjust to the new window size. Also, selecting something from the menus makes a whole new page draw up, which also resets the menus and scrollbars to the new window size. All working very nicely for me.

    This is very handy when working from small screens. Particularly for the Diagnostics and Status menus, that are fairly long. Murphy's Law in this case states that you will always want to select the first item on the menu that is not visible. Now Murphy will have to think of something else  :)

    Thanks for this handy UI feature.

    Really this is a very handy when working from small screens (I usage)
    Thank you by feedback :)


Locked