unMENU 1.6 - now available (A major upgrade in appearance)


Recommended Posts

Great work guys!  I love the simplicity of unMENU and now love it even more.

 

I do have a couple small suggestions/requests to consider, though not related to the css changes, but as an additional package to include in the package manager.  Can someone (Joe L?) add the preclear script as a package?  Granted it does not change very often, but would be nice to have a button to click to verify the current version or download the latest and place it where it needs to be.  Another suggestion for the preclear script itself is to have it automatically disable cache_dirs when it runs and perhaps a command line toggle to not disable, or vice versa.  I noticed while preclearing a new 3TB drive cache_dirs is constantly reading the array drives to recover what it gave up because of the cyclic memory usage of preclear (I run with cache pressure set at 100).  Thanks.

 

Unraid 5.0-rc11 - Asus M5A78L-MLX Plus (RT8111E) - AMD Athlon II X3 450 Rana 3.2GHz - 8GB DDR3 - Antec NEO ECO 620W - Antec Three Hundred Case - 1x Rosewill RC-211 (cache) - Parity: 1T Seagate ST1000DM005/HD103SJ - DATA: 3x WD Black 750G - 1x 1T Seagate ST1000DM003 - 1x 500G Seagate ST500DM002, Cache: Seagate SATA 300G w/8GB swap partition

Link to comment

Zoggy,

 

Can you change the menu links so they use actual "a href" links instead of onclick js events?  The onclick does not allow use of right click to open in new window.

 

Thanks

I agree, it is much better if we can continue to "right click" to open in a new window.  Is this possible zoggy?
Link to comment

Zoggy,

 

Can you change the menu links so they use actual "a href" links instead of onclick js events?  The onclick does not allow use of right click to open in new window.

 

Thanks

I agree, it is much better if we can continue to "right click" to open in a new window.  Is this possible zoggy?

 

Joe,

 

I did some experimenting and if you replace line 749 of unmenu.awk:

 

            #theMenu = theMenu " <div class=\"menu_item\" onclick=\"window.location='" MyPrefix "/" url[a] "'\">" menu[a] "</div> "

 

with this:

 

            theMenu = theMenu " <div class=\"menu_item\"><a href='" MyPrefix "/" url[a] "'>" menu[a] "</a></div> "

 

It allows the right-click, but the link only covers the text, not the entire "button" area, so it's not a perfect replacement.  There is probably a way to make the link cover the entire div, but css is new to me.  I stopped dealing with websites and html in 2001.

Link to comment

Zoggy,

 

Can you change the menu links so they use actual "a href" links instead of onclick js events?  The onclick does not allow use of right click to open in new window.

 

Thanks

 

sure, reason the person did it the previous way was to have the whole element be click-able.. which is fine but right click is the same as the left click. to restore the right click ability you'd have to add some js. ive already coded this up in another project.. let me look into this and get back to ya

Link to comment

Simply make the <a href> tag a block element. display: inline-block/block. Make it cover the height and width of the parent element that way. No JS needed....

 

See simpleFeatures menu css for additional help.

I've got a feeling I'm going to learn a lot from you two.

 

Joe L.

Link to comment

Simply make the <a href> tag a block element. display: inline-block/block. Make it cover the height and width of the parent element that way. No JS needed....

 

See simpleFeatures menu css for additional help.

I've got a feeling I'm going to learn a lot from you two.

 

Joe L.

 

I'd suggest we collaborate on a new webGUI once Tom moves away from emhttp to lighttpd. PHP back-end with a well designed skin-able responsive front end is the current trend. Powerful, fast, and pretty.

 

I've done some amazing things with web interfaces in the past (work related) - and I've seen the quality of work you produce. It makes sense to pool our resources.

Link to comment

Simply make the <a href> tag a block element. display: inline-block/block. Make it cover the height and width of the parent element that way. No JS needed....

 

See simpleFeatures menu css for additional help.

 

yes that will work well since for what it is..  reason i had to use JS on my project was that the width/height were unpredictable and the elements were embeded inside a table td element.. anyways redid the css and works as planned. let me update the horz menu and post. also added the link back to the active element..

Link to comment

Simply make the <a href> tag a block element. display: inline-block/block. Make it cover the height and width of the parent element that way. No JS needed....

 

See simpleFeatures menu css for additional help.

 

yes that will work well since for what it is..  reason i had to use JS on my project was that the width/height were unpredictable and the elements were embeded inside a table td element.. anyways redid the css and works as planned. let me update the horz menu and post. also added the link back to the active element..

 

Yeah table elements are terrible to deal with...

Link to comment

Simply make the <a href> tag a block element. display: inline-block/block. Make it cover the height and width of the parent element that way. No JS needed....

 

See simpleFeatures menu css for additional help.

 

yes that will work well since for what it is..  reason i had to use JS on my project was that the width/height were unpredictable and the elements were embeded inside a table td element.. anyways redid the css and works as planned. let me update the horz menu and post. also added the link back to the active element..

 

Yeah table elements are terrible to deal with...

 

making a menu out of nested div elements is no fun either..  really should be a proper ul/li list. helpful links really should just be part of help.. reduce the amount of menu items.. but if your going to start going this route might as well use a well established menu.. then add media-queries/responsive..  anyways this is updated. note that the lime-tech logo above the menu will not stay fixed when scrolling on the vertical menu.. to do this requires more css hacking than I really wanted to do.. plus it also gives you an indication that your not at the top. attached the updated menu for horz/vertical and the updated unmenu.awk to reflect the href changes for the menu elements.

 

 

file ext renamed to .txt due to forum limitations. Joe, you thought about moving unmenu to github or some version control site? it would make it easier to keep track of changes/submissions/issues.. rather than having to dig through notes/comments in the actual file / forums.

unmenu_vertical.txt

unmenu_horizontal.txt

unmenu.txt

Link to comment

Joe, you thought about moving unmenu to github or some version control site? it would make it easier to keep track of changes/submissions/issues.. rather than having to dig through notes/comments in the actual file / forums.

unMENU is under svn version control here:

http://code.google.com/p/unraid-unmenu/

changes can be seen here:

http://code.google.com/p/unraid-unmenu/source/list

Granted, the comments upon submission might not be as complete as you are looking for (there are some updates where no comment was added),

but it is all in one place and it is relatively easy to see the changes. 

 

If you have a google ID, you can be added as a contributor. ;D

 

Joe L.

Link to comment

attached the updated menu for horz/vertical and the updated unmenu.awk to reflect the href changes for the menu elements.

Installed the three files here locally...

 

The vertical skin tabs can be clicked anywhere on the "tab" and work as expected AND can be right-clicked,

but the horizontal skin requires you to click on the link in the tab to do anything. 

 

The mouse pointer is misleading in the horiz skin as it does change hovering anywhere over the horiz skin tab, but if you are not over the text in the tab, it does nothing when you click on it (in Firefox, I did not check IE or Chrome)

 

Joe L.

Link to comment

Small issue with the fixed menu in vertical css...  It does not allow access to many of the tabs if you open it in a browser window sized so the entire menu is not visible.  (800x600 probably will not let you get back to the User-Scripts to change back to Horiz menu.) 

 

Easy fix would be a 4th user-script button to have vert-skin with fixed menu position.  (possibly can use "sed" to modify the stock vert skin to fix the position of the menu so no need for additional .css file)

 

Joe L.

Link to comment

attached the updated menu for horz/vertical and the updated unmenu.awk to reflect the href changes for the menu elements.

Installed the three files here locally...

 

The vertical skin tabs can be clicked anywhere on the "tab" and work as expected AND can be right-clicked,

but the horizontal skin requires you to click on the link in the tab to do anything. 

 

The mouse pointer is misleading in the horiz skin as it does change hovering anywhere over the horiz skin tab, but if you are not over the text in the tab, it does nothing when you click on it (in Firefox, I did not check IE or Chrome)

 

Joe L.

 

did you restart unmenu after replacing the unmenu.awk ? use the 'tab' key to see the hit area for the href. it sounds like your still got cached css/html. you will notice that its about a 95% coverage. but that can be easily fixed, remove the padding from the menu_item and it goes on the 'a' instead.. why this wasnt done before is because the html previously didnt have a href for the links.. and the active one wasnt either. ill adjust for the updated html..

 

about affixing the nav menu only when there is enough screen space.. you'd have to either use a javascript toinspect resolution/know where you are and change the position or use experimental css position sticky ( http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit ) .. both are easy but are a bit much to do for this one thing. if you really wanted to start trying to make unmenu mobile/tablet friendly (which is what I'm assuming your trying to do.. since no one in their right mind has a desktop browser thats doing 800x600 anymore.. ) you really need to focus more on mobile/tablet design/layout. designing for desktop and mobile are two different things.. and rarely work well when trying to acomplish both in the same design.

 

there are plenty of frameworks that have tried.. bootstrap is probably one of the most noteable in recent time. jquery ui/mobile before it. there are tons of them out there.. and honestly you can spend forever tweaking and trying to use one to get things just how you want. now if you really want to go down that road theres some neat stuff that they can do.. but at the added expense of more http requests.. more cpu usage.. etc.

 

one example of a fixed menu with scrollspy that will go from fixed to absolute when needed,

http://twitter.github.io/bootstrap/javascript.html#affix

 

 

anyways let me fix up the css some more.. honestly the html/css really should be redone rather than keep hacking away at it to try to get it to the end goal..  :)

Link to comment

Simply make the <a href> tag a block element. display: inline-block/block. Make it cover the height and width of the parent element that way. No JS needed....

 

See simpleFeatures menu css for additional help.

 

yes that will work well since for what it is..  reason i had to use JS on my project was that the width/height were unpredictable and the elements were embeded inside a table td element.. anyways redid the css and works as planned. let me update the horz menu and post. also added the link back to the active element..

 

Yeah table elements are terrible to deal with...

 

making a menu out of nested div elements is no fun either..  really should be a proper ul/li list. helpful links really should just be part of help.. reduce the amount of menu items.. but if your going to start going this route might as well use a well established menu.. then add media-queries/responsive..  anyways this is updated. note that the lime-tech logo above the menu will not stay fixed when scrolling on the vertical menu.. to do this requires more css hacking than I really wanted to do.. plus it also gives you an indication that your not at the top. attached the updated menu for horz/vertical and the updated unmenu.awk to reflect the href changes for the menu elements.

 

 

file ext renamed to .txt due to forum limitations. Joe, you thought about moving unmenu to github or some version control site? it would make it easier to keep track of changes/submissions/issues.. rather than having to dig through notes/comments in the actual file / forums.

 

Yes, you probably understand the pain I went through to just customise the look of the elements in the standard GUI...  If you don't have well placed selectors, it's pretty bloody hard to work with - for both javascript and css!

Link to comment

okay made a few updates, fixed the hacked inline styles for the fieldsets.. updated the classic theme to reflect the changes.. tweaked that slightly so that it looks the same across browsers (uses normalize.css like the other theme.. also use px rather than em for fonts to avoid bugs with that..) updated the vertical skin so that the left menu is static when the resolution sucks.. otherwise it will scroll with the content when there's enough browser height..  should make everyone happy now. fixed the myMain inline hacks.. but added another one in place since now we use a .gif for the myMain logo. made a few tweaks to the unmenu.awk (tab to spaces, cleaned up some minor things.. make the % used column center for the header and footer rather than just the content) anyways should be good to go now.

myMainLogo.gif.9ef308d11743c365d04ab4f68d4f5090.gif

unmenu_vertical.txt

unmenu_horizontal.txt

unmenu_classic.txt

Link to comment

due to forum restrictions, attaching the other files here.

Looks good, I see you got rid of the padding entirely in the horiz menu.  I had performed exactly the same step to fix the issue I had described earlier.

 

Everything looks great now, although "classic" now has a different font than previously.    (it does look better though...

 

Also, myMainLogo.jpg is still being actively referenced by

07-unmenu-mymain.awk

myMain.conf

myMainConfigDrive.html

myMainConfigMain.html

myMainConfigView.html

 

I'm going to upload your newer versions to google.code so anybody who checks for upgrades will be able to get them too.

 

They are now on google.code... "Check-for-Updates" should now grab them.)

 

Joe L.

Link to comment

Zoggy,

 

Can you change the menu links so they use actual "a href" links instead of onclick js events?  The onclick does not allow use of right click to open in new window.

 

Thanks

The links are now "right clickable."  Use "Check for Updates" and then install them.
Link to comment

Definitely looks good;  and nice to see a couple comments that it works in v4.7 => however, being a VERY cautious upgrader for my main media server, I do have one question:  If I simply use the "Upgrade" button in UnMenu to do the upgrade, will the CleanPowerDown and APC UPS packages still work as is; or is there a mod that needs to be made to these as well?    Just don't want to upgrade and find out at the next power outage that the system doesn't power down cleanly  :)

Link to comment

Definitely looks good;  and nice to see a couple comments that it works in v4.7 => however, being a VERY cautious upgrader for my main media server, I do have one question:  If I simply use the "Upgrade" button in UnMenu to do the upgrade, will the CleanPowerDown and APC UPS packages still work as is; or is there a mod that needs to be made to these as well?    Just don't want to upgrade and find out at the next power outage that the system doesn't power down cleanly  :)

The existing packages will all work as they do today.  (my main development environment for unMENU is on my 4.7 based server)  Nothing has changed.

It is safe to upgrade.  No mods were made to the apcupsd, or clean-powerdown packages at all and no already installed packages are changed in any way.    This release was to allow .css skins to be applied.

 

Only one unMENU package was modified recently, and that was to the PERL package to allow you to optionally have it install the MP3 extensions from CPAN.  (a YES/NO field was added to the config screen) The version of PERL installed exactly the same.  An existing installation of the "perl"  package would not be affected at all unless you deleted/re-installed it.

 

You can click on the check for updates button, then click on the subsequent "install updates" button, and finally, click on the "re-start unMENU" button to see the new changes.  (You might also need to switch back and forth between a few pages of unMENU to clear your browser's cache)

 

Have Fun.

 

Joe L.

Link to comment

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.