Make WordPress Core

Opened 11 years ago

Closed 11 years ago

#26299 closed defect (bug) (fixed)

admin bar submenu misaligned on mobile devices if the parent is not a link

Reported by: chouby's profile Chouby Owned by:
Milestone: 3.8 Priority: normal
Severity: minor Version: 3.8
Component: Toolbar Keywords:
Focuses: ui Cc:

Description

in admin-bar sub-menu is too high if the parent menu is not a link.

This can be fixed with the css rule:

@media screen and ( max-width: 782px ) {
	#wpadminbar .quicklinks .ab-empty-item,
	 {
		height: 46px;
	}

Change History (7)

#1 @SergeyBiryukov
11 years ago

  • Component changed from Administration to Toolbar
  • Keywords ui-focus added
  • Milestone changed from Awaiting Review to 3.8

#2 @Chouby
11 years ago

Here is a proposal for a more complete fix to correct (horizontal) misalignement of the parent icon too:

@media screen and ( max-width: 782px ) {
	#wpadminbar .ab-icon {
		text-align: center;
	}

	#wpadminbar .quicklinks .ab-empty-item
	{
		height: 46px;
		padding: 0;
	}
}

I also noticed that the H of 'Howdy, user' is visible in the right corner. Here I have no pure CSS proposal without adding an html tag to wrap it.
in wp-includes/admin-bar.php:

	$howdy  = sprintf( __('<span>Howdy, %1$s</span>'), $current_user->display_name );

and the css rule

@media screen and ( max-width: 782px ) {
	#wpadminbar #wp-admin-bar-my-account > a span {
		display: none;
	}
}

#3 @georgestephanis
11 years ago

If it's done, the sprintf would probably be better as leaving the original line as

$howdy = sprintf( __('Howdy, %1$s'), $current_user->display_name );

to avoid needlessly breaking the translation strings, and changing the array item from

'title' => $howdy . $avatar,

to

'title' => sprintf( '<span>%1$s</span>%2$s', $howdy, $avatar ),

or

'title' => "<span>{$howdy}</span>{$avatar}",

Last edited 11 years ago by georgestephanis (previous) (diff)

#4 @iammattthomas
11 years ago

In 26595:

Add .ab-empty-item to the responsive adminbar sizing adjustments. Ensure that hidden text in responsive adminbar stays properly hidden in Firefox. See #26299.

#5 @iammattthomas
11 years ago

r26595 includes CSS fixes that should take care of the "H" in "Howdy" being visible in Firefox on small screens. I've also included .ab-empty-item in the standard responsive resizing rules for adminbar links, which should take care of the positioning issue. Chouby could you confirm this is now fixed?

#6 @Chouby
11 years ago

Yes. That's perfect now! The ticket can be closed.

@georgestephanis html tags in an internationalized string... I should have not been totally awaken when I wrote this :(

#7 @iammattthomas
11 years ago

  • Resolution set to fixed
  • Status changed from new to closed
Note: See TracTickets for help on using tickets.