Changeset 37912

Timestamp:

06/29/2016 01:30:00 PM (10 years ago)

Author:

afercia

Message:

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.

Location:

trunk/src/wp-admin

Files:

• css/list-tables.css (modified) (1 diff)
• includes/class-wp-list-table.php (modified) (2 diffs)

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

@@ -2153 +2153 @@
         }
 }
+
+@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;
+        }
+}

trunk/src/wp-admin/includes/class-wp-list-table.php

@@ -773 +773 @@
 
                 $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;
@@ -814 +814 @@
                 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,