List table: pagination links on small screens break in two lines

[afercia]

Follow up to #32253.
After the changes to width/min-width and padding in #32253 the pagination links can break in two lines on small screens, see screenshot below.
We should always allow plugins to use numbers/text instead of the arrows so no fixed width but adjusting the padding in a proper media query should fix this.

We should also consider that when there are hundreds of pages, the input size gets bigger (and the links size too, of course).

[erayalakese]

I think lowering padding of .tablenav-pages .pagination-links a from 9px to -1px will solve the problem. Patch sent.

Update

Patch is unreadable because css file minified. I just changed

.tablenav-pages .pagination-links a,.tablenav-pages-navspan{padding:9px 1pc 9pt;font-size:18px}

to

.tablenav-pages .pagination-links a,.tablenav-pages-navspan{padding:-1px 1pc 9pt;font-size:18px}

Update 2

list-tables.css , list-tables-rtl.css files also changed as explained above. Sent as 2nd patch (33962.2.patch)

[erayalakese]

Fixed problem after 33962.patch file.

[afercia]

Thanks @erayalakese. Tested a bit your patch and noticed setting a negative value for the top padding is an invalid value. Browsers discard the whole padding declaration and apply the padding inherited from the rule outside the media query (which is padding: 3px 5px 7px;).
I'd suggest to try to make the spans/links perfect squares with a size of 41px x 41px, applying a padding of padding: 9px 11px 12px; should work.

Also, there's no need to patch the RTL and minified files, they're generated during the build process. The preferred way to generate patches is from the root of your SVN checkout, all the file paths inside the patch should begin with src/... The Git format is accepted too. For more details please see: ​https://make.wordpress.org/core/handbook/tutorials/working-with-patches/

[pavelevap]

Please see how it looks in our localized version...

[afercia]

Replying to pavelevap:

Please see how it looks in our localized version...

@pavelevap hi, to my understanding (I've googled for that so I may be totally wrong) that sounds more like a complete sentence, something like "out of a total of" that would be too long in English too. Would it be possible to translate with a shorter term? I can't think of a better solution here, given the very limited space.

[ocean90]

Maybe we should have a different navigation for mobile? Or remove parts which aren't essential, like the input field?

[pavelevap]

Yes, it is a little bit longer because when using only "z" (as "of") we have different format, for example "1 z 1", "1 ze 2", "1 z 57", etc. Our language is not very good for short strings... I love English and its "from" which can be used anywhere :-)

But I am thinking about replacing "1 of 57", translated "1 z celkem 57" to simple "1 / 57"? It could be also in English original and without localization, because it is used as common pattern?

[afercia]

If a slash "/" is appropriate for all languages, then maybe we could also simplify the code. We just need a hidden expanded string as target for aria-describedby, something like "Current page: 1 of 57" or "Aktuální stránka: 1 z celkem 57" :)

[erayalakese]

Replying to afercia:

If a slash "/" is appropriate for all languages, then maybe we could also simplify the code. We just need a hidden expanded string as target for aria-describedby, something like "Current page: 1 of 57" or "Aktuální stránka: 1 z celkem 57" :)

Just sent a patch (33962.3.patch) after your suggestion. So we can talk over it and check with localized WP versions.

[afercia]

Since it's not clear what we should do here, I've refreshed the patch with a minimal approach, just reducing the links left/right padding.
Wondering if it's worth exploring new visual ideas to convey the information about "pages nn of nn". Would like to see some designers chime in here :) I feel there's an opportunity to solve two issues (visual and accessibility) together. I'm not a designer, what you can see below it's just some quick in-browser editing to try the first (probably bad) idea that came into my (old) mind :) I'm sure designers could do a far better job here :)
About accessibility, we can use ARIA attributes to hide/expand any text, like what was done for the Comment count "bubble".

[afercia]

For reference, some experimental mockups/screenshots ​from a discussion on Slack - Design

[afercia]

WordPress 4.4 is in Beta 2 now, I'm afraid at this point only a minimal fix is viable, see 33962.4.patch​. Maybe worth keeping this ticket open though, in order to explore new ideas? cc @helen

[afercia]

In 35523:

List tables: Improve the displaying of pagination links on small screens.

Pagination links can break in two lines on small screens. Implements a partial fix, new ideas and better solutions should be explored though.

See #33962.

[helen]

Sorry I missed this before, I agree with the fix for 4.4. I'd love to see a more general rethink for nav/filter on small screens, not just with how to make it fit right but also the interactions: #32558.

[afercia]

Looking back at this and waiting for a more general rethink for nav/filter on small screens, a simple interim solution could be making the text drop one line below using just an additional <span> and few lines of CSS. See refreshed patch and screenshot. Some testing would be nice :)

[afercia]

Quickly discussed this ticket at Vienna's Contributor Day with @karmatosed and @hugobaeta and agreed it's an improvement. It was pointed out that there's no apparent reason why the top and bottom pagination links should differ and maybe the editable input field should be displayed only when there are more than 3 pages and agreed these are reasonable considerations but a bit outside the scope of this ticket. Probably something for future iterations and a new ticket.

[afercia]

In 37912:

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.