Make WordPress Core

Opened 13 years ago

Closed 11 years ago

Last modified 11 years ago

#15925 closed enhancement (fixed)

Improving the admin UI for Hierarchical Taxonomies

Reported by: husobj's profile husobj Owned by: nacin's profile 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 13 years ago.
wp-admin.dev.css patch
15925.patch (759 bytes) - added by SergeyBiryukov 13 years ago.
15925.after.png (7.2 KB) - added by SergeyBiryukov 13 years ago.
15925.2.patch (689 bytes) - added by SergeyBiryukov 11 years ago.
15925.after.2.png (13.6 KB) - added by SergeyBiryukov 11 years ago.
15925.3.patch (392 bytes) - added by SergeyBiryukov 11 years ago.
15925.4.patch (946 bytes) - added by SergeyBiryukov 11 years ago.

Download all attachments as: .zip

Change History (33)

@husobj
13 years ago

wp-admin.dev.css patch

#1 @scribu
13 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
13 years ago

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

#3 @jane
13 years ago

  • Keywords ui added

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

#4 @scribu
13 years ago

Oups... didn't see it.

#5 @ocean90
13 years ago

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

We have no ui trac keyword.

#6 @husobj
13 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
13 years ago

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

#8 @empireoflight
13 years ago

Great idea

#9 follow-up: @JohnONolan
13 years ago

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

#10 @SergeyBiryukov
13 years ago

  • Milestone changed from Future Release to 3.3

#11 in reply to: ↑ 9 ; follow-up: @nacin
13 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
13 years ago

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

#13 in reply to: ↑ 11 ; follow-up: @SergeyBiryukov
13 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
13 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
12 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
12 years ago

  • Milestone changed from 3.3 to Future Release

Punting enhancements from 3.3.

#17 @stephenh1988
12 years ago

  • Cc contact@… added

#18 in reply to: ↑ 13 @SergeyBiryukov
11 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
11 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
11 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
11 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
11 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
11 years ago

I tested both. +1 for 15925.3.patch.

#24 @ryan
11 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
11 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
11 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.