WordPress.org

Make WordPress Core

Opened 22 months ago

Closed 7 months ago

Last modified 7 months 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 22 months ago.
21890.diff (1.1 KB) - added by lessbloat 22 months ago.
21890.2.diff (412 bytes) - added by SergeyBiryukov 20 months ago.
21890.after.png (6.5 KB) - added by SergeyBiryukov 20 months ago.
21890.2.alt.diff (1.1 KB) - added by SergeyBiryukov 20 months ago.
21890.2.png (4.7 KB) - added by SergeyBiryukov 7 months ago.
21890.3.diff (622 bytes) - added by SergeyBiryukov 7 months ago.
21890.3.after.png (4.7 KB) - added by SergeyBiryukov 7 months ago.
21890.4.diff (1.0 KB) - added by ocean90 7 months ago.

Download all attachments as: .zip

Change History (28)

SergeyBiryukov22 months ago

comment:1 SergeyBiryukov22 months 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?

lessbloat22 months ago

comment:3 lessbloat22 months ago

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

comment:4 SergeyBiryukov22 months ago

  • Keywords has-patch added; needs-patch removed

Thanks, 21890.diff works for me.

comment:5 lessbloat21 months ago

  • Keywords commit added; ui-feedback removed

comment:6 lessbloat21 months ago

Went back and retested this. Looks good to go.

comment:7 follow-up: bpetty20 months 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).

comment:8 in reply to: ↑ 7 helenyhou20 months 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?

comment:9 helenyhou20 months ago

  • Component changed from UI to Appearance

SergeyBiryukov20 months ago

SergeyBiryukov20 months ago

comment:10 SergeyBiryukov20 months 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).

comment:11 bpetty20 months 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.

comment:12 nacin20 months 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.

comment:13 nacin20 months ago

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

SergeyBiryukov7 months ago

SergeyBiryukov7 months ago

comment:14 SergeyBiryukov7 months 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.

ocean907 months ago

comment:15 ocean907 months ago

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

comment:16 ocean907 months ago

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

comment:17 iammattthomas7 months 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.

comment:18 iammattthomas7 months ago

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

comment:19 iammattthomas7 months 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.