Adaptable Admin Menu

Discussions and requests related to new CMSimple features, plugins, templates etc. and how to develop.
Please don't ask for support at this forums!
cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Adaptable Admin Menu

Post by cmb » Sat May 17, 2014 12:23 pm

Hello Community,

Termin has sent me a suggestion for an admin menu that adapts to the available viewport width:
[ external image ]
IMO that is a sensible improvement, particularly wrt. responsive templates and the ability to be able to administrate a website from a mobile device. That is currently hard to accomplish, as the width of the admin menu is fixed to 750px.

The relevant CSS for core/css/core.css:

Code: Select all

/*
 * Adminmenu
 */

#xh_adminmenu_scrolling {
    z-index: 999;
}

#xh_adminmenu_fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

#xh_adminmenu {
    background-color: #2E3436;
    border-bottom: 1px solid #AAA;
    font-size: 14px;
}

#xh_adminmenu ul {
    font-family: arial,sans-serif;
    font-style: normal;
    height: 36px;
    list-style-image: none;
    list-style-type: none !important;
    margin: 0;
    padding: 0;
}

#xh_adminmenu li {
    float: left;
    list-style-type: none !important;
    margin: 0;
    position: relative;
    text-align: center;
    width: 125px;
}

#xh_adminmenu li a:hover,
#xh_adminmenu li:hover {
    background-color: #3f4446;
}

#xh_adminmenu a,
#xh_adminmenu a:visited,
#xh_adminmenu span {
    color: #D3D7CF;
    display: inline-block;
    line-height: 36px;
    text-decoration: none;
}

#xh_adminmenu span {
    cursor: default;
}

#xh_adminmenu ul ul {
    left: 0;
    list-style-type: none !important;
    position: absolute;
    visibility: hidden;
    z-index: 9999;
}

#xh_adminmenu ul ul li {
    background-color: #4F5456;
    line-height: 26px;
}

#xh_adminmenu ul ul li a:hover {
    background-color: #c50;
    width:100%;
}

#xh_adminmenu li:hover > ul {
    visibility: visible;
}
In the screenshot you can see nice icons for the toplevel items; those are not part of the posted CSS. I'm actually not even sure, whether these are images or characters of a special font (I somehow assume the latter)[1], but IMO that's nice, anyway.

In a default installation with mini1 the admin menu seems to be too high, though; see http://cmsimpleforum.com/viewtopic.php?f=29&t=7462. But anyway, that is not related to the actual purpose of the improvement.

I have had not yet enough time to test the changes in different browsers with different templates, but according to Termin the menu works for IE 8+ as well as other browsers.

What do you think?

Christoph

PS:

It seems Termin's suggestion does not cater for the integrated plugin menu, but it shouldn't be too hard to adjust for that.

A welcome side-effect would be, that the widths of the menu items could be increased, what might be necessary for other languages. That has not been done so far, because the total width of 750px already might be the maximum available/desireable (consider devices/browser windows with a width of 800px and the vertical scrollbar).

PPS: [1] Termin has confirmed that these icons are made with a special font from http://fontello.com/. Something to also consider.
Last edited by cmb on Sat May 17, 2014 4:43 pm, edited 2 times in total.
Reason: added PS and PPS
Christoph M. Becker – Plugins for CMSimple_XH

svasti
Posts: 1651
Joined: Wed Dec 17, 2008 5:08 pm

Re: Adaptable Admin Menu

Post by svasti » Sat May 17, 2014 8:29 pm

What about a config setting:
– icons only (with text as popup title)
– text only
– icon + text

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Adaptable Admin Menu

Post by Tata » Sun May 18, 2014 6:17 am

I have implemented something like this a couple of years ago here:
[ external image ]
I prefere icons with tooltips.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

Termin
Posts: 101
Joined: Thu Jan 27, 2011 8:55 am
Contact:

Re: Adaptable Admin Menu

Post by Termin » Mon May 19, 2014 7:48 am

In detail how to make icons for CMSimple_XH, I wrote on the page: http://www.pixelcom.crimea.ua/css-core- ... le_xh.html

There you can download a ready CSS properties for the admin menu.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Adaptable Admin Menu

Post by cmb » Mon May 19, 2014 1:41 pm

Termin wrote:In detail how to make icons for CMSimple_XH, I wrote on the page: http://www.pixelcom.crimea.ua/css-core- ... le_xh.html
Thank you very much! A very nice, modern and efficient solution. :)
svasti wrote:What about a config setting:
– icons only (with text as popup title)
– text only
– icon + text
Tata wrote:I prefere icons with tooltips.
With Termin's suggestion, it is possible to have only the icons by modifying the language file; simply leave all relevant $tx['editmenu'][...] empty, e.g.:

Code: Select all

$tx['editmenu']['edit']="";
$tx['editmenu']['normal']="";
CMSimple_xh это простая и легкая cms, программистом которой является Christoph Becker
That is not correct. CMSimple_XH is developed by a team--I'm only one of the team members.
Christoph M. Becker – Plugins for CMSimple_XH

Termin
Posts: 101
Joined: Thu Jan 27, 2011 8:55 am
Contact:

Re: Adaptable Admin Menu

Post by Termin » Mon May 19, 2014 5:40 pm

That is not correct. CMSimple_XH is developed by a team--I'm only one of the team members.
Sorry, the text was edited by

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Adaptable Admin Menu

Post by cmb » Mon May 19, 2014 5:52 pm

Termin wrote:Sorry, the text was edited by
Thanks.
Christoph M. Becker – Plugins for CMSimple_XH

Termin
Posts: 101
Joined: Thu Jan 27, 2011 8:55 am
Contact:

Re: Adaptable Admin Menu

Post by Termin » Wed May 28, 2014 12:37 pm

The code core.css was updated 27.05.2014

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Adaptable Admin Menu

Post by cmb » Tue Jul 01, 2014 4:33 pm

To not forget that: if we make the template adaptable to the viewport size, we have modify the multi column plugin menu (a third column will now be displayed to the left of "Plugins", and so would be completely hidden, if the plugin menu is at the left of the screen as in the screenshot above).
Christoph M. Becker – Plugins for CMSimple_XH

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Adaptable Admin Menu

Post by cmb » Fri Sep 05, 2014 9:12 pm

Done (r1366).

I had to add quite some JavaScript to cater for the multicolumn plugin menu and the integrated plugin menus (third menu level). This seems to work fine, except that there are some glitches when the browser is resized (the user might have to refresh the page to make that work properly) and for non responsive templates in small IE 8 windows. Normal usage should be okay, though. Nonetheless some tests seem to be appropriate before the release of XH 1.6.3; please have a look at it.

To not further complicate things, I did not switch to Termin's CSS suggestion, but rather made minimal changes to what we already had (basically, I only removed the min-width property from #xh_adminmenu). The overall effect, however, is nearly identical.
Christoph M. Becker – Plugins for CMSimple_XH

Post Reply