Bug 31221 - Buttons overflow in OPAC search results in mobile view
Summary: Buttons overflow in OPAC search results in mobile view
Status: RESOLVED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: Main
Hardware: All All
: P5 - low minor (vote)
Assignee: Hammat wele
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2022-07-22 14:14 UTC by Shi Yao Wang
Modified: 2023-12-28 20:44 UTC (History)
8 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Trivial patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
23.05.00,22.11.04


Attachments
Fix overflowing pagination in OPAC (903 bytes, patch)
2022-11-23 11:42 UTC, Hammat wele
Details | Diff | Splinter Review
Fix overflowing pagination in OPAC (903 bytes, patch)
2022-11-23 13:30 UTC, Hammat wele
Details | Diff | Splinter Review
Buttons overflow in OPAC search results in mobile view (1.51 KB, patch)
2022-12-05 19:02 UTC, Hammat wele
Details | Diff | Splinter Review
Bug 31221: Buttons overflow in OPAC search results in mobile view (1.49 KB, patch)
2022-12-14 12:40 UTC, Hammat wele
Details | Diff | Splinter Review
Bug 31221: Buttons overflow in OPAC search results in mobile view (1.55 KB, patch)
2022-12-15 15:59 UTC, Lucas Gass
Details | Diff | Splinter Review
Bug 31221: (fix) Adding "flex-wrap: wrap" to the pagination links in opac.scss (1.29 KB, patch)
2023-01-10 13:36 UTC, Hammat wele
Details | Diff | Splinter Review
Bug 31221: (fix) Adding "flex-wrap: wrap" to the pagination links in opac.scss (1.29 KB, patch)
2023-01-10 13:52 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 31221: Buttons overflow in OPAC search results in mobile view (1.53 KB, patch)
2023-02-23 14:03 UTC, Jonathan Druart
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Shi Yao Wang 2022-07-22 14:14:08 UTC
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;
}
Comment 1 Hammat wele 2022-11-23 11:42:07 UTC
Created attachment 144198 [details] [review]
Fix overflowing pagination in OPAC
Comment 2 Hammat wele 2022-11-23 13:30:47 UTC
Created attachment 144205 [details] [review]
Fix overflowing pagination in OPAC
Comment 3 Katrin Fischer 2022-12-04 12:54:25 UTC
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?
Comment 4 Hammat wele 2022-12-05 19:02:19 UTC
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
Comment 5 Hammat wele 2022-12-05 19:30:49 UTC
Hi Katrin, yes this is ready for testing now following the previous steps.
Comment 6 Hammat wele 2022-12-14 12:40:34 UTC Comment hidden (obsolete)
Comment 7 Lucas Gass 2022-12-15 15:59:24 UTC
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>
Comment 8 Fridolin Somers 2022-12-21 07:48:12 UTC
I think we should have Owen blessing on that
Comment 9 Owen Leonard 2023-01-09 12:36:39 UTC
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.
Comment 10 Hammat wele 2023-01-10 13:36:50 UTC
Created attachment 145174 [details] [review]
Bug 31221: (fix) Adding "flex-wrap: wrap" to the pagination links in opac.scss
Comment 11 Owen Leonard 2023-01-10 13:52:57 UTC
Created attachment 145185 [details] [review]
Bug 31221: (fix) Adding "flex-wrap: wrap" to the pagination links in opac.scss
Comment 12 Jonathan Druart 2023-02-23 14:03:01 UTC
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>
Comment 13 Tomás Cohen Arazi 2023-03-02 14:59:34 UTC
Pushed to master for 23.05.

Nice work everyone, thanks!
Comment 14 Matt Blenkinsop 2023-03-03 13:36:38 UTC
Nice work everyone!

Pushed to stable for 22.11.x