mirror_php/wordpress
1
0
Fork 0
mirror of git://develop.git.wordpress.org/ synced 2025-04-27 15:42:39 +02:00
Code Issues Actions11 Packages Projects Releases Wiki Activity

List Tables: Update spacing in action items on small screens.

Browse Source 
Switch the display to flex. The action items use their intrinsic space, rather than a fixed grid, which prevents too much space between items on larger mobile screens.

Props arunsathiya, sabernhardt, danfarrow, notlaura, aliveic, y_kolev
Fixes , .



git-svn-id: https://develop.svn.wordpress.org/trunk@51073 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Kelly Choyce-Dwan 2021-06-04 18:13:52 +00:00
parent a08bbbadd8
commit 8aecdaaec9
1 changed files with 16 additions and 13 deletions

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

@ -1871,21 +1871,24 @@ div.action-links,
padding-top: 10px;
}
/* Make row actions more easy to select on mobile */
body:not(.plugins-php) .row-actions {
display: grid;
grid-template-columns: auto auto auto;
color: transparent;
.row-actions {
margin-left: -8px;
margin-right: -8px;
padding-top: 4px;
}
.row-actions span {
padding: 4px 0;
/* Make row actions more easy to select on mobile */
body:not(.plugins-php) .row-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
color: transparent;
}
.row-actions span a,
.row-actions span .button-link {
display: inline-block;
padding: 4px 0;
padding: 4px 8px;
line-height: 1.5;
}
@ -2135,6 +2138,11 @@ div.action-links,
margin-right: 0;
width: 100%;
}
table.media .column-title .has-media-icon ~ .row-actions {
margin-left: 0;
clear: both;
}
}
@media screen and (max-width: 480px) {
@ -2142,11 +2150,6 @@ div.action-links,
margin: 0;
}
/* Drop row actions to two columns on a small screen */
.row-actions:not(.plugins-php) {
grid-template-columns: auto auto;
}
.tablenav.bottom .displaying-num {
position: relative;
top: 0;