Make WordPress Core

Opened 10 years ago

Closed 10 years ago

Last modified 10 years ago

#25918 closed defect (bug) (fixed)

Pending comments count doesn't fit

Reported by: sergeybiryukov's profile SergeyBiryukov Owned by: azaozz's profile 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 10 years ago.
25918.26447.png (5.9 KB) - added by SergeyBiryukov 10 years ago.
25918.patch (1.1 KB) - added by SergeyBiryukov 10 years ago.
25918.alt.patch (3.1 KB) - added by SergeyBiryukov 10 years ago.
25918.after.png (6.6 KB) - added by SergeyBiryukov 10 years ago.
25918.2.patch (1.2 KB) - added by SergeyBiryukov 10 years ago.
With default values in comments
25918.after.4-digits.png (6.2 KB) - added by SergeyBiryukov 10 years ago.
25918.3.patch (7.5 KB) - added by azaozz 10 years ago.
25918.4.patch (4.0 KB) - added by azaozz 10 years ago.
25918-de_DE.png (69.1 KB) - added by ocean90 10 years ago.
25918-de_DE.2.png (42.0 KB) - added by ocean90 10 years ago.
25918.5.patch (946 bytes) - added by ocean90 10 years ago.
Increase admin menu width by 10px
25918-ru_RU-160px.png (5.8 KB) - added by SergeyBiryukov 10 years ago.

Download all attachments as: .zip

Change History (36)

@SergeyBiryukov
10 years ago

#2 @iammattthomas
10 years ago

  • Cc mt@… added

#3 @morganestes
10 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
10 years ago

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

#5 @azaozz
10 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
10 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
10 years ago

maybe to make font smaller?

#8 follow-up: @melchoyce
10 years ago

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

#9 @nofearinc
10 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
10 years ago

With default values in comments

#10 in reply to: ↑ 8 @SergeyBiryukov
10 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
10 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
10 years ago

#12 @azaozz
10 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 10 years ago by azaozz (previous) (diff)

@azaozz
10 years ago

#13 @azaozz
10 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
10 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
10 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
10 years ago

#16 @ocean90
10 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
10 years ago

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

@ocean90
10 years ago

Increase admin menu width by 10px

#18 @SergeyBiryukov
10 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
10 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
10 years ago

#26452 was marked as a duplicate.

#21 @toscho
10 years ago

  • Cc info@… added

#22 @iammattthomas
10 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
10 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.