Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2025-03-12 22:59:24 +01:00
Code Issues 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 #48546, #47895.


Built from https://develop.svn.wordpress.org/trunk@51073


git-svn-id: http://core.svn.wordpress.org/trunk@50682 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
ryelle 2021-06-04 18:14:56 +00:00
parent eaea2f3b45
commit 13d9212bf4
5 changed files with 35 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
wp-admin/css/list-tables-rtl.css
View File

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

2
wp-admin/css/list-tables-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

29
wp-admin/css/list-tables.css
View File

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

2
wp-admin/css/list-tables.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
wp-includes/version.php
View File

@ -13,7 +13,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '5.8-alpha-51072'; $wp_version = '5.8-alpha-51073';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.