Make WordPress Core

Opened 12 years ago

Closed 11 years ago

Last modified 11 years ago

#21890 closed defect (bug) (fixed)

Customizer spinner breaks button alignment with longer strings

Reported by: sergeybiryukov's profile SergeyBiryukov Owned by: iammattthomas's profile iammattthomas
Milestone: 3.8 Priority: normal
Severity: normal Version: 3.4
Component: Customize Keywords: has-patch
Focuses: ui Cc:


See the screenshot.

Attachments (9)

21890.png (6.7 KB) - added by SergeyBiryukov 12 years ago.
21890.diff (1.1 KB) - added by lessbloat 12 years ago.
21890.2.diff (412 bytes) - added by SergeyBiryukov 12 years ago.
21890.after.png (6.5 KB) - added by SergeyBiryukov 12 years ago.
21890.2.alt.diff (1.1 KB) - added by SergeyBiryukov 12 years ago.
21890.2.png (4.7 KB) - added by SergeyBiryukov 11 years ago.
21890.3.diff (622 bytes) - added by SergeyBiryukov 11 years ago.
21890.3.after.png (4.7 KB) - added by SergeyBiryukov 11 years ago.
21890.4.diff (1.0 KB) - added by ocean90 11 years ago.

Download all attachments as: .zip

Change History (28)

12 years ago

#1 @SergeyBiryukov
12 years ago

  • Keywords ui-feedback added

Unfortunately, I can't come up with a shorter translation.

Perhaps "Cancel" button can be hidden when the spinner is active?

12 years ago

#3 @lessbloat
12 years ago

21890.diff is a quick hack. There is very likely a better way to handle this, but nothing is coming to mind.

#4 @SergeyBiryukov
12 years ago

  • Keywords has-patch added; needs-patch removed

Thanks, 21890.diff works for me.

#5 @lessbloat
12 years ago

  • Keywords commit added; ui-feedback removed

#6 @lessbloat
12 years ago

Went back and retested this. Looks good to go.

#7 follow-up: @bpetty
12 years ago

One drawback of this solution to consider is that if the customizer ends up locked up during a save at any point for any reason (ajax request failures are not uncommon), there's no cancel button to click anymore to back out to the admin (other than hitting the back button of course, but the Cancel button is obviously more "trust-worthy" to a user).

#8 in reply to: ↑ 7 @helenyhou
12 years ago

  • Keywords commit removed

Replying to bpetty:

Agreed. Current patch just feels hacky all around - magic numbers and all that. Any other ideas out there?

#9 @helenyhou
12 years ago

  • Component changed from UI to Appearance

#10 @SergeyBiryukov
12 years ago

Could we decrease the left and right padding on those buttons by 2px?

That would help with the issue as well: 21890.after.png.

If that's not feasible as a default appearance, 21890.2.alt.diff does the same only for ru_RU. The rtl class is not necessary for ru_RU, but might be useful for other locales (we already use a similar pattern in admin-header.php and press-this.php).

#11 @bpetty
12 years ago

Yeah, it does at least need something there to help, and that could do for now.

We could then take the time to consider some new behavior like possibly switching out the Save button with a Cancel button while it's working or something to that effect.

#12 @nacin
12 years ago

In 22474:

Add some ru_RU-specific CSS to the customizer to prevent the spinner from being bumped to the next line. props SergeyBiryukov, see #21890.

#13 @nacin
12 years ago

  • Keywords needs-patch added; has-patch removed
  • Milestone changed from 3.5 to Future Release

#14 @SergeyBiryukov
11 years ago

  • Keywords ui-focus has-patch added; needs-patch removed
  • Milestone changed from Future Release to 3.8

The new admin with Open Sans reintroduced this issue due to increased font width. See 21890.2.png.

21890.3.diff adjusts some padding for proper alignment: 21890.3.after.png.

11 years ago

#15 @ocean90
11 years ago

21890.4.diff includes the same for .locale-de-de, where we have the same issue.

#16 @ocean90
11 years ago

Seems like we have to change the style when the media query kicks in too, see

#17 @iammattthomas
11 years ago

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

In 26624:

Prevent the spinner from bumping the Cancel button to a new line in de_DE and ru_RU. Fixes #21890; props SergeyBiryukov, ocean90.

#18 @iammattthomas
11 years ago

Working on an adjustment for the responsive buttons, which shouldn't grow bigger in the Customizer screen since it's not responsive anyway.

#19 @iammattthomas
11 years ago

In 26628:

Reset responsive button styles in the Customizer, which uses fixed widths and positioning and is otherwise non-responsive. See #21890.

Note: See TracTickets for help on using tickets.