sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

List Tables: Arrange action items into a grid with extra space.

Browse Source 
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
This commit is contained in:
Mel Choyce 2018-10-03 18:55:35 +00:00
parent 1f4ed43c65
commit cec0385656
1 changed files with 30 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/wp-admin/css/list-tables.css
View File

@ -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%;