WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 3 months ago

#15993 reopened defect (bug)

Sort arrows improperly wrap on narrow columns

Reported by: nacin Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 3.1
Component: Administration Keywords: needs-patch
Focuses: ui Cc:

Description

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

Attachments (11)

15993.patch (516 bytes) - added by SergeyBiryukov 3 years ago.
15993.2.patch (956 bytes) - added by SergeyBiryukov 3 years ago.
15993.before.png (47.0 KB) - added by SergeyBiryukov 3 years ago.
15993.after.png (47.1 KB) - added by SergeyBiryukov 3 years ago.
15993.after-chrome.png (47.5 KB) - added by SergeyBiryukov 3 years ago.
15993.3.table-layout-auto.patch (1.1 KB) - added by SergeyBiryukov 3 years ago.
15993.4.patch (674 bytes) - added by SergeyBiryukov 3 years ago.
15993.5.patch (835 bytes) - added by SergeyBiryukov 3 years ago.
15993.left-aligned-before.png (2.0 KB) - added by SergeyBiryukov 3 years ago.
15993.6.patch (788 bytes) - added by SergeyBiryukov 3 years ago.
15993.left-aligned-after.png (2.0 KB) - added by SergeyBiryukov 3 years ago.

Download all attachments as: .zip

Change History (40)

comment:1 ocean903 years ago

  • Keywords needs-patch added

SergeyBiryukov3 years ago

comment:2 SergeyBiryukov3 years ago

  • Keywords has-patch added; needs-patch removed

comment:3 nacin3 years ago

Doesn't work on narrow screens.

Might need some sort of nowrap.

comment:4 nacin3 years ago

  • Keywords needs-patch added; has-patch removed

comment:5 follow-up: SergeyBiryukov3 years ago

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.

comment:6 in reply to: ↑ 5 ocean903 years ago

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.

comment:7 nacin3 years ago

Adjustments need to keep #16008 in mind.

comment:8 markjaquith3 years ago

  • Milestone changed from 3.1 to Future Release

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

comment:9 nacin3 years ago

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.

comment:10 nacin3 years ago

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

comment:11 ocean903 years ago

Closed as a dup: #17627

comment:13 azaozz3 years ago

  • Keywords needs-ui added

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.

SergeyBiryukov3 years ago

SergeyBiryukov3 years ago

SergeyBiryukov3 years ago

comment:14 SergeyBiryukov3 years ago

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)

SergeyBiryukov3 years ago

comment:15 follow-up: SergeyBiryukov3 years ago

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.

comment:16 in reply to: ↑ 15 ; follow-up: azaozz3 years ago

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.

SergeyBiryukov3 years ago

comment:17 in reply to: ↑ 16 SergeyBiryukov3 years ago

Replying to azaozz:

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

Done in 15993.5.patch.

comment:18 azaozz3 years ago

  • Milestone changed from Future Release to 3.3

comment:19 azaozz3 years ago

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

In [18875].

comment:20 follow-up: nacin3 years ago

  • Keywords ux-feedback added; needs-ui needs-patch removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

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

SergeyBiryukov3 years ago

comment:21 SergeyBiryukov3 years ago

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

Last edited 3 years ago by SergeyBiryukov (previous) (diff)

comment:22 chexee2 years ago

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.

Last edited 2 years ago by chexee (previous) (diff)

comment:23 chexee2 years ago

  • Keywords needs-patch added

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.

comment:24 nacin2 years ago

  • Component changed from Administration to UI

comment:25 in reply to: ↑ 20 jane2 years ago

  • Keywords ux-feedback removed

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.

comment:26 duck_2 years ago

In [19400]:

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

comment:27 duck_2 years ago

  • Milestone changed from 3.3 to Future Release

Final fix will have to come another time.

comment:28 helenyhou18 months ago

  • Component changed from UI to Administration

comment:29 ocean903 months ago

  • Focuses ui added
Note: See TracTickets for help on using tickets.