From cec0385656ee2781d4c6a55a7c65d3ded3cbb1d5 Mon Sep 17 00:00:00 2001 From: Mel Choyce Date: Wed, 3 Oct 2018 18:55:35 +0000 Subject: [PATCH] List Tables: Arrange action items into a grid with extra space. On small screens, list table actions were cramped. This makes it easy to press the wrong action by mistake. The items are now arranged into a grid and given extra room to create a larger tap-target. The plugins list table was excluded because it's current layout doesn't match the others, and we should add more space to this in a future commit. Props jobthomas, ryelle. Fixes #45024. git-svn-id: https://develop.svn.wordpress.org/trunk@43670 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/list-tables.css | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css index 241f490572..c6a0c30348 100644 --- a/src/wp-admin/css/list-tables.css +++ b/src/wp-admin/css/list-tables.css @@ -1864,6 +1864,30 @@ div.action-links, word-wrap: normal; } + /* Make row actions more easy to select on mobile */ + body:not(.plugins-php) .row-actions { + display: -ms-grid; + display: grid; + -ms-grid-columns: auto auto auto; + grid-template-columns: auto auto auto; + color: transparent; + } + + .row-actions span { + padding: 4px 0; + } + + .row-actions span a, + .row-actions span .button-link { + display: inline-block; + padding: 4px 0; + } + + .row-actions span.approve:before, + .row-actions span.unapprove:before { + content: "| "; + } + /* Quick Edit and Bulk Edit */ #wpbody-content .quick-edit-row-post .inline-edit-col-left, #wpbody-content .quick-edit-row-post .inline-edit-col-right, @@ -2102,6 +2126,12 @@ div.action-links, margin: 0; } + /* Drop row actions to two columns on a small screen */ + .row-actions:not(.plugins-php) { + -ms-grid-columns: auto auto; + grid-template-columns: auto auto; + } + .tablenav-pages .tablenav-paging-text { float: left; width: 100%;