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

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