WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 4 years ago

#33962 closed defect (bug) (fixed)

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

Reported by: afercia Owned by: afercia
Milestone: 4.6 Priority: normal
Severity: normal Version: 4.3
Component: Administration Keywords: has-patch has-screenshots commit
Focuses: ui Cc:

Description

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.

https://cldup.com/ybcdEcU05p.png

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

Attachments (6)

33962.patch (754.1 KB) - added by erayalakese 5 years ago.
33962.2.patch (754.4 KB) - added by erayalakese 5 years ago.
Fixed problem after 33962.patch file.
Pagination_links_localized_version.png (33.9 KB) - added by pavelevap 5 years ago.
33962.3.patch (1.3 KB) - added by erayalakese 5 years ago.
33962.4.patch (390 bytes) - added by afercia 5 years ago.
33962.5.patch (1.9 KB) - added by afercia 4 years ago.

Download all attachments as: .zip

Change History (28)

@erayalakese
5 years ago

#1 @erayalakese
5 years ago

  • Keywords needs-testing added

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)

Last edited 5 years ago by erayalakese (previous) (diff)

@erayalakese
5 years ago

Fixed problem after 33962.patch file.

#2 @erayalakese
5 years ago

  • Keywords has-patch added

#3 @afercia
5 years ago

  • Keywords needs-patch added; needs-testing has-patch removed

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/

#4 follow-up: @pavelevap
5 years ago

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

#5 in reply to: ↑ 4 @afercia
5 years ago

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.

#6 @ocean90
5 years ago

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

#7 @pavelevap
5 years ago

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?

#8 follow-up: @afercia
5 years ago

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
5 years ago

#9 in reply to: ↑ 8 @erayalakese
5 years ago

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.

#10 @wonderboymusic
5 years ago

  • Owner set to afercia
  • Status changed from new to assigned

@afercia
5 years ago

#11 @afercia
5 years ago

  • Keywords has-patch added; good-first-bug needs-patch removed

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".

https://cldup.com/Ka5sCRyUOZ.png

Last edited 4 years ago by afercia (previous) (diff)

This ticket was mentioned in Slack in #design by afercia. View the logs.


5 years ago

#13 @afercia
5 years ago

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

https://cldup.com/VOjboporud.png

https://cldup.com/fiFVMIRASG.png

https://cldup.com/nxLKHTlKIE.png

#14 @afercia
5 years ago

  • Keywords ui-feedback added

#15 @afercia
5 years ago

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

This ticket was mentioned in Slack in #core by afercia. View the logs.


5 years ago

#17 @afercia
5 years ago

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.

#18 @afercia
5 years ago

  • Milestone changed from 4.4 to Future Release

#19 @helen
5 years ago

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
4 years ago

#20 @afercia
4 years ago

  • Keywords has-screenshots added
  • Milestone changed from Future Release to 4.6

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 :)

https://cldup.com/jSMJJ0dCeE.png

#21 @afercia
4 years ago

  • Keywords commit added; ui-feedback removed

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.

#22 @afercia
4 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

Note: See TracTickets for help on using tickets.