Sort arrows improperly wrap on narrow columns

[nacin]

Specifically, I noticed the 'Posts' column on a taxonomy screen (or 'Links' for link categories, etc).

[ocean90]

Screenshot: ​http://grab.by/85ei

[nacin]

Doesn't work on narrow screens.

Might need some sort of nowrap.

[SergeyBiryukov]

nowrap doesn't work if a parent th element has fixed width (10% in this case).

So far the only solutions I can think of are:

1. Display sorting indicator as a background for the link itself, without additional <span>. This actually works and keeps the same appearance, but requires two separate sprites instead of one.
2. Use only min-width for those columns or don't specify the width at all. This makes the header noticeably wider, and the whole column looks odd because it's not left aligned like others.

[ocean90]

Replying to SergeyBiryukov:

1. Display sorting indicator as a background for the link itself, without additional <span>. This actually works and keeps the same appearance, but requires two separate sprites instead of one.

That would be the same as for the admin bar. But we don't need two separate sprites, only a new one where the arrows are vertical.

[nacin]

Adjustments need to keep #16008 in mind.

[markjaquith]

Patch isn't satisfactory, per nacin. Not a big issue.

[nacin]

Punt is fine by me, but this looks bad in the blue theme. Going to commit a quick fix to ensure the blue expands to the bottom.

[nacin]

(In [17190]) Use the blue background color around the blue gradient. see #15993.

[ocean90]

Closed as a dup: #17627

[SergeyBiryukov]

Related: #17209

[azaozz]

The sorting indicators should be always visible (like in many similar designs) and be set as background on the actual link as @SergeyBiryukov suggested.

Also we have several sprites with arrows now, time to combine them all IMHO.

[SergeyBiryukov]

Was experimenting with position: absolute and almost got it working.

Removing padding: 0 from sortable table headers allows them to inherit the default padding of .widefat th with the same values of 7px 7px 8px and to keep the same appearance.

However this only works in Firefox (see 15993.after.png​). In Chrome, Opera and IE, padding is not applied and the arrows can go outside of the table (see 15993.after-chrome.png​)

[SergeyBiryukov]

The more I look into this, the more it seems there's no solution for adding proper paddings to table headers, as long as there's table-layout: fixed.

My initial idea of using background for the links also has this problem.

15993.3.table-layout-auto.patch​ allows to see what it would look like without table-layout: fixed. We don't really want to remove it, so the patch is for reference only.

15993.4.patch​ prevents table rows from jumping around by using visibility: hidden on indicators. Doesn't touch wrapping.

[azaozz]

Replying to SergeyBiryukov:

15993.3.table-layout-auto.patch​ allows to see what it would look like without table-layout: fixed. We don't really want to remove it, so the patch is for reference only.

Unfortunately as you say using non-fixed table is no good. Would rather hide the arrows completely when the columns are too narrow to display them. Clicking on the headers would still sort the content.

[SergeyBiryukov]

Replying to azaozz:

Would rather hide the arrows completely when the columns are too narrow to display them.

Done in 15993.5.patch​.

[azaozz]

In [18875].

[nacin]

This had zero ux-feedback and changed during the testing window.

[SergeyBiryukov]

Noticed an issue with left-aligned headers: arrow moves too far to the right (see the screenshot). 15993.6.patch​ fixes that.

[chexee]

Looking at other apps that use sorting (iTunes, Postbox), Most give the arrow priority over the label, truncating the label when resizing the column.

Postbox: ​http://chx.mx//et/f1dlv59uogs8w.png

iTunes: ​http://chx.mx//24/4mrcodsry88c0.png

Since we only show the arrow on hover, can we try truncating the label with an ellipses when the column gets narrow on hover and click to make room for the arrow?

Quick sketch: ​http://chx.mx//ca/f8m903hjc4goc.png

Would rather hide the arrows completely when the columns are too narrow to display them.

The arrows shouldn't be hidden, as the switch from an up arrow to a down arrow (and vice versa) is the only thing providing feedback (besides trying to analyze the content) as to how things are sorted.

[chexee]

Discussed this in the UI group today. We all agreed on the above approach: truncate the label to give room for the arrow on very narrow columns.

[jane]

Replying to nacin:

This had zero ux-feedback and changed during the testing window.

Removing the arrow creates an inconsistency and makes it look like that column is not sortable, as that is how spreadsheets and other similar web apps use that convention. No go, please.

[duck_]

In [19400]:

Revert r18875. Sorting arrows should be displayed when the screen is too narrow. See #15993.

[duck_]

Final fix will have to come another time.