WordPress.org

Make WordPress Core

Opened 7 years ago

Closed 6 years ago

Last modified 5 years ago

#15925 closed enhancement (fixed)

Improving the admin UI for Hierarchical Taxonomies

Reported by: husobj Owned by: nacin
Milestone: 3.5 Priority: normal
Severity: normal Version: 3.0.3
Component: UI Keywords: has-patch ui-feedback
Focuses: Cc:

Description

For hierarchical taxonomies like categories on the edit post in the admin pages, the terms are listed with checkboxes in a scrollable box which has a set height of 200px. If you only have a few terms then the box ends up being much bigger than needed wasting lots of vertical screen real estate. This is particularly frustrating if you create multiple hierarchical taxonomies.

I propose changing the height of the box to use css max-height instead so that the box collapses if you only have a few terms.

See the screengrabs at he post I've written here. http://www.benhuson.co.uk/2010/12/20/improving-the-ui-for-hierarchical-taxonomies-in-wordpress/

I've attached a preliminary patch too.

Obviously IE6 doesn't support css max-height. Do we need to use an IE hack for this or are we OK if the category box height doesn't restrain in IE6?

Attachments (7)

wp-admin.dev.css.patch (572 bytes) - added by husobj 7 years ago.
wp-admin.dev.css patch
15925.patch (759 bytes) - added by SergeyBiryukov 7 years ago.
15925.after.png (7.2 KB) - added by SergeyBiryukov 7 years ago.
15925.2.patch (689 bytes) - added by SergeyBiryukov 6 years ago.
15925.after.2.png (13.6 KB) - added by SergeyBiryukov 6 years ago.
15925.3.patch (392 bytes) - added by SergeyBiryukov 6 years ago.
15925.4.patch (946 bytes) - added by SergeyBiryukov 6 years ago.

Download all attachments as: .zip

Change History (33)

@husobj
7 years ago

wp-admin.dev.css patch

#1 @scribu
7 years ago

  • Keywords has-patch commit added; taxonomy ui admin removed
  • Milestone changed from Awaiting Review to Future Release

Seems like a straightforward enhacement.

#2 @vteixeira
7 years ago

This is one of those small things that makes a difference. +1

#3 @jane
7 years ago

  • Keywords ui added

@scribu: I'm not sure why you removed the ui keyword. Adding back in.

#4 @scribu
7 years ago

Oups... didn't see it.

#5 @ocean90
7 years ago

  • Component changed from Taxonomy to UI
  • Keywords ui-feedback added; ui removed

We have no ui trac keyword.

#6 @husobj
7 years ago

To support IE6 I guess we could add something into the ie admin stylesheet: /wp-admin/css/ie.css

height: expression( this.scrollHeight > 200 ? "200px" : "auto" ); /* sets max-height for IE */

#7 @husobj
7 years ago

...actually scratch that. Not needed as you can just keep the height declaration in the IE stylesheet

#8 @empireoflight
7 years ago

Great idea

#9 follow-up: @JohnONolan
7 years ago

With about 5px of padding-bottom added, I think this is a really great idea.

#10 @SergeyBiryukov
7 years ago

  • Milestone changed from Future Release to 3.3

#11 in reply to: ↑ 9 ; follow-up: @nacin
7 years ago

Replying to JohnONolan:

With about 5px of padding-bottom added, I think this is a really great idea.

Can John or someone verify and patch this?

#12 @husobj
7 years ago

Doh, you just got in there before me with that patch ;)

#13 in reply to: ↑ 11 ; follow-up: @SergeyBiryukov
7 years ago

Replying to nacin:

With about 5px of padding-bottom added, I think this is a really great idea.

Can John or someone verify and patch this?

I've added 0.8em, and now the padding to the left and to the bottom is equal (if that's the desired result). See the screenshot.

The space above the tab is more narrow than in 3.2.1, probably due to other CSS changes elsewhere.

#14 @scribu
7 years ago

  • Keywords commit removed

The space above the tab is more narrow than in 3.2.1, probably due to other CSS changes elsewhere.

Probably from #18314. We should fix that in this patch too.

#15 @jane
7 years ago

@azaozz, would this patch be impacted by any of the CSS changes you've been working on, or any of the responsive admin stuff?

#16 @ryan
7 years ago

  • Milestone changed from 3.3 to Future Release

Punting enhancements from 3.3.

#17 @stephenh1988
6 years ago

  • Cc contact@… added

#18 in reply to: ↑ 13 @SergeyBiryukov
6 years ago

  • Milestone changed from Future Release to 3.5

Replying to SergeyBiryukov:

The space above the tab is more narrow than in 3.2.1, probably due to other CSS changes elsewhere.

Not anymore. Refreshed the patch, also reduced vertical padding. Screenshot: 15925.after.2.png.

We already have flexible height on the Menus screen, 15925.2.patch makes it consistent.

Tested in Firefox 15, Chrome 21, IE 7, IE 8, Opera 12.

#19 @tar.gz
6 years ago

  • Cc code@… added

Great! I'm sure this little improvement is especially useful now that more and more WP users are:

  • accessing the web from mobile devices with limited screen size.
  • using custom taxonomies rather than one gigantic list of categories.

Tested successfully in Firefox 17 (OSX), Safari 5 (OSX), Safari on iOS 5 (iPod).

Note: ocean90 has voiced some concerns regarding a "jump" than can occur when switching from the All Categories to Most Used tab – but I think that's a very minor downside vs the benefit in screen estate.

#20 @nacin
6 years ago

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

In [21971]:

Use max-height rather than height for the hierarchical taxonomy admin metabox. props SergeyBiryukov, husobj. fixes #15925.

#21 @nacin
6 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

This could also use a min-height: http://cl.ly/image/2k3a3M0J2T0J

I also would not like to see a jump for All to Most Used.

#22 @SergeyBiryukov
6 years ago

15925.3.patch adds min-height.

15925.4.patch also makes both tabs have equal height (not sure if that's necessary though).

#23 @lessbloat
6 years ago

I tested both. +1 for 15925.3.patch.

#24 @ryan
6 years ago

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

In [22290]:

Add min-height to hierarchical taxonomy meta box. Props SergeyBiryukov. fixes #15925

#25 follow-up: @ramiy
5 years ago

  • Cc r_a_m_i@… added

Can you do the same on the Quick-Edit?

I have 4 hierarchical taxonomies on Quick-Edit, it would be nice if it will be less longer.

#26 in reply to: ↑ 25 @SergeyBiryukov
5 years ago

Replying to ramiy:

Can you do the same on the Quick-Edit?

Feel free to create a new ticket for that.

Note: See TracTickets for help on using tickets.