WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#33181 closed defect (bug) (fixed)

Menu Customizer: Problem with longer translation

Reported by: pavelevap Owned by: westonruter
Milestone: 4.3 Priority: normal
Severity: normal Version: 4.3
Component: Customize Keywords:
Focuses: Cc:

Description

Please see attached screenshot, problem is especially with many options (with left scrollbar).

Attachments (6)

Menu_Customizer_Localization.png (28.8 KB) - added by pavelevap 5 years ago.
customize-action-breathing-room.png (16.7 KB) - added by westonruter 5 years ago.
shift-gear-over-1px.png (16.3 KB) - added by westonruter 5 years ago.
stacked-icons.png (21.3 KB) - added by westonruter 5 years ago.
stacked-icons-mobile.png (50.2 KB) - added by westonruter 5 years ago.
33181-size.patch (981 bytes) - added by ocean90 5 years ago.

Download all attachments as: .zip

Change History (15)

#1 @samuelsidler
5 years ago

  • Milestone changed from Awaiting Review to 4.3

Anything we can do here? @ocean90?

#2 @westonruter
5 years ago

To prevent the text from overflowing the gear icon, we could wrap the “You are customizing:” text in a <span class="customize-action"> element and apply these styles to it:

.preview-notice > .customize-action {
    display: block;
    width: 160px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

This would mean it would get truncated if the text is too long. We could add a title attribute to reveal the full text.

Last edited 5 years ago by westonruter (previous) (diff)

#3 @pavelevap
5 years ago

What about moving icons a little bit down?

#4 @westonruter
5 years ago

Talking with @samuelsidler, we could just stack the buttons on top of each other: customize-action-breathing-room.png

#5 @pavelevap
5 years ago

Looks very good! +1

#6 @westonruter
5 years ago

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

In 33500:

Customizer: Stack the menu gear icon below the help icon for more text breathing room.

Fixes #33181.

#7 @ocean90
5 years ago

In 33503:

Customizer: This circular focus thing is hot.

see #33181.

#8 @ocean90
5 years ago

In 33505:

Customizer: Switch buttons to match the focus order with the visual order.

props afercia.
see #33181.

@ocean90
5 years ago

#9 @obenland
5 years ago

In 33510:

Customizer: Improve focus styles for screen option and help toggles.

Props ocean90.
See #33181.

Note: See TracTickets for help on using tickets.