[5.2] Responsive pagination

[brianteeman]

Pull Request for Issue #32674

Summary of Changes

Uses css media query etc to provide responsive pagination

Made for 5.2 as I have no idea if this is considered a bug fix or a feature - can easily be rebased

When you have a lot of items in a list (site and admin) then it breaks the layout on small devices or requires horizontal scrolling

Testing Instructions

As this is a scss change either use a pre-built package from this PR or apply the pr and run npm run build:css

Create a list view in both the site and admin and check the pagination

Actual result BEFORE applying this Pull Request

Expected result AFTER applying this Pull Request

Additional Checks

Make sure that the arrows are always displayed and that the ellipsis is never displayed between the arrows

Link to documentations

Please select:

• [ ] Documentation link for docs.joomla.org:

• [x] No documentation changes for docs.joomla.org needed

• [ ] Pull Request link for manual.joomla.org:

• [x] No documentation changes for manual.joomla.org needed

[Quy]

At the beginning, ellipsis is centered.

Go to the end, ellipsis is not centered.

The ellipsis next to the arrows is confusing as it implies additional links/pages to me, but that is not the case. For example, 13 is the last page but I assume there are more.

[Hackwar]

@brianteeman could you try to find a fix for the issue @Quy posted? I also would like to eventually have the numbered buttons disappear completely at a certain size. I think it would be perfectly fine to have the arrow buttons and then the "page x of y" at certain sizes. If you can get that done, I will try to get testers and have this be part of 5.2.

[brianteeman]

This was an attempt to resolve a three year old issue that keeps coming up. I am not a designer or css guru but I did my best to make it better than it was yesterday If someone wants to improve this then great - create a pr against this or create your own pr. This is the limit of my skillset

[Hackwar]

I will try to get someone to help with this.

[Quy]

Another possible solution is to show the arrows and the current page only as follows by removing /* Display the list item immediately before the active list item if it is not disabled */ sections:

[angieradtke]

Good morning, the whole thing is always something you can look at from different perspectives. With a smaller viewport, the pagination does not break. It stretches the screen.

The pagination itself arranges its items next to each other with display:flex. If you allow the list to wrap, all the information is retained and the list does not expand the page.

@media (max-width:xxpx) {

ul.pagination { flex-wrap: wrap} }

``

This solution may not be visually attractive, but it is very flexible and all information is retained.

The second solution visually removes all item links from the view, leaving only the arrows and the currently selected page visible. `@media (max-width: xxpx) {

ul.pagination { flex-wrap: wrap }

.pagination li.page-item:not(.active) { display: none }

.pagination li.page-item:nth-child(-n + 2), .pagination li.page-item:nth-last-child(-n+2)

{ display:block}

} ` This option has two problems: firstly, it may deprive the user of interesting information. The arrows are easy to use for blind people as they contain the necessary aria information. Sighted people, however, are required to know what a single and a double arrow mean. As long as the numbers are visible, this transfer is easier to achieve.

Problem number two: Performance is becoming increasingly important. By using nth, the numbers links can be switched off quite easily with CSS. However, nth is not a simple selector. The computing power is not negligible. However, if you want to prioritize design over usability, .-) I think this is a practical solution.

[Hackwar]

@brianteeman would you adopt the proposal of @angieradtke?

[brianteeman]

i dont consider either of those as solutions.

[ghost]

The Prebuilt packages is not available for download:

Edit: @Quy Thanks for merge branch.

[ghost]

I have tested this item :white_check_mark: successfully on 7fad1bb6c47d7f1c89f1f008f9c348f576df8d15

Test using Prebuilt package, Frontend Articles-, Backend Modules-list view.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/43766.}

[coolcat-creations]

There is somehow a 404 Error when clicking on the prebuild packages https://artifacts.joomla.org/drone/joomla/joomla-cms/5.2-dev/43766/downloads/77726

[brianteeman]

@coolcat-creations afaik the prebuilt packages are only store for a few weeks. I have triggered an update so that should generate new packages

[coolcat-creations]

Although it's only 3 pages, it shows the ellipsis between the arrows and the page number. Tested on the prebuilt package in com_content articles view with blog sample data and limit to 5 articles per page.

[exlemor]

Tried to test this PR but I am not even getting the ellipses that you are all lucky to get ( i guess ;) )... I created 280 articles in the Blog Category for testing this pagination situation.

Here are the settings in the Menu:

And the results look like this:

Same result if I change the Menu to a Category List, no ellipse just the data as expected.

[coolcat-creations]

@exlemor you are in the frontend. the PR is for the backend ;)

[brianteeman]

@exlemor you are in the frontend. the PR is for the backend ;)

No it is not

[coolcat-creations]

The screenshots here are mixed and your first two screenshots in the description is for the backend @brianteeman ? Can you clarify in the testing instruction which template to test?

[brianteeman]

I wrote

When you have a lot of items in a list (site and admin) then it breaks the layout on small devices or requires horizontal scrolling

can't be any clearer than that. When you are feeling better you will comprehend

[brianteeman]

@exlemor your screenshot is of a desktop view. This PR only changes the display of pagination on smaller screens

[exlemor]

Hi Brian,

Thanks, I guess I was getting tired myself - sorry.

I see the issue with the ellipse shifting location from center to the right... when looking at the mobile version :/

[HLeithner]

This pull request has been automatically rebased to 5.3-dev.

[HLeithner]

This pull request has been automatically rebased to 6.0-dev.

[brianteeman]

Closed due to lack of interest of anyone offering help