Skip to content

Commit 084583d

Browse files
joedolsonjoedolson
committed
Administration: Fix list table mobile viewports.
Follow up to [62838]. The changes to move column headers to the post title column did not account for the responsive tables in mobile viewports. Modernizes layout of responsive tables to use `flex` layout. Visual change expected, aligning the toggled hidden cells under the full row, including the checkbox, rather than only under the title column. Update several other styles to fix alignment changes caused by the `th` adjustment. Developed in WordPress#12737 Props afragen, khokansardar, mirmpro, habiburdev, sabernhardt, afercia, shailu25, joedolson. Fixes #65743. git-svn-id: https://develop.svn.wordpress.org/trunk@62958 602fd350-edb4-49c9-b593-d223f7449a82
1 parent d98ad95 commit 084583d

2 files changed

Lines changed: 71 additions & 13 deletions

File tree

‎src/wp-admin/css/common.css‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -501,7 +501,7 @@ code {
501501
border-bottom-width: 0;
502502
}
503503

504-
.widefat th,
504+
.widefat tbody th,
505505
.widefat td {
506506
vertical-align: top;
507507
}
@@ -520,6 +520,12 @@ code {
520520
.widefat tfoot td {
521521
text-align: left;
522522
line-height: 1.3em;
523+
}
524+
525+
.widefat th:not(tbody th),
526+
.widefat tbody td.check-column,
527+
.widefat thead td,
528+
.widefat tfoot td {
523529
font-size: 14px;
524530
}
525531

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

Lines changed: 64 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -353,13 +353,17 @@ table.fixed {
353353
padding-left: 3px;
354354
}
355355

356+
th.column-title strong,
357+
th.plugin-title strong,
356358
td.column-title strong,
357359
td.plugin-title strong {
358360
display: block;
359361
margin-bottom: .2em;
360362
font-size: 14px;
361363
}
362364

365+
th.column-title p,
366+
th.plugin-title p,
363367
td.column-title p,
364368
td.plugin-title p {
365369
margin: 6px 0;
@@ -1928,32 +1932,79 @@ div.action-links,
19281932
display: none;
19291933
}
19301934

1931-
.wp-list-table thead th.column-primary {
1932-
width: 100%;
1935+
.wp-list-table tr {
1936+
display: flex;
1937+
flex-wrap: wrap;
19331938
}
19341939

1935-
/* Checkboxes need to show */
1936-
.wp-list-table tr th.check-column,
1937-
.wp-list-table tr td.check-column {
1938-
display: table-cell;
1940+
.wp-list-table thead th {
1941+
align-content: center;
19391942
}
19401943

1941-
.wp-list-table .check-column {
1944+
.wp-list-table td.check-column,
1945+
.wp-list-table th.check-column {
1946+
flex: 0 0 2.5em;
19421947
width: 2.5em;
19431948
}
19441949

1950+
.wp-list-table .column-primary a {
1951+
text-wrap: wrap;
1952+
}
1953+
1954+
.wp-list-table td.column-primary,
1955+
.wp-list-table th.column-primary {
1956+
flex: 1 1 0;
1957+
}
1958+
1959+
.wp-list-table tr td:nth-child(n+3) {
1960+
flex: 0 1 100%;
1961+
}
1962+
1963+
.plugins tr.active.plugin-update-tr + tr.inactive th,
1964+
.plugins tr.active.plugin-update-tr + tr.inactive td,
1965+
.plugins tr.active + tr.inactive th,
1966+
.plugins tr.active + tr.inactive td,
1967+
.plugins .inactive td,
1968+
.plugins .inactive th,
1969+
.plugins .active td,
1970+
.plugins .active th,
1971+
.plugin-install #the-list td,
1972+
.upgrade .plugins td,
1973+
.upgrade .plugins th {
1974+
box-shadow: none;
1975+
}
1976+
1977+
.plugins tr {
1978+
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
1979+
}
1980+
1981+
.plugins .active th.check-column,
1982+
.plugins .active td.check-column,
1983+
.plugin-update-tr.active td {
1984+
border-left: 4px solid transparent;
1985+
}
1986+
1987+
.plugins .active th.check-column input,
1988+
.plugins .active td.check-column input {
1989+
margin-left: 0px;
1990+
}
1991+
1992+
.plugins tr.active,
1993+
.plugin-update-tr.active {
1994+
border-left: 4px solid var(--wp-admin-theme-color);
1995+
}
1996+
19451997
.wp-list-table .column-primary .toggle-row {
19461998
display: block;
19471999
}
19482000

2001+
.wp-list-table tbody th,
19492002
.wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.check-column) {
19502003
position: relative;
1951-
clear: both;
1952-
width: auto !important; /* needs to override some columns that are more specifically targeted */
19532004
}
19542005

19552006
.wp-list-table td.column-primary,
1956-
.wp-list-table th.column-primary {
2007+
.wp-list-table tbody th.column-primary {
19572008
padding-right: 50px; /* space for toggle button */
19582009
}
19592010

@@ -1962,7 +2013,7 @@ div.action-links,
19622013
padding: 3px 8px 3px 35%;
19632014
}
19642015

1965-
.wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.column-primary)::before {
2016+
.wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.check-column)::before {
19662017
position: absolute;
19672018
left: 10px; /* match padding of regular table cell */
19682019
display: block;
@@ -1973,6 +2024,7 @@ div.action-links,
19732024
text-overflow: ellipsis;
19742025
}
19752026

2027+
.wp-list-table .is-expanded th:not(.hidden),
19762028
.wp-list-table .is-expanded td:not(.hidden) {
19772029
display: block !important;
19782030
overflow: hidden; /* clearfix */
@@ -2238,7 +2290,7 @@ div.action-links,
22382290
}
22392291

22402292
/* Plugin/Theme Management */
2241-
#wpbody-content .wp-list-table.plugins td {
2293+
#wpbody-content .wp-list-table.plugins tbody td {
22422294
display: block;
22432295
width: auto;
22442296
padding: 10px 9px; /* reset from other list tables that have a label at this width */

0 commit comments

Comments
 (0)