I've had this theme installed for a bit, and a couple times it's worked so well on my phone I've (foolishly) wanted to log into the site on my iPhone. But the default Drupal 7 admin and the toolbar are definitely not responsive.

So I tried installing a couple components of the Spark project, the Ember admin theme and Mobile Friendly Navigation Toolbar.

The navbar seems to not like to work with Ember, at least as far as I've found so far. This toolbar's buttons and functionality are all sized wrong on my Firefox browser on my laptop... very small, too much to read. I'm wondering if there's anything you can do in the template to be more compatible with this Toolbar. Or is there another responsive admin interface that you recommend?

CommentFileSizeAuthor
#3 Writer Toolbar Frontend Side.png44.62 KBdandaman
#3 Writer Toolbar Admin Side.png81.66 KBdandaman
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

bryanbraun’s picture

bryanbraun CreditAttribution: bryanbraun commented

I haven't tried to reproduce this yet, but it sounds like an issue with the Mobile Friendly Navigation Toolbar? Have you left an issue there?

If you could provide a screenshot of the mobile nav bar displaying over an admin page (using the Ember theme), compared to a screenshot of the nav bar displaying over a user-facing page (using the Writer theme), then that would help us know where the issue is. (Broken on Ember only, means it's an Ember issue. Broken on Writer only means it's a Writer issue. Broken on both Writer and Ember means it's a Mobile Navigation Toolbar issue).

I'm not aware of a better mobile admin interface than the ones you mentioned. However, the writer theme has an early port to Drupal 8, and the admin bar works well alongside Writer in that instance.

dandaman’s picture

dandaman CreditAttribution: dandaman commented

Cool. I'll try to get you some screenshots. It does look fine in the Ember admin theme, but when I I'm on a page rendered with Writer the toolbar and icons are very small. You're right, it could be an issue with the Toolbar module, but I guess this theme was the only one I had seen the issue on so far. I guess I've only tried Ember and the built-in Drupal themes and they all seem to look OK.

dandaman’s picture

dandaman CreditAttribution: dandaman commented
FileSize
Writer Toolbar Admin Side.png81.66 KB
Writer Toolbar Frontend Side.png44.62 KB

Here's a screenshot with the Ember admin theme and one with the frontend theme. As you can see, when the Writer theme is active, the toolbar is rather small. These are in Firefox 28 on my Mac, if the browser seems to be a big factor.

dandaman’s picture

dandaman CreditAttribution: dandaman commented

Digging into the CSS a bit, at least one reason seems to be that this responsive toolbar code also uses the <nav> tag, which your theme is selecting for the main navigation styles. Hope that helps.

dandaman’s picture

dandaman CreditAttribution: dandaman commented

I found that it fixes the issue when I added these couple lines to my custom sub-theme's CSS file. So I think if you have this issue and add in this CSS then the Mobile Friendly Navigation Toolbar should look as normal.

nav#navbar-administration a {
	font-size: 1em;
	font-family: "Source Sans Pro","Lucida Grande",Verdana,sans-serif;
}
bryanbraun’s picture

bryanbraun CreditAttribution: bryanbraun commented

Thanks for the screenshots and the diagnosis. You're right, it looks like we need better CSS selectors to avoid this conflict. I'm changing this ticket to a bug report, and I'll get an update in once I get some spare cycles.

bryanbraun’s picture

bryanbraun CreditAttribution: bryanbraun commented
Title: Support for Responsive Admin Themes and Toolbars » CSS Conflicts between Writer and Navbar module
Category: Support request » Bug report
Issue tags: +Novice, +CSS novice

  • bryanbraun committed 706255c on 7.x-2.x authored by dandaman 
    Issue #2233831 by bryanbraun, dandaman: Reduced scope of nav CSS, so it...
bryanbraun’s picture

bryanbraun CreditAttribution: bryanbraun commented
Status: Active » Fixed

I've just made this fix and pushed it up to 7.x-2.x. Thanks again for reporting it so clearly!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.