Make WordPress Core

Changeset 43670


Ignore:
Timestamp:
10/03/2018 06:55:35 PM (7 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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/list-tables.css

    r43669 r43670  
    18651865    }
    18661866
     1867    /* Make row actions more easy to select on mobile */
     1868    body:not(.plugins-php) .row-actions {
     1869        display: -ms-grid;
     1870        display: grid;
     1871        -ms-grid-columns: auto auto auto;
     1872        grid-template-columns: auto auto auto;
     1873        color: transparent;
     1874    }
     1875
     1876    .row-actions span {
     1877        padding: 4px 0;
     1878    }
     1879
     1880    .row-actions span a,
     1881    .row-actions span .button-link {
     1882        display: inline-block;
     1883        padding: 4px 0;
     1884    }
     1885
     1886    .row-actions span.approve:before,
     1887    .row-actions span.unapprove:before {
     1888        content: "| ";
     1889    }
     1890
    18671891    /* Quick Edit and Bulk Edit */
    18681892    #wpbody-content .quick-edit-row-post .inline-edit-col-left,
     
    21032127    }
    21042128
     2129    /* Drop row actions to two columns on a small screen */
     2130    .row-actions:not(.plugins-php) {
     2131        -ms-grid-columns: auto auto;
     2132        grid-template-columns: auto auto;
     2133    }
     2134
    21052135    .tablenav-pages .tablenav-paging-text {
    21062136        float: left;
Note: See TracChangeset for help on using the changeset viewer.