WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 2 years ago

#29992 closed defect (bug) (fixed)

Cramped tag action links on small screens

Reported by: pento Owned by: MikeNGarrett
Milestone: 4.2 Priority: normal
Severity: minor Version:
Component: Taxonomy Keywords: make-flow good-first-bug has-patch commit
Focuses: ui, administration Cc:

Description

The action links on taxonomy list tables are cramped on small screens.

We could fix this by hiding the Slug column on small screens.

Attachments (7)

IMG_2904.png (68.1 KB) - added by pento 3 years ago.
29992.patch (1.1 KB) - added by shaunmza 3 years ago.
Hide slug column for screen widths smaller than 480px
29992.2.patch (515 bytes) - added by MikeNGarrett 3 years ago.
Modifications to follow WP standards
IMG_3300.PNG (63.3 KB) - added by ryan 3 years ago.
Categories page on iPhone 5 with 29992.2.patch applied
Screen Shot 2015-02-18 at 12.18.30 PM.png (530.6 KB) - added by ryan 3 years ago.
Categories page on Macnchrome with 29992.2.patch applied
IMG_0577.PNG (146.3 KB) - added by ryan 3 years ago.
Categories page on iPhone 6+, portrait with 29992.2.patch applied
IMG_0578.PNG (124.4 KB) - added by ryan 3 years ago.
Categories page on iPhone 6+, landscape with 29992.2.patch applied

Download all attachments as: .zip

Change History (22)

@pento
3 years ago

#1 @soficgr
3 years ago

  • Severity changed from normal to minor

#2 @boonebgorges
3 years ago

  • Keywords good-first-bug added

@shaunmza
3 years ago

Hide slug column for screen widths smaller than 480px

@MikeNGarrett
3 years ago

Modifications to follow WP standards

#3 @MikeNGarrett
3 years ago

  • Keywords has-patch added
  • Version set to trunk

Tested in iOS 8, 6 on iPhone 6, 3GS and Android 4, 4.4 on a Razr, Galaxy s5, all emulated.

29992.2.patch adds the same display rules for the users list page, matches svn paths and follows stylesheet @media rules established in other stylesheets.

#4 @pento
3 years ago

  • Version trunk deleted

Instead of adding a new block, there's a rule dedicated to hiding columns on small screens:

https://core.trac.wordpress.org/browser/trunk/src/wp-admin/css/list-tables.css?rev=29775#L1567

This would be the best place to add the selector.

Also, the user list is a little trickier to deal with, because there are some old rules to consider - see #29995. Let's keep the patch for this ticket to fixing the taxonomy list table. :-)

#5 @MikeNGarrett
3 years ago

That's true, but the breakpoint is <782. Wouldn't it be better to handle this just for smartphones? This would be following the same logic that's in common.css. If not, I won't fight it.

This ticket was mentioned in Slack in #core by pento. View the logs.


3 years ago

#7 @DrewAPicture
3 years ago

  • Owner set to MikeNGarrett
  • Status changed from new to assigned

#8 @DrewAPicture
3 years ago

  • Priority changed from normal to high

#9 @DrewAPicture
3 years ago

  • Milestone changed from Awaiting Review to 4.2

#10 @DrewAPicture
3 years ago

  • Priority changed from high to normal

What's the status here?

#11 @MikeNGarrett
3 years ago

29992.2.patch is the last agreed upon version. It needs to be tested with the latest on trunk. Otherwise, it should be good to go.

@ryan
3 years ago

Categories page on iPhone 5 with 29992.2.patch applied

@ryan
3 years ago

Categories page on Macnchrome with 29992.2.patch applied

@ryan
3 years ago

Categories page on iPhone 6+, portrait with 29992.2.patch applied

@ryan
3 years ago

Categories page on iPhone 6+, landscape with 29992.2.patch applied

#12 @ryan
3 years ago

Slug hides for iPhone 5 in both portrait and landscape. On an iPhone 6+, slug shows in landscape but hides in portrait. Slug shows for Macnchrome. Seems good.

This ticket was mentioned in Slack in #core-flow by boren. View the logs.


3 years ago

#14 @DrewAPicture
3 years ago

  • Keywords commit added

Patch still applies, and my testing corroborates the vizrecs from @ryan. Seems ready to go.

#15 @pento
2 years ago

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

In 31865:

Taxonomy List Tables: On mobile devices, hide the slug column, to avoid cramping the action links into two rows.

Props MikeNGarrett.

Fixes #29992.

Note: See TracTickets for help on using tickets.