2.0: Don't hide pagination at the top of threads on mobile

RobinHood

Well-known member
#1
With XF2, when on mobile, if you open a thread that doesn't have unread posts then there is no jump to new button and the the pagination buttons are hidden.

This can be frustrating if you want to head straight to the last page or any other page.

Without the page buttons you don't have context when the page loads as to how long the thread really is, then you have to scroll all the way to the bottom of the page just to find a link to bring you to the end of the thread.
 
#5
The reason it‘s hidden is cause of the overall narrow viewport on mobile devices. The more elements above the actual content the more users have to scroll to view said content. It makes sense and is a good design decision imo.
I agree, however, that XF could offer a toggle in the style editor to enable top pagination controls without template edits.
 

RobinHood

Well-known member
#6
It doesn't make sense when it compromises on usability, they were just fine there in XF1. Navigation elements shouldn't be (solely) at the bottom of the page, and that's what the pagination button are.

They take up about 20px in height, and the entire page could be thousands of pixels tall. The few extra pixels of scrolling at the top of a page shouldn't be a consideration in this case if it means you have to swipe multiple times to reach the bottom of the the thread just to navigate to another page.

Plus, being able to see the buttons at the top of the page before you start scrolling gives you context as to where in the thread you are, otherwise it looks like you're always on the first page of a short thread.

If you're on a very long thread trying to browse to find a specific post, then after each page load you have to scroll all the way to the bottom to navigate forward or back or pick a specific page.
 
Last edited:

RobinHood

Well-known member
#8
Yep, looking at that now my suggestion applies to that too. Once you're on page 2 or later it's useful to have them at the top.
 

Case

Well-known member
#9
I'm not really sure why its hidden there, it doesn't make any difference to the mobile view.

Desktop
desktop.jpg


Mobile
mobile.jpg

Mobile w/ pagination displaying
mobile-w-pag.jpg
 

RobinHood

Well-known member
#10
Ohh, I thought you were talking about part of that view:

1519908960397.png


In your screenshot above I can see why it's hidden and think that makes sense as it's not that useful from outside the thread and makes it look cleaner. Once you tap the title and end up in the thread, as long as the pagination buttons are available at the top then you can jump to any page you like.
 

Mr Lucky

Well-known member
#12
Sorry for silly question but how do you unhide it? Cheers

I want it to show Mobile with pagination displaying.
Try this in extra.less

CSS:
// top page navigation back in mobiles

.block-outer:not(.block-outer--after) .pageNavWrapper:not(.pageNavWrapper--forceShow)
{
   display: initial;
}
 
#13
Try this in extra.less

CSS:
// top page navigation back in mobiles

.block-outer:not(.block-outer--after) .pageNavWrapper:not(.pageNavWrapper--forceShow)
{
   display: initial;
}
Thanks for the response mate.

However, it works for the Top Pagination.

But I want the one shown below where it says Mobile w/ pagination displaying (ie the thread titles)

I'm not really sure why its hidden there, it doesn't make any difference to the mobile view.

Desktop
View attachment 170143


Mobile
View attachment 170144

Mobile w/ pagination displaying
View attachment 170145
 
#14
That is if you look at

Mobile and Mobile w/ pagination displaying there is a major difference as one has pagination.

I'm not talking about the top of threads on mobile
 
Top