Tweak available theme action links for i18n purposes

[SergeyBiryukov]

Small ru_RU CSS fix to visually separate the Delete link from others.

Same problem with Czech version - translated strings are a little bit longer...

Adding a margin-left: 7px to .available-theme .action-links .delete-theme seems to provide for enough space between the left-floated links and the right-floated links. The CSS already allows the Delete link to wrap to the next line if it has run out of space.

Will also need RTL treatment of margin-right versus margin-left.

Could even use 5px

How does 20918.diff​ look?

Replying to pavelevap:

Same problem with Czech version - translated strings are a little bit longer...

How does it look in Czech version? I've just exported the translation from GlotPress. As far as I can see, the "Live Preview" link is not translated yet, but otherwise seems fine to me: 20918.czech.png​.

Replying to nacin:

How does 20918.diff​ look?

Same as 20918.png​. My concern is that "Details" and "Delete" links are too close with no separator between them. Adding margin-left: 7px to .delete-theme has no effect in this case.

I am using Poedit to use on testing site easily, so these strings are not in GlotPress now :-) Screenshot attached (Chrome, without patch).

Change suggested by Sergey would work perfectly also for Czech version, I guess.

Shorter string

Looks a bit better if I translate "Live Preview" as a noun instead of a verb: 20918.noun.png​. But that makes less sense in theme upgrader, since other action links are verbs there.

20918.3.patch​ brings the same change to cs_CZ.

I feel like 20918.png​ is fine. The lack of separator is made up by the clear contrast in color. On the other hand, since there is no actual padding/margin here, it is possible for the characters to practically touch without 20918.diff​.

Also, adding right margin/padding to the left action links means that the last action link could wrap to the next line solely due to the extra padding, even if it would fit on that line. To avoid that, we can simply add left margin/padding to the delete link, which if it doesn't wrap, generates space, and otherwise looks fine when it is forced to wrap.

So I'm still good with 20918.diff​. 7px could probably become 10px, at worst.

This is not a ru_RU or cs_CZ specific problem. It is a general i18n problem for any LTR or RTL language with long strings, like German.

I will try to tweak translation once again, but I am also not sure if specific locale style changes are best solution...

Something that is not okay: ​http://cl.ly/2n0g1T1e221V1y1J2h17

Something that would be okay: ​http://cl.ly/1F1g0Y1N2a0J393l002S (with 20918.diff​)

(I used i's to get the links as close as possible, to illustrate a point.)

Replying to nacin:

Also, adding right margin/padding to the left action links means that the last action link could wrap to the next line solely due to the extra padding, even if it would fit on that line.

There shouldn't be extra padding, since that links already have 10px padding:
​http://core.trac.wordpress.org/browser/trunk/wp-admin/css/wp-admin.dev.css?rev=21057#L4435
The patch just reduces it to 5px.

I see the point with the longer links in general, 20918.diff​ makes sense indeed. I still feel like condensed links would look a bit better for ru_RU. Perhaps a combined patch would be feasible?

General solution would be better, but for many languages would be some more pixels better then moving Delete link to another row.

There shouldn't be extra padding, since that links already have 10px padding

Padding, margin, and border are assigned to the right of a link, and they are zeroed out for the last link:

#current-theme .theme-info li:last-child,
.theme-options li:last-child,
.available-theme .action-links li:last-child {
	padding-right: 0;
	margin-right: 0;
	border-right: 0;
}

I would rather just move the Delete link inside "Details" and avoid issues with longer strings, but I don't know if that is tenable from a UX perspective.

I could be okay with a patch to reduce the padding for specific locales, in addition to 20918.diff​, but there has to be a consensus on which locales and how much reduction, soon.

Replying to nacin:

Padding, margin, and border are assigned to the right of a link, and they are zeroed out for the last link:

Ah, missed that part. 20918.4.patch​ resets padding and margin for li:last-child.

In practice, however, this doesn't matter, since .available-theme is either 300px or 240px in width, and both states look fine without resetting: 20918.after.3.png​.
Hence 20918.5.patch​.

It will be very common for the text to wrap even with a .locale-ru-ru patch, as 240px screenshots are still shown for screens up to 1200px -- if not most monitors these days, then most browsers (assuming they are not maximizing their windows).

To me, the bottom of 20918.after.3.png​ is a better user experience, rather than the top. Sure, the delete link is isolated in both, but the light borders are not enough contrast themselves to differentiate the links -- the full padding seems necessary from a usability standpoint. It feels better to wrap the link than to condense everything.

I have nothing against wrapping in the bottom part of 20918.after.3.png​ :-)

Doesn't the top part of it seem a better UX than 20918.png​ though?

On a second thought, I guess I'm okay with 20918.png​ for 3.4.

"I think the delete link looks fine when wrapped. If it doesn't fit, it doesn't fit, man." — a very tired koopersmith

Let's go with 20918.diff​ for 3.4 then.

There should probably be 10px as well.

In [21067]:

Prevent delete theme link from bumping against theme action links. If it doesn't fit, it doesn't fit, man. props SergeyBiryukov, fixes #20918.

Looks good.