WordPress.org

Make WordPress Core

Opened 7 years ago

Closed 6 years ago

Last modified 6 years ago

#25918 closed defect (bug) (fixed)

Pending comments count doesn't fit

Reported by: SergeyBiryukov Owned by: azaozz
Milestone: 3.8 Priority: low
Severity: trivial Version: 3.8
Component: Administration Keywords: ui-feedback
Focuses: ui Cc:

Description

In languages with longer words, the pending comments count in the admin menu doesn't fit (see the screenshot in Russian).

Attachments (13)

25918.png (6.2 KB) - added by SergeyBiryukov 7 years ago.
25918.26447.png (5.9 KB) - added by SergeyBiryukov 7 years ago.
25918.patch (1.1 KB) - added by SergeyBiryukov 7 years ago.
25918.alt.patch (3.1 KB) - added by SergeyBiryukov 7 years ago.
25918.after.png (6.6 KB) - added by SergeyBiryukov 7 years ago.
25918.2.patch (1.2 KB) - added by SergeyBiryukov 6 years ago.
With default values in comments
25918.after.4-digits.png (6.2 KB) - added by SergeyBiryukov 6 years ago.
25918.3.patch (7.5 KB) - added by azaozz 6 years ago.
25918.4.patch (4.0 KB) - added by azaozz 6 years ago.
25918-de_DE.png (69.1 KB) - added by ocean90 6 years ago.
25918-de_DE.2.png (42.0 KB) - added by ocean90 6 years ago.
25918.5.patch (946 bytes) - added by ocean90 6 years ago.
Increase admin menu width by 10px
25918-ru_RU-160px.png (5.8 KB) - added by SergeyBiryukov 6 years ago.

Download all attachments as: .zip

Change History (36)

@SergeyBiryukov
7 years ago

#2 @iammattthomas
7 years ago

  • Cc mt@… added

#3 @morganestes
7 years ago

My 2 cents:

I started looking into alternatives today. Going from 150px to 165px across the menu will fix this particular case (and 3-digit counts) without messing up the rest of the admin too much, but there's a lot of flexibility needed to figure out what the longest text will be and adjust the margins for it. It can get out of hand pretty quick.

I don't think the overlapping bubble looks bad, actually, and it doesn't interfere with any other panel that I've seen.

#4 @matt
7 years ago

  • Priority changed from normal to low
  • Severity changed from normal to trivial

#5 @azaozz
7 years ago

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

In 26447:

Fix pending comments/plugins count bubbles, fixes #25918

#6 @SergeyBiryukov
7 years ago

  • Keywords ui-feedback added
  • Resolution fixed deleted
  • Status changed from closed to reopened

[26447] moves the bubble to the next line: 25918.26447.png.

This works, but I wonder if we could increase the admin menu width on a per-language basis.

Generally, localized CSS goes to the corresponding section at the end of wp-admin.css. However, due to all the .folded and .auto-fold rules in this case, the patch is much smaller if the localized CSS comes right after the rules it needs to override. See 25918.patch vs. 25918.alt.patch.

The result looks much better to me: 25918.after.png.

#7 @alexvorn2
7 years ago

maybe to make font smaller?

#8 follow-up: @melchoyce
7 years ago

SergeyBiryukov: That seems like a great solution. Would it still work for a 3-4 digit comment count?

#9 @nofearinc
6 years ago

SergeyBiryukov: are those code snippets meant to always live in wp-admin.css? Given the dozens of translations available, I'm not sure how many additional rules should be added for every language (or group of languages), plus what melchoyce said for higher comment counts.

@SergeyBiryukov
6 years ago

With default values in comments

#10 in reply to: ↑ 8 @SergeyBiryukov
6 years ago

Replying to melchoyce:

SergeyBiryukov: That seems like a great solution. Would it still work for a 3-4 digit comment count?

3-4 digit comment counts would just wrap to a new line, like they do now: 25918.after.4-digits.png.

Replying to nofearinc:

SergeyBiryukov: are those code snippets meant to always live in wp-admin.css? Given the dozens of translations available, I'm not sure how many additional rules should be added for every language (or group of languages), plus what melchoyce said for higher comment counts.

This isn't something every language would need, only the ones having longer words in the admin menu. I guess we сould try and see how many languages would require an extended admin menu width.

#11 @nacin
6 years ago

I think the width of the admin menu also affects a ton of media query breakpoints, right? Magic numbers, a lot of them. Or is that covered by the patch?

There are a few languages that would greatly benefit from this. German and Russian are the two that come to mind. But I haven't heard the complaint from too many over the years.

@azaozz
6 years ago

#12 @azaozz
6 years ago

Refreshed 25918.2.patch. Was breaking the responsive mode (782px) menu. Needed another level of specificity to all .auto-fold #adminmenu to override the .locale-*. Also needed #adminmenu .wp-submenu { width: auto; }.

Seems to be working well but still not 100% sure that it wouldn't break something. Was thinking: if this is a part of the localization package, would it be easier to fix bugs and push updates?

Last edited 6 years ago by azaozz (previous) (diff)

@azaozz
6 years ago

#13 @azaozz
6 years ago

25918.4.patch is a better version: doesn't touch .auto-fold on screen width <= 782px (doesn't interfere with the responsive menu).

#14 @nacin
6 years ago

Other possible solutions: hide the bubble if wraps to the next line, decrease the right padding (see also #26452), let it overlap (and go hidden).

#15 @markjaquith
6 years ago

25918.4.patch fixes the wrapping for 1, 2, and 3 digit numbers of comments in moderation, but lets it wrap for 4 (so, 1000+ comments awaiting moderation). I'm fine with that.

@ocean90
6 years ago

@ocean90
6 years ago

#16 @ocean90
6 years ago

25918-de_DE.png is how it looks in German currently.

25918-de_DE.2.png shows on the right side the 170px width, like for .locale-ru-ru. That's 10px to much in my eyes - 160px would be enough for us (1000+ will wrap, but that's okay). So is it okay to add another 78 lines or should we simply increase the default width by 10px?

#17 @iammattthomas
6 years ago

160px as a default width looks fine to my eyes.

@ocean90
6 years ago

Increase admin menu width by 10px

#18 @SergeyBiryukov
6 years ago

With 160px as a default width, 2 digit numbers would fit in ru_RU (without any padding though: 25918-ru_RU-160px.png), and 3 or more would wrap. Sounds like a good compromise.

#19 @alexvorn2
6 years ago

maybe to add an animation, to autoscroll the text from left to right on hover if needed... ? http://jsfiddle.net/yurik417/73daY/345/

#20 @iammattthomas
6 years ago

#26452 was marked as a duplicate.

#21 @toscho
6 years ago

  • Cc info@… added

#22 @iammattthomas
6 years ago

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

In 26817:

Expand adminmenu from 150px to 160px, creating more room for pending comment counts and translated text. Fixes #25918, props ocean90.

#23 @iammattthomas
6 years ago

Everything in 25918.5.patch looks good to my eyes, in LTR, RTL, desktop and responsive. This needs a decision, so I'm rolling with it.

Note: See TracTickets for help on using tickets.