johnDoe220's avatar

Different display of pagination on desktop and mobile

How in Laravel is exactly like laracasts. If we enter with desktop, the page is like this:

Post::paginate()

But on mobile or on smaller pages like this:

Post::simplePaginate()
0 likes
9 replies
tykus's avatar

It is done with CSS on the frontend rather than on the server-side; i.e. all of the individual page links are in the DOM, but hidden by default and only visible after the md breakpoint (see hidden md:flex Tailwind classes in the class list):

<a class="leading-4 flex h-8 items-center justify-center rounded-xl border p-4 text-2xs font-semibold text-white md:p-2 bg-blue/7 border-blue/75 hidden md:flex hover:border-blue focus:border-blue focus:text-blue" disabled="false" href="https://laracasts.com/discuss?page=1" style="min-width: 40px;">
    <span>1</span>
</a>
johnDoe220's avatar

@tykus I don't understand why the paginate type information is sent through Laravel, so if it is to be handled with css, the paginate type should be sent by Laravel first.

tykus's avatar

@johnDoe220 I gave you a sample from here on the Laracasts forum. What is your CSS framework/library if any?

johnDoe220's avatar

@tykus This is what I have in mind: If it was a desktop

Post::paginate();
// 1 2 3 4 5

If it was a mobile phone

Post::simplePaginate()
// < prev next >

Actually my logic is that it should be handled on the server side.I have already implemented the styles of each trap separately in paginate

johnDoe220's avatar

@Snapey Because in mobile

post::paginate() It does not look interesting at all and we are facing a large number of pages

tykus's avatar

@johnDoe220 already explained how that can be easily achieved using CSS only.

Otherwise, you will need the application to detect that the browser is mobile to determine which pagination method to use. jessengers/agent is a package that can be used for this purpose but it appears to a while since it received any attention...

Please or to participate in this conversation.