On the OPAC the browse shelf feature is not responsive. To recreate: 1. Turn on OPACShelfBrowser. 2. If youre using test data you will have to give some items call numbers. I did: update items set itemcallnumber = 'acallnumber'; 3. It will also be best if you add some cover images. 4. Go to an item detail page and Browse Shelf. 5. The feature looks good until the viewport is about 1700px or less.
Created attachment 113901 [details] [review] Bug 25267: Make shelfbrowser responsive This patch is an attempt to fix some of the problems with shelf browser at smaller screen sizes. Test plan: 1. Turn on OPACShelfBrowser. 2. If youre using test data you will have to give some items call numbers. I did: update items set itemcallnumber = 'acallnumber'; 3. It will also be best if you add some cover images. 4. Go to an item detail page and Browse Shelf. 5. The feature looks good until the viewport is about 1700px or less. 6. Apply patch 7. Regenerate OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface) 8. Try the shelf browse at all screen sizes and make sure everything still works. 9. Test the controls (previous, next, and close), make sure they still work
Created attachment 114242 [details] [review] Bug 25267: Make shelfbrowser responsive This patch is an attempt to fix some of the problems with shelf browser at smaller screen sizes. Test plan: 1. Turn on OPACShelfBrowser. 2. If youre using test data you will have to give some items call numbers. I did: update items set itemcallnumber = 'acallnumber'; 3. It will also be best if you add some cover images. 4. Go to an item detail page and Browse Shelf. 5. The feature looks good until the viewport is about 1700px or less. 6. Apply patch 7. Regenerate OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface) 8. Try the shelf browse at all screen sizes and make sure everything still works. 9. Test the controls (previous, next, and close), make sure they still work Signed-off-by: David Nind <david@davidnind.com>
I have signed off, but I think I prefer the shelf browser being on one line (rather than two) for "normal" browser widths. A great improvement for the smaller widths - I checked using Firefox and Google Chrome on Ubuntu.
Owen, could you please rebase and take a look at David's comment? Thank you!
We have noticed this issue as well. It was flagged because when any of the shelf browser elements end up outside of the Holdings frame, the hyperlinks do not work - making part of the shelf browser unusable.
Created attachment 135632 [details] [review] Bug 25267: Impove shelf browser responsiveness Test plan: 1. Turn on OPACShelfBrowser. 2. If youre using test data you will have to give some items call numbers. I did: update items set itemcallnumber = 'acallnumber'; 3. It will also be best if you add some cover images. 4. Go to an item detail page and Browse Shelf. 5. The feature looks good until the viewport is about 1700px or less. 6. Apply patch 7. Regenerate OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface) 8. Try the shelf browse at all screen sizes and make sure everything still works. 9. Test the controls (previous, next, and close), make sure they still work
Created attachment 135634 [details] [review] Bug 25267: (follow-up) Improve title text responsiveness
I have installed into sandbox and I get this error when I try to browse (itemcallnumber is filled with value 302) https://staff-orex25267.sandbox.bywatersolutions.com/ Can't call method "itemnumber" on unblessed reference at /kohadevbox/koha/opac/opac-detail.pl line 1099 in (eval) at /kohadevbox/koha/opac/opac-detail.pl line 1099 1096: ); 1097: 1098: # in which tab shelf browser should open ? 1099: if (grep { $starting_itemnumber == $_->itemnumber } @itemloop) { 1100: $template->param(shelfbrowser_tab => 'holdings'); 1101: } else { 1102: $template->param(shelfbrowser_tab => 'otherholdings'); in CGI::Compile::ROOT::kohadevbox_koha_opac_opac_2ddetail_2epl::__ANON__ at /kohadevbox/koha/opac/opac-detail.pl line 2 1: #!/usr/bin/perl 2: 3: # Copyright 2000-2002 Katipo Communications 4: # Copyright 2010 BibLibre 5: # Copyright 2011 KohaAloha, NZ Hide function arguments $_[0] 'CGI::Compile=HASH(0x55b3af97fd90)' $_[1] '' $_[2] '/kohadevbox/koha/opac/opac-detail.pl' $_[3] '/kohadevbox/koha/opac' $_[4] 'ARRAY(0x55b3b1e0fc88)'
(In reply to Hugo Agud from comment #8) > Can't call method "itemnumber" on unblessed reference at > /kohadevbox/koha/opac/opac-detail.pl line 1099 I get the same thing.
Bug 31396 seems to have corrected that problem (Can't call method "itemnumber"). Maybe this would now work.
Patch no longer applies root@kohadevbox:koha(bz25267)$ git bz apply 25267 Bug 25267 - OPAC browse shelf feature is not responsive 135632 - Bug 25267: Impove shelf browser responsiveness 135634 - Bug 25267: (follow-up) Improve title text responsiveness Apply? [(y)es, (n)o, (i)nteractive] y Applying: Bug 25267: Impove shelf browser responsiveness .git/rebase-apply/patch:60: trailing whitespace. warning: 1 line adds whitespace errors. Using index info to reconstruct a base tree... M koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss M koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss M koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc .git/rebase-apply/patch:60: trailing whitespace. warning: 1 line applied after fixing whitespace errors. Falling back to patching base and 3-way merge... Auto-merging koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc Auto-merging koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss CONFLICT (content): Merge conflict in koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss Auto-merging koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss error: Failed to merge in the changes. Patch failed at 0001 Bug 25267: Impove shelf browser responsiveness
Created attachment 143876 [details] [review] Bug 25267: Impove shelf browser responsiveness Test plan: 1. Turn on OPACShelfBrowser. 2. If youre using test data you will have to give some items call numbers. I did: update items set itemcallnumber = 'acallnumber'; 3. It will also be best if you add some cover images. 4. Go to an item detail page and Browse Shelf. 5. The feature looks good until the viewport is about 1700px or less. 6. Apply patch 7. Regenerate OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface) 8. Try the shelf browse at all screen sizes and make sure everything still works. 9. Test the controls (previous, next, and close), make sure they still work
Created attachment 143877 [details] [review] Bug 25267: (follow-up) Improve title text responsiveness
Rebased and fixed conflict in opac.scss.
There is a build error when regenerating the CSS for the OPAC. This is happening as well on master, so not caused by this bug. Once resolved, I'll have a go at testing again. yarn build --view opac yarn run v1.22.19 $ node_modules/.bin/gulp build --view opac [22:33:59] Using gulpfile /kohadevbox/koha/gulpfile.js [22:33:59] Starting 'build'... Error in plugin 'sass' Message: koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss Error: File to import not found or unreadable: ../../../../../node_modules/bootstrap/scss/custom-forms. on line 52 of koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss from line 1 of koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >> @import "../../../../../node_modules/bootstrap/scss/custom-forms"; ^ [22:33:59] Finished 'build' after 91 ms Done in 2.42s.
(In reply to David Nind from comment #15) > Error: File to import not found or unreadable: > ../../../../../node_modules/bootstrap/scss/custom-forms. Bug 32030 - ERM - upgraded the Bootstrap Node module to 5.2, but the OPAC still expects 4.5.2.
Created attachment 143927 [details] Screenshot - shelf browser is now vertical (after patch is applied) The shelf browser is now vertical at any browser width - see the screenshot.
Testing notes (using KTD): 1. As this patch now depends on bug 32212, need to yarn install then yarn build --view opac
I see this bug has stalled out but I am still experiencing issues with the shelf browser. It works fine on the monitor at my desk, but the desk computers have smaller screens and the shelf browser will not advance unless I zoom out to 90%, which makes it hard to show students.
Created attachment 159334 [details] [review] Bug 25267: (follow-up) Additional changes to improve responsiveness This patch adjusts the shelf browser markup a little bit and adds more responsive breakpoints for better accommodation of various browser widths. To test, apply the patch and rebuild the OPAC CSS and test the shelf browser at various browser widths.
Created attachment 159368 [details] [review] Bug 25267: Impove shelf browser responsiveness Test plan: 1. Turn on OPACShelfBrowser. 2. If youre using test data you will have to give some items call numbers. I did: update items set itemcallnumber = 'acallnumber'; 3. It will also be best if you add some cover images. 4. Go to an item detail page and Browse Shelf. 5. The feature looks good until the viewport is about 1700px or less. 6. Apply patch 7. Regenerate OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface) 8. Try the shelf browse at all screen sizes and make sure everything still works. 9. Test the controls (previous, next, and close), make sure they still work Signed-off-by: David Nind <david@davidnind.com>
Created attachment 159369 [details] [review] Bug 25267: (follow-up) Improve title text responsiveness Signed-off-by: David Nind <david@davidnind.com>
Created attachment 159370 [details] [review] Bug 25267: (follow-up) Additional changes to improve responsiveness This patch adjusts the shelf browser markup a little bit and adds more responsive breakpoints for better accommodation of various browser widths. To test, apply the patch and rebuild the OPAC CSS and test the shelf browser at various browser widths. Signed-off-by: David Nind <david@davidnind.com>
Applying: Bug 25267: (follow-up) Additional changes to improve responsiveness error: sha1 information is lacking or useless (koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss).
Created attachment 160937 [details] [review] Bug 25267: Impove shelf browser responsiveness Test plan: 1. Turn on OPACShelfBrowser. 2. If youre using test data you will have to give some items call numbers. I did: update items set itemcallnumber = 'acallnumber'; 3. It will also be best if you add some cover images. 4. Go to an item detail page and Browse Shelf. 5. The feature looks good until the viewport is about 1700px or less. 6. Apply patch 7. Regenerate OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface) 8. Try the shelf browse at all screen sizes and make sure everything still works. 9. Test the controls (previous, next, and close), make sure they still work Signed-off-by: David Nind <david@davidnind.com>
Created attachment 160938 [details] [review] Bug 25267: (follow-up) Improve title text responsiveness Signed-off-by: David Nind <david@davidnind.com>
Created attachment 160939 [details] [review] Bug 25267: (follow-up) Additional changes to improve responsiveness This patch adjusts the shelf browser markup a little bit and adds more responsive breakpoints for better accommodation of various browser widths. To test, apply the patch and rebuild the OPAC CSS and test the shelf browser at various browser widths. Signed-off-by: David Nind <david@davidnind.com>
Created attachment 161169 [details] [review] Bug 25267: Impove shelf browser responsiveness Test plan: 1. Turn on OPACShelfBrowser. 2. If youre using test data you will have to give some items call numbers. I did: update items set itemcallnumber = 'acallnumber'; 3. It will also be best if you add some cover images. 4. Go to an item detail page and Browse Shelf. 5. The feature looks good until the viewport is about 1700px or less. 6. Apply patch 7. Regenerate OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface) 8. Try the shelf browse at all screen sizes and make sure everything still works. 9. Test the controls (previous, next, and close), make sure they still work Signed-off-by: David Nind <david@davidnind.com> Signed-off-by: Andreas Roussos <a.roussos@dataly.gr>
Created attachment 161170 [details] [review] Bug 25267: (follow-up) Improve title text responsiveness Signed-off-by: David Nind <david@davidnind.com> Signed-off-by: Andreas Roussos <a.roussos@dataly.gr>
Created attachment 161171 [details] [review] Bug 25267: (follow-up) Additional changes to improve responsiveness This patch adjusts the shelf browser markup a little bit and adds more responsive breakpoints for better accommodation of various browser widths. To test, apply the patch and rebuild the OPAC CSS and test the shelf browser at various browser widths. Signed-off-by: David Nind <david@davidnind.com> Signed-off-by: Andreas Roussos <a.roussos@dataly.gr>
Created attachment 161174 [details] Screenshot - Unable to click on the rightmost shelf browser item cover
Created attachment 161175 [details] Video - Unable to click on the rightmost shelf browser item cover
I've signed off the current patch set, but during testing I found out that at viewport widths between approximately 1040 and 1120 px the rightmost shelf browser item is shown outside of the Holdings frame, and its cover image and title links are inoperable. This is happening because the OPAC sidebar's CSS Flex item (.col-lg-3 class) is extending itself vertically all the way to the bottom of the parent .row class container, thus overlapping the protruding shelf browser Flex item (.col-lg-9 class) due to the stacking order (the sidebar <div> appears after the shelf browser <div> in the HTML code). I've attached an image and a short video to illustrate my point.
Created attachment 161176 [details] [review] Bug 25267: (follow-up) Prevent OPAC sidebar overlap At viewports between approx. 1040 and 1120 pixels wide, the rightmost item in the shelf browser is shown outside of the Holdings frame and its cover image and title hyperlinks are inoperable. This patch fixes that by preventing the OPAC sidebar CSS Flex item (.col-lg-3 class) from extending itself vertically all the way to the bottom of the parent .row class container, thus overlapping the protruding shelf browser Flex item (.col-lg-9 class) due to the stacking order. Test plan: Apply the patch, rebuild the OPAC CSS and check whether the cover image and title hyperlinks for the rightmost (7th) shelf browser item work at various browser widths. Thanks-to: https://stackoverflow.com/a/40156422
Created attachment 161233 [details] Screenshot bug with patch
We tried to apply and we discovered that it's still broken but in a different way (see screenshot)
I tried on firefox.
Created attachment 161234 [details] Page with the bug With Opera I have the same issue. (For the size of the web page see the screenshot)
(In reply to andrea.capitanio from comment #36) > We tried to apply and we discovered that it's still broken but in a > different way (see screenshot) (In reply to andrea.capitanio from comment #37) > I tried on firefox. Hi Andrea, thanks for testing this! May I ask if you rebuilt the OPAC CSS after applying the patches? Because I was able to reproduce what you describe by skipping that part of the Test plan(s). If I run `yarn build` after I apply the four patches in my dev setup, then the Shelf browser behaves correctly on Firefox.
(In reply to Loïc from comment #38) > Created attachment 161234 [details] > Page with the bug > > With Opera I have the same issue. > (For the size of the web page see the screenshot) Hi, Loïc! Thanks for your feedback, however I think the screenshot you provided (attachment 161234 [details]) was uploaded in error? When I preview it, I don't see anything Koha-related... Also, please see my previous reply to Andrea about the need to run the `yarn build` command to regenerate the OPAC CSS once you've applied the patches from this Bug report. Can you confirm you performed this step? If you do indeed face a problem when using Opera after all, let us know of the specifics of your setup (O/S, Opera version, etc.) and we'll see if more CSS wizardry is required for the Shelf browser to work properly in that web browser.
(In reply to Andreas Roussos from comment #39) > May I ask if you rebuilt the OPAC CSS after applying the patches? > Because I was able to reproduce what you describe by skipping that part > of the Test plan(s). > If I run `yarn build` after I apply the four patches in my dev setup, > then the Shelf browser behaves correctly on Firefox. Hi, I was guiding Andrea and Loïc to test patches using sandboxes and we ran the build_css_and_js command. The output showed it ran yarn css:build && yarn js:build and gulp css && gulp css --view opac So it looked like something equivalent to yarn build. Ok I retried on a sandbox and locally and the sandbox have a problem with this. I'll report that. Weird thing is that it was broken only on firefox, on a chromium based browser I get the same locally and on a sandbox. Which matches what Loic reported. (In reply to Andreas Roussos from comment #40) > Thanks for your feedback, however I think the screenshot you provided > (attachment 161234 [details]) was uploaded in error? When I preview it, > I don't see anything Koha-related... Indeed, we got mixed up when uploading the screenshot. Here is the issue: https://pic.infini.fr/ZrvWZPsn/C0yxhGL6.png At width 1050, *when having hit "previous" once to make the "next" button appear* Seen on Firefox (locally) and Chromium (locally and even on sandboxes)