Bug 25267 - OPAC browse shelf feature is not responsive
Summary: OPAC browse shelf feature is not responsive
Status: Failed QA
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: Main
Hardware: All All
: P5 - low normal with 10 votes (vote)
Assignee: Lucas Gass
QA Contact: Testopia
URL:
Keywords:
Depends on: 32212
Blocks:
  Show dependency treegraph
 
Reported: 2020-04-23 15:39 UTC by Lucas Gass
Modified: 2024-02-01 07:33 UTC (History)
11 users (show)

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


Attachments
Bug 25267: Make shelfbrowser responsive (7.62 KB, patch)
2020-11-20 18:27 UTC, Lucas Gass
Details | Diff | Splinter Review
Bug 25267: Make shelfbrowser responsive (7.67 KB, patch)
2020-12-07 19:17 UTC, David Nind
Details | Diff | Splinter Review
Bug 25267: Impove shelf browser responsiveness (7.52 KB, patch)
2022-06-02 22:04 UTC, Lucas Gass
Details | Diff | Splinter Review
Bug 25267: (follow-up) Improve title text responsiveness (793 bytes, patch)
2022-06-02 22:33 UTC, Lucas Gass
Details | Diff | Splinter Review
Bug 25267: Impove shelf browser responsiveness (7.54 KB, patch)
2022-11-14 21:45 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 25267: (follow-up) Improve title text responsiveness (793 bytes, patch)
2022-11-14 21:45 UTC, Katrin Fischer
Details | Diff | Splinter Review
Screenshot - shelf browser is now vertical (after patch is applied) (364.07 KB, image/png)
2022-11-15 19:36 UTC, David Nind
Details
Bug 25267: (follow-up) Additional changes to improve responsiveness (4.53 KB, patch)
2023-11-29 13:37 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 25267: Impove shelf browser responsiveness (7.59 KB, patch)
2023-11-29 19:58 UTC, David Nind
Details | Diff | Splinter Review
Bug 25267: (follow-up) Improve title text responsiveness (841 bytes, patch)
2023-11-29 19:58 UTC, David Nind
Details | Diff | Splinter Review
Bug 25267: (follow-up) Additional changes to improve responsiveness (4.58 KB, patch)
2023-11-29 19:58 UTC, David Nind
Details | Diff | Splinter Review
Bug 25267: Impove shelf browser responsiveness (7.60 KB, patch)
2024-01-12 12:04 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 25267: (follow-up) Improve title text responsiveness (841 bytes, patch)
2024-01-12 12:04 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 25267: (follow-up) Additional changes to improve responsiveness (4.59 KB, patch)
2024-01-12 12:04 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 25267: Impove shelf browser responsiveness (7.66 KB, patch)
2024-01-19 08:35 UTC, Andreas Roussos
Details | Diff | Splinter Review
Bug 25267: (follow-up) Improve title text responsiveness (894 bytes, patch)
2024-01-19 08:35 UTC, Andreas Roussos
Details | Diff | Splinter Review
Bug 25267: (follow-up) Additional changes to improve responsiveness (4.64 KB, patch)
2024-01-19 08:35 UTC, Andreas Roussos
Details | Diff | Splinter Review
Screenshot - Unable to click on the rightmost shelf browser item cover (203.76 KB, image/png)
2024-01-19 08:37 UTC, Andreas Roussos
Details
Video - Unable to click on the rightmost shelf browser item cover (207.76 KB, video/mp4)
2024-01-19 08:38 UTC, Andreas Roussos
Details
Bug 25267: (follow-up) Prevent OPAC sidebar overlap (1.72 KB, patch)
2024-01-19 08:41 UTC, Andreas Roussos
Details | Diff | Splinter Review
Screenshot bug with patch (176.88 KB, image/png)
2024-01-22 10:49 UTC, andrea.capitanio
Details
Page with the bug (45.84 KB, image/png)
2024-01-22 11:04 UTC, Loïc
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Lucas Gass 2020-04-23 15:39:24 UTC
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.
Comment 1 Lucas Gass 2020-11-20 18:27:57 UTC Comment hidden (obsolete)
Comment 2 David Nind 2020-12-07 19:17:34 UTC Comment hidden (obsolete)
Comment 3 David Nind 2020-12-07 19:19:30 UTC
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.
Comment 4 Katrin Fischer 2021-01-10 22:32:03 UTC
Owen, could you please rebase and take a look at David's comment? Thank you!
Comment 5 Aude Charillon 2022-03-09 17:19:51 UTC
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.
Comment 6 Lucas Gass 2022-06-02 22:04:11 UTC Comment hidden (obsolete)
Comment 7 Lucas Gass 2022-06-02 22:33:50 UTC
Created attachment 135634 [details] [review]
Bug 25267: (follow-up) Improve title text responsiveness
Comment 8 Hugo Agud 2022-08-31 10:40:57 UTC
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)'
Comment 9 Owen Leonard 2022-09-02 16:33:14 UTC
(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.
Comment 10 Blou 2022-10-07 13:51:03 UTC
Bug 31396 seems to have corrected that problem (Can't call method "itemnumber").  Maybe this would now work.
Comment 11 David Nind 2022-10-07 20:18:03 UTC
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
Comment 12 Katrin Fischer 2022-11-14 21:45:10 UTC
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
Comment 13 Katrin Fischer 2022-11-14 21:45:16 UTC
Created attachment 143877 [details] [review]
Bug 25267: (follow-up) Improve title text responsiveness
Comment 14 Katrin Fischer 2022-11-14 21:45:54 UTC
Rebased and fixed conflict in opac.scss.
Comment 15 David Nind 2022-11-14 22:45:29 UTC
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.
Comment 16 Owen Leonard 2022-11-15 15:45:29 UTC
(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.
Comment 17 David Nind 2022-11-15 19:36:07 UTC
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.
Comment 18 David Nind 2022-11-15 19:38:21 UTC
Testing notes (using KTD):

1. As this patch now depends on bug 32212, need to yarn install then yarn build --view opac
Comment 19 ashley.day 2023-11-29 11:55:23 UTC
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.
Comment 20 Owen Leonard 2023-11-29 13:37:21 UTC
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.
Comment 21 David Nind 2023-11-29 19:58:32 UTC
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>
Comment 22 David Nind 2023-11-29 19:58:35 UTC
Created attachment 159369 [details] [review]
Bug 25267: (follow-up) Improve title text responsiveness

Signed-off-by: David Nind <david@davidnind.com>
Comment 23 David Nind 2023-11-29 19:58:38 UTC
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>
Comment 24 Marcel de Rooy 2024-01-12 09:46:59 UTC
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).
Comment 25 Owen Leonard 2024-01-12 12:04:01 UTC
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>
Comment 26 Owen Leonard 2024-01-12 12:04:04 UTC
Created attachment 160938 [details] [review]
Bug 25267: (follow-up) Improve title text responsiveness

Signed-off-by: David Nind <david@davidnind.com>
Comment 27 Owen Leonard 2024-01-12 12:04:06 UTC
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>
Comment 28 Andreas Roussos 2024-01-19 08:35:33 UTC
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>
Comment 29 Andreas Roussos 2024-01-19 08:35:36 UTC
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>
Comment 30 Andreas Roussos 2024-01-19 08:35:39 UTC
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>
Comment 31 Andreas Roussos 2024-01-19 08:37:43 UTC
Created attachment 161174 [details]
Screenshot - Unable to click on the rightmost shelf browser item cover
Comment 32 Andreas Roussos 2024-01-19 08:38:06 UTC
Created attachment 161175 [details]
Video - Unable to click on the rightmost shelf browser item cover
Comment 33 Andreas Roussos 2024-01-19 08:38:35 UTC
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.
Comment 34 Andreas Roussos 2024-01-19 08:41:30 UTC
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
Comment 35 andrea.capitanio 2024-01-22 10:49:50 UTC
Created attachment 161233 [details]
Screenshot bug with patch
Comment 36 andrea.capitanio 2024-01-22 10:53:32 UTC
We tried to apply and we discovered that it's still broken but in a different way (see screenshot)
Comment 37 andrea.capitanio 2024-01-22 11:02:12 UTC
I tried on firefox.
Comment 38 Loïc 2024-01-22 11:04:31 UTC
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)
Comment 39 Andreas Roussos 2024-01-22 15:48:51 UTC
(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.
Comment 40 Andreas Roussos 2024-01-22 16:04:52 UTC
(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.
Comment 41 Victor Grousset/tuxayo 2024-01-24 01:25:10 UTC
(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)