CMSimple_XH–Forum

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: 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.

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

I have implemented something like this a couple of years ago here:
[ external image ]
I prefere icons with tooltips.

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.

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.:

CMSimple_xh это простая и легкая cms, программистом которой является Christoph Becker

That is not correct. CMSimple_XH is developed by a team--I'm only one of the team members.

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

Termin wrote:Sorry, the text was edited by

Thanks.

The code core.css was updated 27.05.2014

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).

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.