List tables: Make the pagination links and text better responsive.

On small screens, especially with longer translations, the pagination links and
text could break in two lines. This fixes it moving down the text in a new line.

Fixes #33962.

git-svn-id: https://develop.svn.wordpress.org/trunk@37912 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2016-06-29 13:30:00 +00:00
parent a89fdc3935
commit 9008030f1e
2 changed files with 15 additions and 3 deletions

View File

@ -2152,3 +2152,15 @@ div.action-links,
width: 100%;
}
}
@media screen and ( max-width: 480px ) {
.tablenav-pages .current-page {
margin: 0;
}
.tablenav-pages .tablenav-paging-text {
float: left;
width: 100%;
padding-top: 0.5em;
}
}

View File

@ -772,7 +772,7 @@ class WP_List_Table {
$page_links = array();
$total_pages_before = '<span class="paging-input">';
$total_pages_after = '</span>';
$total_pages_after = '</span></span>';
$disable_first = $disable_last = $disable_prev = $disable_next = false;
@ -813,9 +813,9 @@ class WP_List_Table {
if ( 'bottom' === $which ) {
$html_current_page = $current;
$total_pages_before = '<span class="screen-reader-text">' . __( 'Current Page' ) . '</span><span id="table-paging" class="paging-input">';
$total_pages_before = '<span class="screen-reader-text">' . __( 'Current Page' ) . '</span><span id="table-paging" class="paging-input"><span class="tablenav-paging-text">';
} else {
$html_current_page = sprintf( "%s<input class='current-page' id='current-page-selector' type='text' name='paged' value='%s' size='%d' aria-describedby='table-paging' />",
$html_current_page = sprintf( "%s<input class='current-page' id='current-page-selector' type='text' name='paged' value='%s' size='%d' aria-describedby='table-paging' /><span class='tablenav-paging-text'>",
'<label for="current-page-selector" class="screen-reader-text">' . __( 'Current Page' ) . '</label>',
$current,
strlen( $total_pages )