List tables: A better responsive view.
Instead of truncating columns, the data that's already in the markup can now be toggled into view. Only seems appropriate to celebrate four years of contributing by finally doing the first thing I ever mocked up. Known issues / concerns: * Custom list tables that don't define a primary column will show nothing at all. These are not extremely common, as `WP_List_Table` isn't really recommended for plugin consumption, but it happens. We need to come up with some kind of fallback. * Some visual elements, particularly whitespace, could use refining. * Needs a11y review. * Touch performance on iOS feels sluggish - is there anything we can do about that? * Would this be better accordion-style (only one expanded at a time)? * Is `wp_strip_all_tags()` good enough for column titles that have HTML in them? It's essentially a workaround for the fact that core's comments column does that for the icon, which maybe it shouldn't. Perhaps worth another ticket, as a markup change would be fairly independent. * Visual hierarchy is not great when expanded (also worthy of another ticket). * Quick edit now becomes noticeably more annoying to cancel out of, as you have to scroll all the way down and you lose your position from before it was opened. Again, worthy of another ticket. props Michael Arestad, helen. see #32395. Built from https://develop.svn.wordpress.org/trunk@33016 git-svn-id: http://core.svn.wordpress.org/trunk@32987 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Helen Hou-Sandí
parent
8f85bb1ac5
commit
8eb7f71e6b
|
|
@ -428,6 +428,60 @@ th.asc a:focus span.sorting-indicator:before {
|
|||
content: '\f140';
|
||||
}
|
||||
|
||||
.wp-list-table .toggle-row {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 10px;
|
||||
display: none;
|
||||
padding: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.wp-list-table .toggle-row:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wp-list-table .toggle-row:focus {
|
||||
-webkit-box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
}
|
||||
|
||||
.ie8 .wp-list-table .toggle-row:focus {
|
||||
outline: #5b9dd9 solid 1px;
|
||||
}
|
||||
|
||||
.wp-list-table .toggle-row:active {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wp-list-table .toggle-row:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
display: block;
|
||||
padding: 0;
|
||||
color: #666;
|
||||
content: '\f140';
|
||||
font: normal 20px/1 'dashicons';
|
||||
line-height: 10px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
speak: none;
|
||||
}
|
||||
|
||||
.wp-list-table .is-expanded .toggle-row:before {
|
||||
content: '\f142';
|
||||
}
|
||||
|
||||
tr.wp-locked .locked-indicator {
|
||||
margin-right: 6px;
|
||||
height: 20px;
|
||||
|
|
@ -1303,7 +1357,8 @@ tr.active.update + tr.plugin-update-tr .plugin-update {
|
|||
content: '\f147';
|
||||
}
|
||||
|
||||
.plugins .plugin-update-tr .plugin-update {
|
||||
.wp-list-table.plugins tbody tr.plugin-update-tr td.plugin-update {
|
||||
overflow: hidden; /* clearfix */
|
||||
padding: 0;
|
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
|
||||
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
|
||||
|
|
@ -1676,32 +1731,75 @@ div.action-links,
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Columns to hide */
|
||||
.fixed .column-date,
|
||||
.fixed .column-author,
|
||||
.column-categories,
|
||||
.column-tags,
|
||||
.tags .column-description,
|
||||
.media .column-parent,
|
||||
.media .column-comments,
|
||||
.users .column-email,
|
||||
.users .column-name,
|
||||
.sites .column-registered,
|
||||
.sites .column-users {
|
||||
.wp-list-table th:not(.column-primary),
|
||||
.wp-list-table th:not(.column-primary),
|
||||
.wp-list-table tr:not(.inline-edit-row) td:not(.column-primary):not(.check-column) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Checkboxes need to show */
|
||||
.wp-list-table tr th.check-column {
|
||||
display: table-cell;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
.wp-list-table .toggle-row {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wp-list-table tr:not(.inline-edit-row) td:not(.check-column) {
|
||||
position: relative;
|
||||
clear: both;
|
||||
display: block;
|
||||
width: auto !important; /* needs to override some columns that are more specifically targeted */
|
||||
}
|
||||
|
||||
.wp-list-table td.column-primary {
|
||||
padding-left: 50px; /* space for toggle button */
|
||||
}
|
||||
|
||||
.wp-list-table tr:not(.inline-edit-row) td:not(.column-primary):not(.check-column) {
|
||||
padding: 3px 35% 3px 8px;
|
||||
}
|
||||
|
||||
.wp-list-table tr:not(.inline-edit-row) td:not(.column-primary)::before {
|
||||
position: absolute;
|
||||
right: 10px; /* match padding of regular table cell */
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 32%; /* leave a little space for a gutter */
|
||||
content: attr(data-colname);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.wp-list-table .is-expanded td:not(.hidden) {
|
||||
display: block !important;
|
||||
overflow: hidden; /* clearfix */
|
||||
}
|
||||
|
||||
/* Special cases */
|
||||
.widefat .num,
|
||||
.column-posts {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#comments-form .fixed .column-author {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.fixed .column-comment .comment-author {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Posts */
|
||||
.column-title {
|
||||
width: 85%;
|
||||
#the-comment-list .is-expanded td {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.fixed .column-comments, .widefat .check-column {
|
||||
width: 35px
|
||||
#the-comment-list .is-expanded td:last-child {
|
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.widefat thead .check-column, .widefat tfoot .check-column {
|
||||
|
|
@ -1712,11 +1810,6 @@ div.action-links,
|
|||
word-wrap: normal;
|
||||
}
|
||||
|
||||
/* Media */
|
||||
.media .column-title {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Quick Edit and Bulk Edit */
|
||||
#wpbody-content .quick-edit-row-post .inline-edit-col-left,
|
||||
#wpbody-content .quick-edit-row-post .inline-edit-col-right,
|
||||
|
|
@ -1792,30 +1885,6 @@ div.action-links,
|
|||
height: 22px;
|
||||
}
|
||||
|
||||
/* Taxonomies */
|
||||
.tags .column-posts {
|
||||
width: 74px;
|
||||
}
|
||||
|
||||
.tags .column-slug {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
/* Comments */
|
||||
.comments .column-response {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
/* Users */
|
||||
.users .column-role {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
/* Network admin sites */
|
||||
.sites .column-blogname {
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
/* Updates */
|
||||
#wpbody-content #update-themes-table .plugin-title {
|
||||
width: auto;
|
||||
|
|
@ -1831,32 +1900,18 @@ div.action-links,
|
|||
}
|
||||
|
||||
/* Plugin/Theme Management Page */
|
||||
.wp-list-table.plugins {
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#wpbody-content .wp-list-table.plugins thead .column-description,
|
||||
#wpbody-content .wp-list-table.plugins tfoot .column-description,
|
||||
.wp-list-table.plugins th#description {
|
||||
.wp-list-table.plugins .toggle-row {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#wpbody-content .wp-list-table.plugins,
|
||||
#wpbody-content .wp-list-table.plugins thead,
|
||||
#wpbody-content .wp-list-table.plugins tbody,
|
||||
#wpbody-content .wp-list-table.plugins tr,
|
||||
#wpbody-content .wp-list-table.plugins .column-description,
|
||||
#wpbody-content .wp-list-table.plugins .plugin-title,
|
||||
#wpbody-content .wp-list-table.plugins .theme-title,
|
||||
#wpbody-content .wp-list-table.plugins .plugin-update,
|
||||
#wpbody-content .wp-list-table.plugins .manage-column.column-name {
|
||||
#wpbody-content .wp-list-table.plugins td {
|
||||
display: block;
|
||||
width: auto;
|
||||
padding: 10px 9px; /* reset from other list tables that have a label at this width */
|
||||
}
|
||||
|
||||
.active, .inactive {
|
||||
padding-top: 0;
|
||||
#wpbody-content .wp-list-table.plugins .column-description {
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.wp-list-table.plugins .plugin-title,
|
||||
|
|
@ -1865,11 +1920,9 @@ div.action-links,
|
|||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.plugins tr.active + tr.inactive th.check-column,
|
||||
.plugins tr.active + tr.inactive td,
|
||||
.wp-list-table.plugins .plugin-title,
|
||||
.wp-list-table.plugins .theme-title,
|
||||
.wp-list-table.plugins tbody th {
|
||||
.wp-list-table.plugins .theme-title {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -1878,7 +1931,9 @@ div.action-links,
|
|||
padding: 1px 0 0;
|
||||
}
|
||||
|
||||
.plugins tr.active + tr.inactive td.column-description {
|
||||
.plugins tr.active + tr.inactive th.check-column,
|
||||
.plugins tr.active + tr.inactive td.column-description,
|
||||
.plugins .plugin-update-tr:before {
|
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
|
@ -1888,69 +1943,23 @@ div.action-links,
|
|||
border-top: none;
|
||||
}
|
||||
|
||||
.wp-list-table.plugins .column-description {
|
||||
padding-top: 0;
|
||||
/* mimic the checkbox th */
|
||||
.plugins .plugin-update-tr:before {
|
||||
content: '';
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.wp-list-table.plugins .manage-column.column-name,
|
||||
.wp-list-table.plugins .column-description,
|
||||
.wp-list-table.plugins .plugin-title,
|
||||
.wp-list-table.plugins .theme-title {
|
||||
padding-left: 12px;
|
||||
padding-right: 46px;
|
||||
.plugins .active.update + .plugin-update-tr:before {
|
||||
border-right: 4px solid #d54e21;
|
||||
background-color: #fef7f1;
|
||||
}
|
||||
|
||||
.wp-list-table.plugins .manage-column.column-name {
|
||||
padding-top: 11px;
|
||||
padding-bottom: 12px;
|
||||
.plugins .plugin-update-tr .plugin-update {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.wp-list-table.plugins .manage-column.column-name.sortable {
|
||||
padding: 4px 36px 4px 12px;
|
||||
}
|
||||
|
||||
.wp-list-table.plugins tr {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wp-list-table.plugins th.check-column,
|
||||
.wp-list-table.plugins thead td.check-column,
|
||||
.wp-list-table.plugins tfoot td.check-column,
|
||||
.wp-list-table.plugins tr.update th.check-column {
|
||||
position: absolute;
|
||||
height: auto;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding-right: 2px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.wp-list-table.plugins thead td.check-column,
|
||||
.wp-list-table.plugins tfoot td.check-column {
|
||||
padding-right: 3px;
|
||||
padding-top: 11px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.plugins tbody th.check-column input[type="checkbox"] {
|
||||
margin-top: -3px;
|
||||
margin-right: 9px;
|
||||
}
|
||||
|
||||
.plugins tbody .active th.check-column input[type="checkbox"],
|
||||
.plugins tbody .active.update th.check-column input[type="checkbox"] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.wp-list-table.plugins thead .check-column input,
|
||||
.wp-list-table.plugins tfoot .check-column input {
|
||||
margin-top: -2px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.wp-list-table.plugins .active th.check-column {
|
||||
background: none;
|
||||
.plugin-update-tr .update-message {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.wp-list-table.plugins .plugin-title strong,
|
||||
|
|
@ -1991,13 +2000,3 @@ div.action-links,
|
|||
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Smartphone */
|
||||
@media screen and (max-width: 600px) {
|
||||
/* Remove slug column from taxonomy list page
|
||||
and role column from users list page */
|
||||
.tags .column-slug,
|
||||
.users .column-role {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -428,6 +428,60 @@ th.asc a:focus span.sorting-indicator:before {
|
|||
content: '\f140';
|
||||
}
|
||||
|
||||
.wp-list-table .toggle-row {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 10px;
|
||||
display: none;
|
||||
padding: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.wp-list-table .toggle-row:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wp-list-table .toggle-row:focus {
|
||||
-webkit-box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
}
|
||||
|
||||
.ie8 .wp-list-table .toggle-row:focus {
|
||||
outline: #5b9dd9 solid 1px;
|
||||
}
|
||||
|
||||
.wp-list-table .toggle-row:active {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wp-list-table .toggle-row:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 10px;
|
||||
display: block;
|
||||
padding: 0;
|
||||
color: #666;
|
||||
content: '\f140';
|
||||
font: normal 20px/1 'dashicons';
|
||||
line-height: 10px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
speak: none;
|
||||
}
|
||||
|
||||
.wp-list-table .is-expanded .toggle-row:before {
|
||||
content: '\f142';
|
||||
}
|
||||
|
||||
tr.wp-locked .locked-indicator {
|
||||
margin-left: 6px;
|
||||
height: 20px;
|
||||
|
|
@ -1303,7 +1357,8 @@ tr.active.update + tr.plugin-update-tr .plugin-update {
|
|||
content: '\f147';
|
||||
}
|
||||
|
||||
.plugins .plugin-update-tr .plugin-update {
|
||||
.wp-list-table.plugins tbody tr.plugin-update-tr td.plugin-update {
|
||||
overflow: hidden; /* clearfix */
|
||||
padding: 0;
|
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
|
||||
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
|
||||
|
|
@ -1676,32 +1731,75 @@ div.action-links,
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Columns to hide */
|
||||
.fixed .column-date,
|
||||
.fixed .column-author,
|
||||
.column-categories,
|
||||
.column-tags,
|
||||
.tags .column-description,
|
||||
.media .column-parent,
|
||||
.media .column-comments,
|
||||
.users .column-email,
|
||||
.users .column-name,
|
||||
.sites .column-registered,
|
||||
.sites .column-users {
|
||||
.wp-list-table th:not(.column-primary),
|
||||
.wp-list-table th:not(.column-primary),
|
||||
.wp-list-table tr:not(.inline-edit-row) td:not(.column-primary):not(.check-column) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Checkboxes need to show */
|
||||
.wp-list-table tr th.check-column {
|
||||
display: table-cell;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
.wp-list-table .toggle-row {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wp-list-table tr:not(.inline-edit-row) td:not(.check-column) {
|
||||
position: relative;
|
||||
clear: both;
|
||||
display: block;
|
||||
width: auto !important; /* needs to override some columns that are more specifically targeted */
|
||||
}
|
||||
|
||||
.wp-list-table td.column-primary {
|
||||
padding-right: 50px; /* space for toggle button */
|
||||
}
|
||||
|
||||
.wp-list-table tr:not(.inline-edit-row) td:not(.column-primary):not(.check-column) {
|
||||
padding: 3px 8px 3px 35%;
|
||||
}
|
||||
|
||||
.wp-list-table tr:not(.inline-edit-row) td:not(.column-primary)::before {
|
||||
position: absolute;
|
||||
left: 10px; /* match padding of regular table cell */
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 32%; /* leave a little space for a gutter */
|
||||
content: attr(data-colname);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.wp-list-table .is-expanded td:not(.hidden) {
|
||||
display: block !important;
|
||||
overflow: hidden; /* clearfix */
|
||||
}
|
||||
|
||||
/* Special cases */
|
||||
.widefat .num,
|
||||
.column-posts {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#comments-form .fixed .column-author {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.fixed .column-comment .comment-author {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Posts */
|
||||
.column-title {
|
||||
width: 85%;
|
||||
#the-comment-list .is-expanded td {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.fixed .column-comments, .widefat .check-column {
|
||||
width: 35px
|
||||
#the-comment-list .is-expanded td:last-child {
|
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.widefat thead .check-column, .widefat tfoot .check-column {
|
||||
|
|
@ -1712,11 +1810,6 @@ div.action-links,
|
|||
word-wrap: normal;
|
||||
}
|
||||
|
||||
/* Media */
|
||||
.media .column-title {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Quick Edit and Bulk Edit */
|
||||
#wpbody-content .quick-edit-row-post .inline-edit-col-left,
|
||||
#wpbody-content .quick-edit-row-post .inline-edit-col-right,
|
||||
|
|
@ -1792,30 +1885,6 @@ div.action-links,
|
|||
height: 22px;
|
||||
}
|
||||
|
||||
/* Taxonomies */
|
||||
.tags .column-posts {
|
||||
width: 74px;
|
||||
}
|
||||
|
||||
.tags .column-slug {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
/* Comments */
|
||||
.comments .column-response {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
/* Users */
|
||||
.users .column-role {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
/* Network admin sites */
|
||||
.sites .column-blogname {
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
/* Updates */
|
||||
#wpbody-content #update-themes-table .plugin-title {
|
||||
width: auto;
|
||||
|
|
@ -1831,32 +1900,18 @@ div.action-links,
|
|||
}
|
||||
|
||||
/* Plugin/Theme Management Page */
|
||||
.wp-list-table.plugins {
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#wpbody-content .wp-list-table.plugins thead .column-description,
|
||||
#wpbody-content .wp-list-table.plugins tfoot .column-description,
|
||||
.wp-list-table.plugins th#description {
|
||||
.wp-list-table.plugins .toggle-row {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#wpbody-content .wp-list-table.plugins,
|
||||
#wpbody-content .wp-list-table.plugins thead,
|
||||
#wpbody-content .wp-list-table.plugins tbody,
|
||||
#wpbody-content .wp-list-table.plugins tr,
|
||||
#wpbody-content .wp-list-table.plugins .column-description,
|
||||
#wpbody-content .wp-list-table.plugins .plugin-title,
|
||||
#wpbody-content .wp-list-table.plugins .theme-title,
|
||||
#wpbody-content .wp-list-table.plugins .plugin-update,
|
||||
#wpbody-content .wp-list-table.plugins .manage-column.column-name {
|
||||
#wpbody-content .wp-list-table.plugins td {
|
||||
display: block;
|
||||
width: auto;
|
||||
padding: 10px 9px; /* reset from other list tables that have a label at this width */
|
||||
}
|
||||
|
||||
.active, .inactive {
|
||||
padding-top: 0;
|
||||
#wpbody-content .wp-list-table.plugins .column-description {
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.wp-list-table.plugins .plugin-title,
|
||||
|
|
@ -1865,11 +1920,9 @@ div.action-links,
|
|||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.plugins tr.active + tr.inactive th.check-column,
|
||||
.plugins tr.active + tr.inactive td,
|
||||
.wp-list-table.plugins .plugin-title,
|
||||
.wp-list-table.plugins .theme-title,
|
||||
.wp-list-table.plugins tbody th {
|
||||
.wp-list-table.plugins .theme-title {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -1878,7 +1931,9 @@ div.action-links,
|
|||
padding: 1px 0 0;
|
||||
}
|
||||
|
||||
.plugins tr.active + tr.inactive td.column-description {
|
||||
.plugins tr.active + tr.inactive th.check-column,
|
||||
.plugins tr.active + tr.inactive td.column-description,
|
||||
.plugins .plugin-update-tr:before {
|
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
|
@ -1888,69 +1943,23 @@ div.action-links,
|
|||
border-top: none;
|
||||
}
|
||||
|
||||
.wp-list-table.plugins .column-description {
|
||||
padding-top: 0;
|
||||
/* mimic the checkbox th */
|
||||
.plugins .plugin-update-tr:before {
|
||||
content: '';
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.wp-list-table.plugins .manage-column.column-name,
|
||||
.wp-list-table.plugins .column-description,
|
||||
.wp-list-table.plugins .plugin-title,
|
||||
.wp-list-table.plugins .theme-title {
|
||||
padding-right: 12px;
|
||||
padding-left: 46px;
|
||||
.plugins .active.update + .plugin-update-tr:before {
|
||||
border-left: 4px solid #d54e21;
|
||||
background-color: #fef7f1;
|
||||
}
|
||||
|
||||
.wp-list-table.plugins .manage-column.column-name {
|
||||
padding-top: 11px;
|
||||
padding-bottom: 12px;
|
||||
.plugins .plugin-update-tr .plugin-update {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.wp-list-table.plugins .manage-column.column-name.sortable {
|
||||
padding: 4px 12px 4px 36px;
|
||||
}
|
||||
|
||||
.wp-list-table.plugins tr {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wp-list-table.plugins th.check-column,
|
||||
.wp-list-table.plugins thead td.check-column,
|
||||
.wp-list-table.plugins tfoot td.check-column,
|
||||
.wp-list-table.plugins tr.update th.check-column {
|
||||
position: absolute;
|
||||
height: auto;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding-left: 2px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.wp-list-table.plugins thead td.check-column,
|
||||
.wp-list-table.plugins tfoot td.check-column {
|
||||
padding-left: 3px;
|
||||
padding-top: 11px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.plugins tbody th.check-column input[type="checkbox"] {
|
||||
margin-top: -3px;
|
||||
margin-left: 9px;
|
||||
}
|
||||
|
||||
.plugins tbody .active th.check-column input[type="checkbox"],
|
||||
.plugins tbody .active.update th.check-column input[type="checkbox"] {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.wp-list-table.plugins thead .check-column input,
|
||||
.wp-list-table.plugins tfoot .check-column input {
|
||||
margin-top: -2px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.wp-list-table.plugins .active th.check-column {
|
||||
background: none;
|
||||
.plugin-update-tr .update-message {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.wp-list-table.plugins .plugin-title strong,
|
||||
|
|
@ -1991,13 +2000,3 @@ div.action-links,
|
|||
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Smartphone */
|
||||
@media screen and (max-width: 600px) {
|
||||
/* Remove slug column from taxonomy list page
|
||||
and role column from users list page */
|
||||
.tags .column-slug,
|
||||
.users .column-role {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -395,7 +395,7 @@ class WP_Comments_List_Table extends WP_List_Table {
|
|||
$this->display_tablenav( 'top' );
|
||||
|
||||
?>
|
||||
<table class="<?php echo implode( ' ', $this->get_table_classes() ); ?>">
|
||||
<table class="wp-list-table <?php echo implode( ' ', $this->get_table_classes() ); ?>">
|
||||
<thead>
|
||||
<tr>
|
||||
<?php $this->print_column_headers(); ?>
|
||||
|
|
@ -466,13 +466,16 @@ class WP_Comments_List_Table extends WP_List_Table {
|
|||
return;
|
||||
}
|
||||
|
||||
if ( $primary !== $column_name ) {
|
||||
return '';
|
||||
}
|
||||
|
||||
$post = get_post();
|
||||
|
||||
$the_comment_status = wp_get_comment_status( $comment->comment_ID );
|
||||
|
||||
$out = '';
|
||||
|
||||
if ( $primary === $column_name ) {
|
||||
$del_nonce = esc_html( '_wpnonce=' . wp_create_nonce( "delete-comment_$comment->comment_ID" ) );
|
||||
$approve_nonce = esc_html( '_wpnonce=' . wp_create_nonce( "approve-comment_$comment->comment_ID" ) );
|
||||
|
||||
|
|
@ -556,7 +559,8 @@ class WP_Comments_List_Table extends WP_List_Table {
|
|||
$out .= "<span class='$action'>$sep$link</span>";
|
||||
}
|
||||
$out .= '</div>';
|
||||
}
|
||||
|
||||
$out .= '<button type="button" class="toggle-row"><span class="screen-reader-text">' . __( 'Show more details' ) . '</span></button>';
|
||||
|
||||
return $out;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -497,6 +497,8 @@ class WP_List_Table {
|
|||
}
|
||||
$out .= '</div>';
|
||||
|
||||
$out .= '<button type="button" class="toggle-row"><span class="screen-reader-text">' . __( 'Show more details' ) . '</span></button>';
|
||||
|
||||
return $out;
|
||||
}
|
||||
|
||||
|
|
@ -943,7 +945,7 @@ class WP_List_Table {
|
|||
* @param bool $with_id Whether to set the id attribute or not
|
||||
*/
|
||||
public function print_column_headers( $with_id = true ) {
|
||||
list( $columns, $hidden, $sortable ) = $this->get_column_info();
|
||||
list( $columns, $hidden, $sortable, $primary ) = $this->get_column_info();
|
||||
|
||||
$current_url = set_url_scheme( 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] );
|
||||
$current_url = remove_query_arg( 'paged', $current_url );
|
||||
|
|
@ -977,6 +979,10 @@ class WP_List_Table {
|
|||
elseif ( in_array( $column_key, array( 'posts', 'comments', 'links' ) ) )
|
||||
$class[] = 'num';
|
||||
|
||||
if ( $column_key === $primary ) {
|
||||
$class[] = 'column-primary';
|
||||
}
|
||||
|
||||
if ( isset( $sortable[$column_key] ) ) {
|
||||
list( $orderby, $desc_first ) = $sortable[$column_key];
|
||||
|
||||
|
|
@ -1163,7 +1169,11 @@ class WP_List_Table {
|
|||
$classes .= ' hidden';
|
||||
}
|
||||
|
||||
$attributes = "class='$classes'";
|
||||
// Comments column uses HTML in the display name with screen reader text.
|
||||
// Instead of using esc_attr(), we strip tags to get closer to a user-friendly string.
|
||||
$data = 'data-colname="' . wp_strip_all_tags( $column_display_name ) . '"';
|
||||
|
||||
$attributes = "class='$classes' $data";
|
||||
|
||||
if ( 'cb' == $column_name ) {
|
||||
echo '<th scope="row" class="check-column">';
|
||||
|
|
|
|||
|
|
@ -403,7 +403,9 @@ class WP_MS_Sites_List_Table extends WP_List_Table {
|
|||
$classes .= ' hidden';
|
||||
}
|
||||
|
||||
$attributes = "class='$classes'";
|
||||
$data = 'data-colname="' . wp_strip_all_tags( $column_display_name ) . '"';
|
||||
|
||||
$attributes = "class='$classes' $data";
|
||||
|
||||
if ( 'cb' === $column_name ) {
|
||||
echo '<th scope="row" class="check-column">';
|
||||
|
|
|
|||
|
|
@ -336,7 +336,9 @@ class WP_MS_Users_List_Table extends WP_List_Table {
|
|||
$classes .= ' hidden';
|
||||
}
|
||||
|
||||
$attributes = "class='$classes'";
|
||||
$data = 'data-colname="' . wp_strip_all_tags( $column_display_name ) . '"';
|
||||
|
||||
$attributes = "class='$classes' $data";
|
||||
|
||||
if ( 'cb' === $column_name ) {
|
||||
echo '<th scope="row" class="check-column">';
|
||||
|
|
|
|||
|
|
@ -973,7 +973,11 @@ class WP_Posts_List_Table extends WP_List_Table {
|
|||
$classes .= ' hidden';
|
||||
}
|
||||
|
||||
$attributes = "class='$classes'";
|
||||
// Comments column uses HTML in the display name with screen reader text.
|
||||
// Instead of using esc_attr(), we strip tags to get closer to a user-friendly string.
|
||||
$data = 'data-colname="' . wp_strip_all_tags( $column_display_name ) . '"';
|
||||
|
||||
$attributes = "class='$classes' $data";
|
||||
|
||||
if ( 'cb' === $column_name ) {
|
||||
echo '<th scope="row" class="check-column">';
|
||||
|
|
|
|||
|
|
@ -419,7 +419,9 @@ class WP_Users_List_Table extends WP_List_Table {
|
|||
$classes .= ' hidden';
|
||||
}
|
||||
|
||||
$attributes = "class='$classes'";
|
||||
$data = 'data-colname="' . wp_strip_all_tags( $column_display_name ) . '"';
|
||||
|
||||
$attributes = "class='$classes' $data";
|
||||
|
||||
if ( 'cb' === $column_name ) {
|
||||
$r .= "<th scope='row' class='check-column'>$checkbox</th>";
|
||||
|
|
|
|||
|
|
@ -487,6 +487,11 @@ $(document).ready( function() {
|
|||
}
|
||||
}, 'td.has-row-actions' );
|
||||
|
||||
// Toggle list table rows on small screens
|
||||
$( 'tbody' ).on( 'click', '.toggle-row', function() {
|
||||
$( this ).closest( 'tr' ).toggleClass( 'is-expanded' );
|
||||
});
|
||||
|
||||
$('#default-password-nag-no').click( function() {
|
||||
setUserSetting('default_password_nag', 'hide');
|
||||
$('div.default-password-nag').hide();
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -133,7 +133,7 @@ inlineEditPost = {
|
|||
editRow = $('#inline-edit').clone(true);
|
||||
$( 'td', editRow ).attr( 'colspan', $( 'th:visible, td:visible', '.widefat:first thead' ).length );
|
||||
|
||||
$(t.what+id).hide().after(editRow).after('<tr class="hidden"></tr>');
|
||||
$(t.what+id).removeClass('is-expanded').hide().after(editRow).after('<tr class="hidden"></tr>');
|
||||
|
||||
// populate the data
|
||||
rowData = $('#inline_'+id);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4,7 +4,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '4.3-alpha-33015';
|
||||
$wp_version = '4.3-alpha-33016';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
|
|||
Loading…
Reference in New Issue