Changeset 43670

Timestamp:

10/03/2018 06:55:35 PM (8 years ago)

Author:

melchoyce

Message:

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.

File:

• trunk/src/wp-admin/css/list-tables.css (modified) (2 diffs)

trunk/src/wp-admin/css/list-tables.css

@@ -1865 +1865 @@
         }
 
+        /* 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,
@@ -2103 +2127 @@
         }
 
+        /* 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;