Configurable menubar position

[colemanw]

Overview

Adds a system setting to control menubar placement; works across the different CMSs.

Background

There has been some discussion over the years about where the CiviCRM menubar should go, and different CMSs have gotten different treatment. Currently WP, Drupal & Backdrop get the menubar fixed to the top of the screen, obscuring the CMS admin menu. Some users think that's a good use of space, others find it annoying. Currently on Joomla the menubar is at the top of the content area and scrolls with the page; again with pros and cons.

In overhauling the menubar system and optimizing it for each CMS, I couldn't find one perfect solution that worked for every CMS, and even within a single CMS there may be different themes and admin interfaces which make menubar placement more complicated.

Technical details

Instead of one hardcoded position per CMS, we now have three options with the possibility of more.
As noted in the updated readme, the selected option becomes a css class added to the page body. The CRM.menubar.initialize() function places the menubar markup inside #crm-container instead of body if position is set to "Above Content Area". The stylesheet does the rest.
Since it wasn't possible to style this in a 100% generic way, an additional stylesheet is included for fine-tuning each CMS.

Notes

This PR also improves styling of the mobile menu to make it look good on various CMSs. E.g. on Wordpress:

[mattwire]

@vingle Configurable civicrm menu positions!

[vingle]

@vingle Configurable civicrm menu positions!

Great solution — and works perfectly on Joomla.

[christianwach]

@colemanw What do I have to do to get the dropdown to show up?

[vingle]

@colemanw What do I have to do to get the dropdown to show up?

did you go Administer -> Customize Data & Screens -> Display Preferences?

[christianwach]

Yep, option doesn't seem to be rendered:

[christianwach]

Nothing in the logs to suggest there's a problem.

[mattwire]

@christianwach Did you clear civicrm caches? ie. civicrm/clearcache It's a new setting so won't show until that's done

[christianwach]

@mattwire Of course!

[mattwire]

@christianwach Check if Civi thinks the setting exists ('menubar_position') using the settings API. And looks like it's being added using a .extra.tpl so can you check if that is being included?

[colemanw]

@christianwach if you have any custom code on your site which already implements a /CRM/Admin/Form/Preferences/Display.extra.tpl then that could be the problem. That file is just a temporary hack until we get this migrated to core, but those .extra.tpl files are known to conflict with each other if there is more than one with the same name.

You can also set it with the api explorer:

[colemanw]

@vingle thanks for testing on Joomla! Can you fill out that section of #16 ?

[vingle]

@vingle thanks for testing on Joomla! Can you fill out that section of #16 ?

Will do asap. Incidentally one issue I noticed that I've not had time to test further or write an issue up for was the positioning of the divider lines seemed wrong comparing with the original menu.. (ie the line is below 'new a/b test' / 'new sms' rather than above it)

[colemanw]

@vingle whoops you're right, my mistake. Fixed: b6830fc

[colemanw]

I'll merge this so there's no confusion about which branch to test when people engage with #16

[christianwach]

Okay, so finally I got this working by upgrading to CiviCRM 5.9.alpha1 and uninstalling/reinstalling KAM. Simply couldn't get it to work with a simple upgrade.

I like the general idea of giving people the choice of where the menu appears. I'll have a go at refining the implementation when I get some free time. For example:

• The menu and element heights ought to be 32px for desktop viewports and 46px for viewports below 768px.
• The WordPress admin menu has position: fixed desktop viewports and position: absolute below 600px. This should be respected or else we get this as we scroll:
• I'm not sure that adding a margin-top to #wpbody is the best way to make space for the CiviCRM menu - it might be better to do what WordPress does and add extra padding-top to the <html> element and avoid the blank space above "Dashboard" in the left-hand menu:

FWIW there are some other oddities, but I suspect they're inherent to Smart Menus itself. Here's what happens when I have a viewport that's not tall enough to hold the submenus:

As you can see, the items below "System Settings" disappear.

Having said all of the above, this is really nice work @colemanw and an excellent basis for future development! 👍

[colemanw]

@christianwach I think I've addressed your major concerns in #22.