[wp-trac] [WordPress Trac] #17209: Category list table breaks when custom post type label is too long

[WordPress Trac]

#17209: Category list table breaks when custom post type label is too long
-------------------------------------------------+-------------------------
 Reporter:  andrewryno                           |       Owner:
     Type:  defect (bug)                         |      Status:  new
 Priority:  normal                               |   Milestone:  4.0
Component:  Taxonomy                             |     Version:  3.1
 Severity:  normal                               |  Resolution:
 Keywords:  good-first-bug has-patch needs-      |     Focuses:
  testing                                        |  administration
-------------------------------------------------+-------------------------
Changes (by GaVrA):

 * keywords:  good-first-bug has-patch => good-first-bug has-patch needs-
     testing


Comment:

 First patch while working on it at WordCamp Switzerland during
 contributors day... :)

 I attached [attachment:17209.2.diff] which does the following:

 1. changes the label to {{{#}}} and makes it centered because it makes it
 consistent with other list table views, like {{{Posts}}} column on the
 {{{wp-admin/users.php}}}
 2. replaces generated html so there is only one {{{span}}} element inside
 the anchor and places triangle icon via {{{:after}}} pseudo-element to
 that {{{span}}} element
 3. applies some {{{css}}} changes so that the labels can be centered and
 the triangle icon is positioned absolutely next to the label.
 4. applies same {{{css}}} changes for {{{RTL}}} except different
 positioning, i.e. on the left side of the string
 5. it does not address accessibility concerns, so we might put {{{title}}}
 attribute with real post name, like {{{Number of Posts}}}
 6. removes some old {{{css}}}, I guess, for {{{.sortable-indicator}}},
 both for {{{LTR}}} and {{{RTL}}}:

 {{{
 #!css
 th.sorted.asc .sorting-indicator,
 th.desc:hover span.sorting-indicator {
         display: block;
         background-position: 0 0;
 }

 th.sorted.desc .sorting-indicator,
 th.asc:hover span.sorting-indicator {
         display: block;
         background-position: -7px 0;
 }
 }}}

 From my testing this works both on hovering over {{{th.sortable}}} and
 when {{{orderby}}} is applied via {{{GET}}}, i.e. when you click some
 {{{th.sortable}}} anchor. Also, I have tested {{{RTL}}} with plugin
 {{{rtl-tester}}} and everything is working.

 Here are some screenshots using {{{#}}} before applying {{{css}}} changes:

 small number
 [[Image(http://i.imgur.com/Uh8jq7G.png)]]

 large number
 [[Image(http://i.imgur.com/5bY8ifW.png)]]

 Some screenshots after applying {{{css}}} changes:

 small number
 [[Image(http://i.imgur.com/QWc69zA.png)]]

 large number
 [[Image(http://i.imgur.com/KkM3U7f.png)]]

 when sorted
 [[Image(http://i.imgur.com/UxI7clf.png)]]

 RTL when sorted
 [[Image(http://i.imgur.com/8i7IFoS.png)]]

--
Ticket URL: <https://core.trac.wordpress.org/ticket/17209#comment:13>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform