Changeset 43670

Timestamp:

10/03/2018 06:55:35 PM (5 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;