[#46856] - [6.1] improved responsive pagination
- Pending
- Medium
- Build: 6.1-dev
- Draft PR
- # 46856
- Diff
- hans2103:feature/6.1-responsive-pagination
User tests: Successful: Unsuccessful:
Pull Request for Issue #32674 (and possibly more)
Summary of Changes
This PR will refactor the pagination for both Cassiopeia and Atum to get a responsive pagination. Using container queries.
According to caniuse.com already 93% coverage
https://caniuse.com/?search=container
I am trying to achieve the following setup:
When page 1 is active
- < 480px: < 1 2 ... 18 >
- 480-640px: < 1 2 3 4 ... 18 >
- 640-768px: < 1 2 3 4 5 6 ... 18 >
- 768-896px: < 1 2 3 4 5 6 7 8 ... 18 >
- 896px+: < 1 2 3 4 5 6 7 8 9 10 ... 18 >
When page 2 is active
- < 480px: < 1 2 ... 18 >
- 480-640px: < 1 2 3 4 ... 18 >
- 640-768px: < 1 2 3 4 5 6 ... 18 >
- 768-896px: < 1 2 3 4 5 6 7 8 ... 18 >
- 896px+: < 1 2 3 4 5 6 7 8 9 10 ... 18 >
When page 3 is active
- < 480px: < 1 2 3 ... 18 >
- 480-640px: < 1 2 3 4 ... 18 >
- 640-768px: < 1 2 3 4 5 6 ... 18 >
- 768-896px: < 1 2 3 4 5 6 7 8 ... 18 >
- 896px+: < 1 2 3 4 5 6 7 8 9 10 ... 18 >
When page 4 is active
- < 480px: < 1 ... 4 ... 18 >
- 480-640px: < 1 2 3 4 5 ... 18 >
- 640-768px: < 1 2 3 4 5 6 ... 18 >
- 768-896px: < 1 2 3 4 5 6 7 8 ... 18 >
- 896px+: < 1 2 3 4 5 6 7 8 9 10 ... 18 >
When page 5 is active
- < 480px: < 1 ... 5 ... 18 >
- 480-640px: < 1 ... 4 5 6 ... 18 >
- 640-768px: < 1 2 3 4 5 6 7... 18 >
- 768-896px: < 1 2 3 4 5 6 7 8 ... 18 >
- 896px+: < 1 2 3 4 5 6 7 8 9 10 ... 18 >
When page 6 is active
- < 480px: < 1 ... 6 ... 18 >
- 480-640px: < 1 ... 5 6 7 ... 18 >
- 640-768px: < 1 ... 4 5 6 7 8 ... 18 >
- 768-896px: < 1 2 3 4 5 6 7 8 9 ... 18 >
- 896px+: < 1 2 3 4 5 6 7 8 9 10 ... 18 >
When page 7 is active
- < 480px: < 1 ... 7 ... 18 >
- 480-640px: < 1 ... 6 7 8 ... 18 >
- 640-768px: < 1 ... 5 6 7 8 9 ... 18 >
- 768-896px: < 1 ... 4 5 6 7 8 9 10 ... 18 >
- 896px+: < 1 2 3 4 5 6 7 8 9 10 11... 18 >
When page 8 is active
- < 480px: < 1 ... 8 ... 18 >
- 480-640px: < 1 ... 7 8 9 ... 18 >
- 640-768px: < 1 ... 6 7 8 9 10 ... 18 >
- 768-896px: < 1 ... 5 6 7 8 9 10 11 ... 18 >
- 896px+: < 1 ... 4 5 6 7 8 9 10 11 12... 18 >
When page 9 is active
- < 480px: < 1 ... 9 ... 18 >
- 480-640px: < 1 ... 8 9 10 ... 18 >
- 640-768px: < 1 ... 7 8 9 10 11 ... 18 >
- 768-896px: < 1 ... 6 7 8 9 10 11 12 ... 18 >
- 896px+: < 1 ... 5 6 7 8 9 10 11 12 13 ... 18 >
When page 10 is active
- < 480px: < 1 ... 10 ... 18 >
- 480-640px: < 1 ... 9 10 11 ... 18 >
- 640-768px: < 1 ... 8 9 10 11 12 ... 18 >
- 768-896px: < 1 ... 7 8 9 10 11 12 13 ... 18 >
- 896px+: < 1 ... 6 7 8 9 10 11 12 13 14 ... 18 >
When page 11 is active
- < 480px: < 1 ... 11 ... 18 >
- 480-640px: < 1 ... 10 11 12 ... 18 >
- 640-768px: < 1 ... 9 10 11 12 13 ... 18 >
- 768-896px: < 1 ... 8 9 10 11 12 13 14 ... 18 >
- 896px+: < 1 ... 7 8 9 10 11 12 13 14 15 ... 18 >
When page 12 is active
- < 480px: < 1 ... 12 ... 18 >
- 480-640px: < 1 ... 11 12 13 ... 18 >
- 640-768px: < 1 ... 10 11 12 13 14 ... 18 >
- 768-896px: < 1 ... 9 10 11 12 13 14 15 ... 18 >
- 896px+: < 1 ... 8 9 10 11 12 13 14 15 16 17 18 >
When page 13 is active
- < 480px: < 1 ... 13 ... 18 >
- 480-640px: < 1 ... 12 13 14 ... 18 >
- 640-768px: < 1 ... 11 12 13 14 15 ... 18 >
- 768-896px: < 1 ... 10 11 12 13 14 15 16 17 18 >
- 896px+: < 1 ... 9 10 11 12 13 14 15 16 17 18 >
When page 14 is active
- < 480px: < 1 ... 14 ... 18 >
- 480-640px: < 1 ... 13 14 15 ... 18 >
- 640-768px: < 1 ... 12 13 14 15 16 17 18 >
- 768-896px: < 1 ... 11 12 13 14 15 16 17 18 >
- 896px+: < 1 ... 9 10 11 12 13 14 15 16 17 18 >
When page 15 is active
- < 480px: < 1 ... 15 ... 18 >
- 480-640px: < 1 ... 14 15 16 17 18 >
- 640-768px: < 1 ... 13 14 15 16 17 18 >
- 768-896px: < 1 ... 12 13 14 15 16 17 18 >
- 896px+: < 1 ... 9 10 11 12 13 14 15 16 17 18 >
When page 16 is active
- < 480px: < 1 ... 16 17 18 >
- 480-640px: < 1 ... 15 16 17 18 >
- 640-768px: < 1 ... 14 15 16 17 18 >
- 768-896px: < 1 ... 13 14 15 16 17 18 >
- 896px+: < 1 ... 9 10 11 12 13 14 15 16 17 18 >
When page 17 is active
- < 480px: < 1 ... 17 18 >
- 480-640px: < 1 ... 15 16 17 18 >
- 640-768px: < 1 ... 13 14 15 16 17 18 >
- 768-896px: < 1 ... 13 14 15 16 17 18 >
- 896px+: < 1 ... 9 10 11 12 13 14 15 16 17 18 >
When page 18 is active
- < 480px: < 1 ... 17 18 >
- 480-640px: < 1 ... 15 16 17 18 >
- 640-768px: < 1 ... 14 15 16 17 18 >
- 768-896px: < 1 ... 13 14 15 16 17 18 >
- 896px+: < 1 ... 9 10 11 12 13 14 15 16 17 18 >
When ellipsis is used to indicate a unknown amount of pages between two items the ellipsis is removed by page number when it is logical so...
1 2 3 instead of 1 ... 3. Same goes for the end of the line.
Testing Instructions
-
Joomla install with demo data.
-
Go to Joomla > Content and duplicate and publish blog items to get a set of 60 or more items... this will most certainly get you pagination. The more the better
-
Go to Joomla Admin Content, play with the viewport width and notice how pagination adapts
-
Go to Joomla Frontend Blog, play with the viewport width and notice how pagination adapts
-
Apply the patch.. run
npm ci(or another logic npm script to compile the css) -
Again... Go to Joomla Admin Content, play with the viewport width and notice how pagination adapts. Compare with previous result.
-
Again... Go to Joomla Frontend Blog, play with the viewport width and notice how pagination adapts. Compare with previous result.
Actual result BEFORE applying this Pull Request
When viewport decreases the changes are you get two lines of pagination or one that exceeds the viewport
Expected result AFTER applying this Pull Request
Depending the size of the container a certain amount of pages are shown in the pagination. Not exceeding the viewport width
Also... << and >> have been replaced by the page numbers of resp. first and last page. No more confuse moments what the difference might be between << and <.
Link to documentations
Please select:
-
Documentation link for docs.joomla.org:
-
No documentation changes for docs.joomla.org needed
-
Pull Request link for manual.joomla.org:
-
No documentation changes for manual.joomla.org needed
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Repository NPM Change Front End com_contact com_content com_finder com_newsfeeds com_tags Layout |
| Labels |
Added:
NPM Resource Changed
PR-6.1-dev
|
||
What is the reason for this change $this->pagination->getPaginationLinks()
It makes it a breaking change and forces all extensions to be updated (as you've seen by updating all the core components)
What is the reason for this change
$this->pagination->getPaginationLinks()It makes it a breaking change and forces all extensions to be updated (as you've seen by updating all the core components)
because I would like to use links.php instead of deprecated list.php
regarding the code style... seems that I have made things worse while trying to fix the code style settings on my machine. Where to find the correct way to setup my PHPStorm?
regarding the code style... seems that I have made things worse while trying to fix the code style settings on my machine. Where to find the correct way to setup my PHPStorm?
@hans2103 No idea, but for now you could simply accept my change suggestions, that should fix it.
@hans2103 P.S.: You haven't made it worse, it is just so that we have 2 code style checkers, if the first one fails, the second one does not run, so if you make the first one happy there still might be the second one which complains. Ah, no, still the first one complaining.
@hans2103 Hmm, seems my code style fixes were not sufficient:
FILE: /__w/joomla-cms/joomla-cms/layouts/joomla/pagination/link.php
--------------------------------------------------------------------------------
FOUND 2 ERRORS AFFECTING 2 LINES
--------------------------------------------------------------------------------
123 | ERROR | [x] Line indented incorrectly; expected at least 8 spaces, found
| | 4
126 | ERROR | [x] Line indented incorrectly; expected at least 8 spaces, found
| | 4
--------------------------------------------------------------------------------
PHPCBF CAN FIX THE 2 MARKED SNIFF VIOLATIONS AUTOMATICALLY
--------------------------------------------------------------------------------
@richard67
aha...
joomla-cms/.php-cs-fixer.dist.php
Lines 52 to 55 in e998b20
that's why code style was not applied... have to do in manually.... old school. :-)
The reason for my BC break
I have copied a lot of sample data on my local environment.
This is what I want to achieve...
If I keep getPagesLinks() I have to work with this set of information
That is not enough to get the view I want
If I change to getPaginationLinks() I have this set of information:
That brings me the information I need to get the view I am after.
@hans2103 Please check the code style errors reported here: https://github.com/joomla/joomla-cms/actions/runs/21799391535/job/62892262265?pr=46856 :
The first error could be fixed by using
// phpcs:disable PSR1.Files.SideEffectshint or adding the file to the exclusions in theruleset.xmlfile.But I'm not sure if that would be a good thing. Is it really good do define functions and constants in our layout files?