[Bug 31221] New: Buttons overflow in opac search results in mobile view
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 Bug ID: 31221 Summary: Buttons overflow in opac search results in mobile view Change sponsored?: --- Product: Koha Version: master Hardware: All OS: All Status: NEW Severity: enhancement Priority: P5 - low Component: OPAC Assignee: oleonard@myacpl.org Reporter: shi-yao.wang@inLibro.com QA Contact: testopia@bugs.koha-community.org 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; } -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 Shi Yao Wang <shi-yao.wang@inLibro.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |caroline.cyr-la-rose@inlibr | |o.com, | |philippe.blouin@inlibro.com | |, shi-yao.wang@inLibro.com -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Summary|Buttons overflow in opac |Buttons overflow in OPAC |search results in mobile |search results in mobile |view |view -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 Hammat wele <hammat.wele@inlibro.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Assignee|oleonard@myacpl.org |hammat.wele@inlibro.com CC| |hammat.wele@inlibro.com -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 --- Comment #1 from Hammat wele <hammat.wele@inlibro.com> --- Created attachment 144198 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=144198&action=edit Fix overflowing pagination in OPAC -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 Hammat wele <hammat.wele@inlibro.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #144198|0 |1 is obsolete| | --- Comment #2 from Hammat wele <hammat.wele@inlibro.com> --- Created attachment 144205 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=144205&action=edit Fix overflowing pagination in OPAC -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 --- Comment #3 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- 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? -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 Hammat wele <hammat.wele@inlibro.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #144205|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 --- Comment #4 from Hammat wele <hammat.wele@inlibro.com> --- Created attachment 144431 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=144431&action=edit 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 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 Hammat wele <hammat.wele@inlibro.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|NEW |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 --- Comment #5 from Hammat wele <hammat.wele@inlibro.com> --- Hi Katrin, yes this is ready for testing now following the previous steps. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 Hammat wele <hammat.wele@inlibro.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #144431|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 --- Comment #6 from Hammat wele <hammat.wele@inlibro.com> --- Created attachment 144577 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=144577&action=edit 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 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 Lucas Gass <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 Lucas Gass <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #144577|0 |1 is obsolete| | --- Comment #7 from Lucas Gass <lucas@bywatersolutions.com> --- Created attachment 144624 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=144624&action=edit 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> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 Fridolin Somers <fridolin.somers@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |fridolin.somers@biblibre.co | |m, oleonard@myacpl.org --- Comment #8 from Fridolin Somers <fridolin.somers@biblibre.com> --- I think we should have Owen blessing on that -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Failed QA --- Comment #9 from Owen Leonard <oleonard@myacpl.org> --- 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. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 --- Comment #10 from Hammat wele <hammat.wele@inlibro.com> --- Created attachment 145174 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=145174&action=edit Bug 31221: (fix) Adding "flex-wrap: wrap" to the pagination links in opac.scss -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 Hammat wele <hammat.wele@inlibro.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Failed QA |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Patch complexity|--- |Trivial patch Status|Needs Signoff |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #145174|0 |1 is obsolete| | --- Comment #11 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 145185 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=145185&action=edit Bug 31221: (fix) Adding "flex-wrap: wrap" to the pagination links in opac.scss -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 David Cook <dcook@prosentient.com.au> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |dcook@prosentient.com.au -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 Jonathan Druart <jonathan.druart+koha@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Passed QA -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 Jonathan Druart <jonathan.druart+koha@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #144624|0 |1 is obsolete| | Attachment #145185|0 |1 is obsolete| | --- Comment #12 from Jonathan Druart <jonathan.druart+koha@gmail.com> --- Created attachment 147233 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=147233&action=edit 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> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 Tomás Cohen Arazi <tomascohen@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Passed QA |Pushed to master Version(s)| |23.05.00 released in| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 --- Comment #13 from Tomás Cohen Arazi <tomascohen@gmail.com> --- Pushed to master for 23.05. Nice work everyone, thanks! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Pushed to master |Pushed to stable Version(s)|23.05.00 |23.05.00,22.11.04 released in| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 --- Comment #14 from Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com> --- Nice work everyone! Pushed to stable for 22.11.x -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Severity|enhancement |normal CC| |martin.renvoize@ptfs-europe | |.com -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=31221 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Severity|normal |minor -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org