Make WordPress Core

Opened 10 years ago

Closed 10 years ago

#26430 closed defect (bug) (fixed)

Toolbar: in small screens any plugin output breaks toolbar layout

Reported by: lancewillett's profile lancewillett Owned by: iammattthomas's profile iammattthomas
Milestone: 3.8 Priority: normal
Severity: normal Version:
Component: Toolbar Keywords: needs-patch
Focuses: Cc:

Description

What I expected to happen

When activating a plugin, it often adds text or icons to the toolbar. I'd expect them to not change the view or break the layout in small screens, like a mobile phone.

What actually happened

When I activated a plugin, and viewed the front-end of my site -- logged in -- with a mobile device, the layout was broken: the main content didn't fill the screen and my avatar was off the toolbar in the right gutter (see screenshot).

Steps to repeat

This only happens when logged in, and toolbar appears.

  1. Latest trunk WP
  2. Install and activate http://wordpress.org/plugins/rtl-tester/
  3. Logged in, go to front-end on an iPhone
  4. See broken toolbar: https://cloudup.com/cYLn6HBAEAG+

The text added by the plugin to the toolbar "Switch to RTL" breaks the layout.

Device and testing details

Tested with iPhone 5 in portrait and landscape mode on a self-hosted WP site running trunk and Twenty Fourteen, http://themebreaker.wordpress.net/. Only active plugin is RTL Tester.

Attachments (2)

rtl-tester-toolbar.jpg (192.0 KB) - added by lancewillett 10 years ago.
26430.diff (513 bytes) - added by Jayjdk 10 years ago.

Download all attachments as: .zip

Change History (11)

#1 @SergeyBiryukov
10 years ago

  • Milestone changed from Awaiting Review to 3.8

#2 @nacin
10 years ago

  • Cc iammattthomas added

I had mentioned this to MT; the prevailing thought was that maybe on tiny screens, we should instead hide all menus and explicitly only show the six we've chosen. Seems like that would work fine here. For more: #26071.

#3 @iamtakashi
10 years ago

  • Cc takashi@… added

#4 @iammattthomas
10 years ago

  • Owner set to iammattthomas
  • Resolution set to fixed
  • Status changed from new to closed

In 26678:

By default, hide all adminbar links at responsive sizes and selectively un-hide just the essential core items. Fixes #26430.

#5 follow-up: @iammattthomas
10 years ago

In 26680:

Allow dropdown lists to appear in responsive states; reset the minimum width of dropdowns at responsive sizes. See #26430.

#6 @DrewAPicture
10 years ago

I wonder if there's a way to make this a tiny bit more dynamic, even using something like a filter. I don't know.

Just seems odd that you now have to institute a CSS override just to show or hide toolbar items — items added via an API and hidden via CSS. Weird.

#7 @iammattthomas
10 years ago

The idea here is that there's no room on mobile devices for *any* additional items to be added by plugins, etc. So nothing should attempt to override this CSS; the point is to hide anything that's not an essential core link so that links added by plugins don't force the toolbar to wrap to two lines.

#8 in reply to: ↑ 5 @Jayjdk
10 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Replying to iammattthomas:

In 26680:

Allow dropdown lists to appear in responsive states; reset the minimum width of dropdowns at responsive sizes. See #26430.

intrinsic is an old webkit value, the new one is fit-content (https://developer.mozilla.org/en-US/docs/Web/CSS/width#Values).

fit-content will work in Firefox as well. Currently it requires vendor prefixes (http://caniuse.com/#search=intrinsic)

#wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper { 
   min-width: intrinsic;
   min-width: -webkit-fit-content;
   min-width: -moz-fit-content; 
   min-width: fit-content; 
}


I've attached a patch.

@Jayjdk
10 years ago

#9 @iammattthomas
10 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 26735:

Add new fit-content rules to accompany intrinsic width on adminbar dropdown wrappers. Fixes #26430, props Jayjdk.

Note: See TracTickets for help on using tickets.