Created
June 24, 2018 23:23
-
-
Save kevinwhoffman/28be310dd178e282b932b9d309c401b7 to your computer and use it in GitHub Desktop.
Shift Breakpoint of WP List Table
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* The layout of a WP List Table typically changes from a multi-column to | |
* single-column layout when the viewport width is less than or equal to 782px. | |
* This CSS shifts that breakpoint to 960px for tables with more columns that | |
* would otherwise become squished if they were all crammed on screen at once. | |
*/ | |
@media screen and ( max-width: 960px ) { | |
/* WP List Table Options & Filters */ | |
.tablenav { | |
height: auto; | |
} | |
.tablenav.top { | |
margin: 20px 0 5px 0; | |
} | |
.tablenav.bottom { | |
position: relative; | |
margin-top: 15px; | |
} | |
.tablenav br { | |
display: none; | |
} | |
.tablenav br.clear { | |
display: block; | |
} | |
.tablenav.top .actions, | |
.tablenav .view-switch { | |
display: none; | |
} | |
.view-switch a { | |
width: 36px; | |
height: 36px; | |
line-height: 33px; | |
} | |
/* Pagination */ | |
.tablenav.top .displaying-num { | |
display: none; | |
} | |
.tablenav.bottom .displaying-num { | |
position: absolute; | |
right: 0; | |
top: 11px; | |
margin: 0; | |
font-size: 14px; | |
} | |
.tablenav .tablenav-pages { | |
width: 100%; | |
height: auto; | |
text-align: center; | |
margin: 0 0 25px; | |
} | |
.tablenav.bottom .tablenav-pages { | |
margin-top: 25px; | |
} | |
.tablenav.top .tablenav-pages.one-page { | |
display: none; | |
} | |
.tablenav.bottom .tablenav-pages.one-page { | |
margin: 15px 0 0 0; | |
height: 0; | |
} | |
.tablenav-pages .pagination-links { | |
font-size: 16px; | |
} | |
.tablenav-pages .pagination-links a, | |
.tablenav-pages-navspan { | |
padding: 9px 11px 12px; | |
font-size: 18px; | |
} | |
.tablenav-pages-navspan { | |
height: 18px; | |
} | |
.tablenav-pages .pagination-links .current-page { | |
padding: 8px 9px 9px; | |
font-size: 16px; | |
} | |
/* WP List Table Adjustments: General */ | |
.form-wrap > p { | |
display: none; | |
} | |
.wp-list-table th.column-primary ~ th, | |
.wp-list-table tr:not(.inline-edit-row):not(.no-items) td.column-primary ~ td:not(.check-column) { | |
display: none; | |
} | |
.wp-list-table thead th.column-primary { | |
width: 100%; | |
} | |
/* Checkboxes need to show */ | |
.wp-list-table tr th.check-column { | |
display: table-cell; | |
width: 35px; | |
} | |
.wp-list-table .column-primary .toggle-row { | |
display: block; | |
} | |
.wp-list-table tr:not(.inline-edit-row):not(.no-items) 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):not(.no-items) td.column-primary ~ td:not(.check-column) { | |
padding: 3px 8px 3px 35%; | |
} | |
.wp-list-table tr:not(.inline-edit-row):not(.no-items) 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 */ | |
} | |
.widefat thead td.check-column, | |
.widefat tfoot td.check-column { | |
padding-top: 10px; | |
} | |
.widefat * { | |
word-wrap: normal; | |
} | |
/* 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, | |
#wpbody-content .inline-edit-row-post .inline-edit-col-center, | |
#wpbody-content .quick-edit-row-page .inline-edit-col-left, | |
#wpbody-content .quick-edit-row-page .inline-edit-col-right, | |
#wpbody-content .bulk-edit-row-post .inline-edit-col-right, | |
#wpbody-content .bulk-edit-row .inline-edit-col-left, | |
#wpbody-content .bulk-edit-row-page .inline-edit-col-right, | |
#wpbody-content .bulk-edit-row .inline-edit-col-bottom { | |
float: none; | |
width: 100%; | |
} | |
#wpbody-content .quick-edit-row fieldset .inline-edit-col label, | |
#wpbody-content .quick-edit-row fieldset .inline-edit-group label, | |
#wpbody-content .bulk-edit-row fieldset .inline-edit-col label, | |
#wpbody-content .bulk-edit-row fieldset .inline-edit-group label { | |
max-width: none; | |
float: none; | |
margin-bottom: 5px; | |
} | |
#wpbody .bulk-edit-row fieldset select { | |
display: block; | |
width: 100%; | |
max-width: none; | |
box-sizing: border-box; | |
} | |
.inline-edit-row fieldset ul.cat-checklist label, | |
.inline-edit-row #bulk-titles div { | |
font-size: 16px; | |
} | |
.inline-edit-row fieldset label span.title, | |
.inline-edit-row fieldset.inline-edit-date legend { | |
float: none; | |
} | |
.inline-edit-row fieldset label.inline-edit-tags { | |
padding: 0 0.5em; | |
} | |
.inline-edit-row fieldset .inline-edit-col label.inline-edit-tags { | |
padding: 0; | |
} | |
.inline-edit-row fieldset label span.input-text-wrap, | |
.inline-edit-row fieldset .timestamp-wrap { | |
margin-left: 0; | |
} | |
.inline-edit-row fieldset input[name=jj], | |
.inline-edit-row fieldset input[name=hh], | |
.inline-edit-row fieldset input[name=mn] { | |
width: 3em; | |
} | |
.inline-edit-row fieldset input[name=aa] { | |
width: 4.5em; | |
} | |
.inline-edit-row .inline-edit-or { | |
margin: 0 6px 0 0; | |
} | |
#edithead .inside, | |
#commentsdiv #edithead .inside { | |
float: none; | |
text-align: left; | |
padding: 3px 5px; | |
} | |
#commentsdiv #edithead .inside input, | |
#edithead .inside input { | |
width: 100%; | |
} | |
#edithead label { | |
display: block; | |
} | |
#bulk-titles div { | |
margin: 0.8em 0.3em; | |
} | |
#bulk-titles div a { | |
height: 22px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment