WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 4 years ago

Last modified 4 years ago

#21890 closed defect (bug) (fixed)

Customizer spinner breaks button alignment with longer strings

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

Description

See the screenshot.

Attachments (9)

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

Download all attachments as: .zip

Change History (28)

@SergeyBiryukov
5 years ago

#1 @SergeyBiryukov
5 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?

@lessbloat
5 years ago

#3 @lessbloat
5 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
5 years ago

  • Keywords has-patch added; needs-patch removed

Thanks, 21890.diff works for me.

#5 @lessbloat
5 years ago

  • Keywords commit added; ui-feedback removed

#6 @lessbloat
5 years ago

Went back and retested this. Looks good to go.

#7 follow-up: @bpetty
5 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
5 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
5 years ago

  • Component changed from UI to Appearance

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

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

#14 @SergeyBiryukov
4 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.

@ocean90
4 years ago

#15 @ocean90
4 years ago

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

#16 @ocean90
4 years ago

@SergeyBiryukov
Seems like we have to change the style when the media query kicks in too, see http://cl.ly/SkPo.

#17 @iammattthomas
4 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
4 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
4 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.