To reproduce: 1- Have at least 10 record of the same type that can be viewed from OPAC 2- Go to administration > system preferences > OPACnumSearchResults and set it to 1 3- Go to the OPAC and search for the type from step 1 4- Notice top and bottom page selections are numbered from 1 to 10 + Next >> + Last >> 5- Inspect the webpage and switch to mobile view 6- Reduce display width and notice the buttons (of step 4) on the right are overflowing the screen My fix: Go to administration > system preferences > OPACUserCSS and write: @media (max-width: 609px) { #top-pages > .pagination > .pagination, #bottom-pages > .pagination > .pagination { flex-wrap: wrap; } } #top-pages > .pagination, #bottom-pages > .pagination{ flex-direction: column; }
Created attachment 144198 [details] [review] Fix overflowing pagination in OPAC
Created attachment 144205 [details] [review] Fix overflowing pagination in OPAC
Hi Hammat, I see that you attached a patch, but the bug is not assigned to you and the status was not changed. Could you please check and tell us if this is ready for testing?
Created attachment 144431 [details] [review] Buttons overflow in OPAC search results in mobile view To reproduce: 1- Have at least 10 record of the same type that can be viewed from OPAC 2- Go to administration > system preferences > OPACnumSearchResults and set it to 1 3- Go to the OPAC and search for the type from step 1 4- Notice top and bottom page selections are numbered from 1 to 10 + Next >> + Last >> 5- Inspect the webpage and switch to mobile view 6- Reduce display width and notice the buttons (of step 4) on the right are overflowing the screen 7- Apply the patch 8- compile the .scss file 9- Clear your navigator caches 10- repeat step 3,5 and 6 11- Notice the buttons (of step 4) are no more overflowing the screen
Hi Katrin, yes this is ready for testing now following the previous steps.
Created attachment 144577 [details] [review] Bug 31221: Buttons overflow in OPAC search results in mobile view To reproduce: 1- Have at least 10 record of the same type that can be viewed from OPAC 2- Go to administration > system preferences > OPACnumSearchResults and set it to 1 3- Go to the OPAC and search for the type from step 1 4- Notice top and bottom page selections are numbered from 1 to 10 + Next >> + Last >> 5- Inspect the webpage and switch to mobile view 6- Reduce display width and notice the buttons (of step 4) on the right are overflowing the screen 7- Apply the patch 8- compile the .scss file 'yarn build --view opac' 9- Clear your navigator caches 10- repeat step 3,5 and 6 11- Notice the buttons (of step 4) are no more overflowing the screen
Created attachment 144624 [details] [review] Bug 31221: Buttons overflow in OPAC search results in mobile view To reproduce: 1- Have at least 10 record of the same type that can be viewed from OPAC 2- Go to administration > system preferences > OPACnumSearchResults and set it to 1 3- Go to the OPAC and search for the type from step 1 4- Notice top and bottom page selections are numbered from 1 to 10 + Next >> + Last >> 5- Inspect the webpage and switch to mobile view 6- Reduce display width and notice the buttons (of step 4) on the right are overflowing the screen 7- Apply the patch 8- compile the .scss file 'yarn build --view opac' 9- Clear your navigator caches 10- repeat step 3,5 and 6 11- Notice the buttons (of step 4) are no more overflowing the screen Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
I think we should have Owen blessing on that
I think adding "flex-wrap: wrap" to the pagination links is the correct solution, but I think it should be applied more broadly. I would put it in opac.scss at line 1420: .pagination { flex-wrap: wrap; margin: 0; } } The number of pagination links depends entirely on the number of search results, so we can't assume that they'll overflow at any particular browser width. The wrapping pagination links aren't as clean-looking, but it's a better option than the horizontal scroll. Also: Please be careful about your indentation in patches: We use 4 spaces, not tab characters.
Created attachment 145174 [details] [review] Bug 31221: (fix) Adding "flex-wrap: wrap" to the pagination links in opac.scss
Created attachment 145185 [details] [review] Bug 31221: (fix) Adding "flex-wrap: wrap" to the pagination links in opac.scss
Created attachment 147233 [details] [review] Bug 31221: Buttons overflow in OPAC search results in mobile view To reproduce: 1- Have at least 10 record of the same type that can be viewed from OPAC 2- Go to administration > system preferences > OPACnumSearchResults and set it to 1 3- Go to the OPAC and search for the type from step 1 4- Notice top and bottom page selections are numbered from 1 to 10 + Next >> + Last >> 5- Inspect the webpage and switch to mobile view 6- Reduce display width and notice the buttons (of step 4) on the right are overflowing the screen 7- Apply the patch 8- compile the .scss file 'yarn build --view opac' 9- Clear your navigator caches 10- repeat step 3,5 and 6 11- Notice the buttons (of step 4) are no more overflowing the screen Signed-off-by: Lucas Gass <lucas@bywatersolutions.com> Bug 31221: (fix) Adding "flex-wrap: wrap" to the pagination links in opac.scss Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Pushed to master for 23.05. Nice work everyone, thanks!
Nice work everyone! Pushed to stable for 22.11.x