WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#38394 closed defect (bug) (fixed)

Twenty Seventeen: iPhone 5s: Next/previous arrow awkwardly pushed below posts navigation

Reported by: alex27 Owned by: davidakennedy
Milestone: 4.7 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch needs-testing
Focuses: Cc:

Description

The next/previous arrow in posts navigation can get awkwardly pushed below the page-numbers in portrait mode:

https://cloud.githubusercontent.com/assets/4550351/19464935/168fdbb4-954c-11e6-8514-989c067edbf1.png

Attachments (5)

38394.diff (734 bytes) - added by Caspie 3 years ago.
Adding possible fix for small devices (320 to 480px). Tested on iPhone 5s.
pagination_fix_on_small_devices.jpg (38.6 KB) - added by Caspie 3 years ago.
This is how it looks, again on iPhone 5s
38394_2.diff (918 bytes) - added by Caspie 3 years ago.
Adding comments and placing the code on the proper places
small-arrows.png (37.8 KB) - added by melchoyce 3 years ago.
38394.3.diff (6.6 KB) - added by laurelfulford 3 years ago.

Download all attachments as: .zip

Change History (15)

@Caspie
3 years ago

Adding possible fix for small devices (320 to 480px). Tested on iPhone 5s.

#1 @Caspie
3 years ago

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

#2 @Caspie
3 years ago

In the possible fix, I've added a new media query (min-width:20em) to cover the small resolution devices. The idea is that the page numbers are actually hidden and we show only prev and next links. The buttons are also wider to be accessed more easily.

@Caspie
3 years ago

This is how it looks, again on iPhone 5s

@Caspie
3 years ago

Adding comments and placing the code on the proper places

#3 @Caspie
3 years ago

Still needs checking. First time you load the page on portrait and you switch to landscape, next button is pushed a little bit down. If the page is refreshed this issue disappears when changing to landscape.

#4 @davidakennedy
3 years ago

Thanks for the patch @Caspie! That looks like a good start.

@melchoyce We'll probably need to iterate a bit here.

Twenty Sixteen for reference:

https://cldup.com/HF7ST8cy7i.png

#5 @melchoyce
3 years ago

This only seems to be an issue at the very smallest of screens, where the padding on .wrap is still 3em. I feel like in a GitHub issue somewhere I suggested dropping that down to 2em — can we still do that? 3em makes the line-length super short on small screens.

Alternately, we could ditch the full count and just display the page you're currently on between the arrows?

#6 @melchoyce
3 years ago

I also think we could reduce some of the space between the numbers if we need to.

#7 @melchoyce
3 years ago

Tried out some smaller arrows (10px even spacing around the arrow) in small-arrows.png. This could also help save some space.

#8 @Caspie
3 years ago

Regarding lowering the space between the page numbers - consider also situations where you are on archive page with 300 pages, for example. Then if you are on page 222 the numbers will look like: < 222 223 ... 300 > which on a small devices will easily push the next arrow.

#9 @laurelfulford
3 years ago

Good catch, @Caspie!

I also noticed issues when you're a few pages in, even with less spacing around the .wrap element and prev/next links:

https://cldup.com/NMYxyliuX2.png

It also happens with the narrower two column layout:

https://cldup.com/uUhuTBdb5f.png

In 38394.3.diff, I tried @melchoyce's suggestion of only displaying the current page on smaller screens, like:

https://cldup.com/m9CCvxbW90.thumb.jpg

I also addressed a couple other issues:

  • Reduced padding around .wrap on smaller screens, as requested above.
  • Fixed issue with the page numbers not displaying the underline on hover. This has been updated in the custom colours files, too.

#10 @davidakennedy
3 years ago

  • Owner set to davidakennedy
  • Resolution set to fixed
  • Status changed from new to closed

In 38996:

Twenty Seventeen: Fix broken and crowded pagination navigation on small screens

  • Hides page numbers visually at smaller screen sizes.
  • Reduced padding around .wrap class on smaller screens.
  • Fixed issue with the page numbers not displaying the underline on :hover. This has been updated in the custom colors files, too.

Props laurelfulford, caspie.

Fixes #38394.

Note: See TracTickets for help on using tickets.