WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 2 months ago

#41317 closed enhancement (fixed)

Consistent submenu item spacing when count indicator is present

Reported by: pauldechov Owned by: afercia
Milestone: 4.9 Priority: normal
Severity: normal Version:
Component: Administration Keywords: good-first-bug has-screenshots has-patch
Focuses: ui Cc:

Description

The "awaiting-mod" count indicator looks good and doesn't affect top-level menu items, but causes inconsistent spacing with submenu items: https://cloudup.com/cF_VyRXScwF

https://core.trac.wordpress.org/browser/trunk/src/wp-admin/css/admin-menu.css#L527

Possible fix:

#adminmenu .wp-submenu .awaiting-mod,
#adminmenu .wp-submenu .update-plugins {
    margin-top: 0;
    margin-bottom: -2px;
}

Results in consistent spacing among submenu items: https://cloudup.com/cr4DtYq4lWS

Attachments (3)

41317.patch (752 bytes) - added by JDTrower 4 months ago.
41317.diff (1.3 KB) - added by afercia 2 months ago.
41317.2.diff (2.0 KB) - added by afercia 2 months ago.

Download all attachments as: .zip

Change History (12)

#1 @SergeyBiryukov
4 months ago

  • Component changed from Menus to Administration
  • Keywords needs-patch good-first-bug added
  • Milestone changed from Awaiting Review to Future Release

#2 @afercia
4 months ago

  • Keywords has-screenshots added
  • Version 4.8 deleted

Yep, this is clearly visible also in the "Updates" menu sub-item. However, since the introduction of system-fonts, the actual rendering is different across platforms because the font metrics are different... also different rendering engines matter.
In the screenshot below, the counters how they appear on Windows 10, Chrome, IE11, and Edge:

https://cldup.com/DfdtN7xTya.png

Since the font is different, the sub-item count ("Updates") is better aligned, while the counts in the top-level items are slightly moved to the top. Any change here should take into account different platforms and browsers. Also, notice how the counters are not perfect circles, depending on the actual number and how much space the number takes.

@JDTrower
4 months ago

#3 @JDTrower
4 months ago

  • Keywords has-patch needs-testing added; needs-patch removed

Here is a patch with a first pass at adjusting the CSS for the update "awaiting-mod" indicators. I have tested it on a Windows 10 computer in the latest versions of IE11, Microsoft Edge, Opera, Firefox, and Chrome.

Below are before and after screenshots for each browser.

Chrome - https://cloudup.com/cv2z6IhlduR

Firefox - https://cloudup.com/cbhDPg3lkSt

IE11 - https://cloudup.com/cnQAVyxqTdK

Microsoft Edge - https://cloudup.com/cjDB2x1kk7G

Opera - https://cloudup.com/chczeWBo-xX

This patch would need to be tested on other platforms to make sure the indicators are centered better on those platforms. Feedback is also welcome.

This ticket was mentioned in Slack in #core by jdtrower. View the logs.


4 months ago

#5 @afercia
4 months ago

  • Milestone changed from Future Release to 4.9
  • Owner set to afercia
  • Status changed from new to assigned

Let's try this for 4.9.

#6 @afercia
4 months ago

  • Keywords needs-refresh added; needs-testing removed

Seems to me it would be better to consider the real reason why the counters vertical alignment looks different. I think it's because of the different line-height value of the parent element. The font size and line-height for the top level items are:

font-size: 14px;
line-height: 18px;

while for sub-items are:

font-size: 13px;
line-height: 1.2; <-- 15.6 pixels

To double check, I've tried to make the sub items font size and line height the same as the top level items and then the alignment looks identical:

https://cldup.com/XjP44KooEC.png

Of course, it's not possible to change the font-size but it is possible to change the line-height and then compensate the total item height adjusting the padding. While the WordPress CSS coding standards recommend to use unit-less values for line-height, they also say "unless necessary to be defined as a specific pixel value". I'd probably try to set the same value in pixels for the top level items and sub items, then adjust as necessary.

To improve the "roundness" of the counters, I'd suggest to have a look at the red comment counts in the posts list.

@afercia
2 months ago

#7 @afercia
2 months ago

  • Keywords needs-refresh removed

41317.diff uses the same line-height for the top level items and sub-items. Also:

  • removes the font weight bold for consistency with other counters
  • improves the "roundness" of the counters using the same style used for the counters in the List tables. For reference:

https://cldup.com/XpGTQir0qM.png

Screenshots with the alignments before (left) and after (right) in Chrome macOS:

https://cldup.com/i7REoRG6Tn.png

Also, changes the background red from #d54e21 to #ca4a1f to make the color contrast ratio higher than the 4.5:1 required by the WCAG at level AA (note: this change is not visible in the screenshot above).

@afercia
2 months ago

#8 @afercia
2 months ago

41317.2.diff adds a couple comments.

#9 @afercia
2 months ago

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

In 41362:

Administration: Admin menu: Improve vertical spacing and alignment of menu items with counters.

Props pauldechov, JDTrower.

Fixes #41317.

Note: See TracTickets for help on using tickets.