Bug 32341 - Some OPAC tables are not displayed well in mobile mode
Summary: Some OPAC tables are not displayed well in mobile mode
Status: Pushed to oldstable
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: Main
Hardware: All All
: P5 - low normal (vote)
Assignee: Hammat wele
QA Contact: Martin Renvoize
URL:
Keywords:
Depends on:
Blocks: 34730 35015
  Show dependency treegraph
 
Reported: 2022-11-24 21:25 UTC by Hammat wele
Modified: 2023-10-09 16:11 UTC (History)
10 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:
23.11.00,23.05.02,22.11.08


Attachments
The bibliographic display of a record in the opac on a mobile is not correct Items table columns are too thin (38.25 KB, patch)
2022-11-24 22:17 UTC, Hammat wele
Details | Diff | Splinter Review
Bug 32341: Some OPAC tables are not displayed well in mobile mode (42.43 KB, patch)
2022-12-12 22:59 UTC, Hammat wele
Details | Diff | Splinter Review
Bug 32341: Some OPAC tables are not displayed well in mobile mode (42.54 KB, patch)
2022-12-21 13:55 UTC, Paul Derscheid
Details | Diff | Splinter Review
Bug 32341: (Fix) Changing the placement of the button (27.87 KB, patch)
2022-12-22 21:55 UTC, Hammat wele
Details | Diff | Splinter Review
Bug 32341: (follow-up) Alternate button style (4.96 KB, patch)
2023-01-09 19:09 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 32341: (follow-up) Making the remains OPAC tables responsive (27.03 KB, patch)
2023-02-06 18:07 UTC, Hammat wele
Details | Diff | Splinter Review
Bug 32341: (follow-up) Add responsivity to Curbside pickups table and changing button style for finestables (9.24 KB, patch)
2023-02-16 17:34 UTC, Hammat wele
Details | Diff | Splinter Review
Bug 32341: (follow-up) Add responsivity to Curbside pickups table and changing button style for finestables (9.24 KB, patch)
2023-02-16 18:07 UTC, Hammat wele
Details | Diff | Splinter Review
Bug 32341: (follow-up) Add responsivity to Curbside pickups table and changing button style for finestables (10.02 KB, patch)
2023-04-20 19:45 UTC, solene.ngamga
Details | Diff | Splinter Review
Bug 32341: (follow-up) Making the label not showed twice when the tables are in responsive mode (823 bytes, patch)
2023-04-27 21:55 UTC, Hammat wele
Details | Diff | Splinter Review
Bug 32341: Some OPAC tables are not displayed well in mobile mode (42.59 KB, patch)
2023-05-05 01:23 UTC, David Cook
Details | Diff | Splinter Review
Bug 32341: (Fix) Changing the placement of the button (27.92 KB, patch)
2023-05-05 01:23 UTC, David Cook
Details | Diff | Splinter Review
Bug 32341: (follow-up) Alternate button style (5.02 KB, patch)
2023-05-05 01:23 UTC, David Cook
Details | Diff | Splinter Review
Bug 32341: (follow-up) Making the remains OPAC tables responsive (27.08 KB, patch)
2023-05-05 01:23 UTC, David Cook
Details | Diff | Splinter Review
Bug 32341: (follow-up) Add responsivity to Curbside pickups table and changing button style for finestables (10.08 KB, patch)
2023-05-05 01:23 UTC, David Cook
Details | Diff | Splinter Review
Bug 32341: (follow-up) Making the label not showed twice when the tables are in responsive mode (876 bytes, patch)
2023-05-05 01:23 UTC, David Cook
Details | Diff | Splinter Review
Bug 32341: Some OPAC tables are not displayed well in mobile mode (42.59 KB, patch)
2023-06-06 02:20 UTC, David Cook
Details | Diff | Splinter Review
Bug 32341: (Fix) Changing the placement of the button (27.92 KB, patch)
2023-06-06 02:21 UTC, David Cook
Details | Diff | Splinter Review
Bug 32341: (follow-up) Alternate button style (5.02 KB, patch)
2023-06-06 02:21 UTC, David Cook
Details | Diff | Splinter Review
Bug 32341: (follow-up) Making the remains OPAC tables responsive (27.08 KB, patch)
2023-06-06 02:21 UTC, David Cook
Details | Diff | Splinter Review
Bug 32341: (follow-up) Add responsivity to Curbside pickups table and changing button style for finestables (10.08 KB, patch)
2023-06-06 02:21 UTC, David Cook
Details | Diff | Splinter Review
Bug 32341: (follow-up) Making the label not showed twice when the tables are in responsive mode (876 bytes, patch)
2023-06-06 02:21 UTC, David Cook
Details | Diff | Splinter Review
Bug 32341: Some OPAC tables are not displayed well in mobile mode (42.60 KB, patch)
2023-06-08 11:27 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 32341: (Fix) Changing the placement of the button (27.98 KB, patch)
2023-06-08 11:27 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 32341: (follow-up) Alternate button style (5.08 KB, patch)
2023-06-08 11:27 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 32341: (follow-up) Making the remains OPAC tables responsive (27.14 KB, patch)
2023-06-08 11:27 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 32341: (follow-up) Add responsivity to Curbside pickups table and changing button style for finestables (10.14 KB, patch)
2023-06-08 11:27 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 32341: (follow-up) Making the label not showed twice when the tables are in responsive mode (941 bytes, patch)
2023-06-08 11:27 UTC, Martin Renvoize
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Hammat wele 2022-11-24 21:25:10 UTC Comment hidden (obsolete)
Comment 1 Hammat wele 2022-11-24 22:17:30 UTC Comment hidden (obsolete)
Comment 2 Lucas Gass 2022-12-12 18:36:27 UTC
Hey Hammat,

Good to see these mobile bugs being addressed! A couple things:

-Since you are changing a OPAC scss your test plan should probably mention that running 'yarn build --view opac' is required to see the changes.

-The QA tool wants your commit title to be formatted like "Bug XXXXX:"

* Commit title does not start with 'Bug XXXXX: ' - fbed8f082a1
Comment 3 Hammat wele 2022-12-12 22:59:41 UTC Comment hidden (obsolete)
Comment 4 Paul Derscheid 2022-12-21 13:55:08 UTC Comment hidden (obsolete)
Comment 5 Paul Derscheid 2022-12-21 13:56:29 UTC
Works as advertised. However, imho the svgs and the button placement could still be improved.
Comment 6 Paul Derscheid 2022-12-21 14:48:40 UTC
For reference look at this discussion on irc @Hammat:
http://irc.koha-community.org/koha/2022-12-21$=#id_l75
Comment 7 Owen Leonard 2022-12-21 14:55:32 UTC
I would like to see some more iteration of this... I think the last column in the table makes more sense for the placement of the button. Having it's own column (using "details: {type: 'column'}" ) would help prevent it from being too small a target for someone to tap.

The button isn't very clear to me in terms of what it's for... I'm not sure at the moment what to suggest, though.

Is it necessary to add jquery.dataTables.min.css globally? I think our CSS includes the styles we need.
Comment 8 Hammat wele 2022-12-22 21:55:52 UTC Comment hidden (obsolete)
Comment 9 Owen Leonard 2023-01-09 19:09:50 UTC Comment hidden (obsolete)
Comment 10 Owen Leonard 2023-01-09 19:11:49 UTC
I think my patch makes some improvements but I think the user charges page (opac-account.tt) needs some attention. It doesn't look like the table is behaving correctly.
Comment 11 Caroline Cyr La Rose 2023-02-02 17:14:47 UTC
I prefer Owen's buttons because they don't need translation ;)

I was coming to say that I couldn't find the Expand/Unexpand strings in the po files after updating them, but this is better!

Going through the patron account pages with the "Galaxy fold" setting in Chrome, which is the narrowest I found, there are some tables that are missing the expand option. 

- Summary - Checkouts:            OK
- Summary - Relatives' checkouts: OK
- Summary - Overdue:              OK
- Summary - Clubs:                Large table not collapsed
- Summary - Charges:              Narrow table OK
- Summary - Relatives' charges:   Narrow table OK
- Summary - Holds:                OK
- Summary - Recalls:              Large table not collapsed
- Summary - Article requests:     Large table not collapsed
- Charges - (patron's own):       OK (should we show another column rather than the date? Maybe a matter for another bug)
- Charges - (relative's):         Large table not collapsed
- Tags:                           Narrow table OK
- Search history - Catalog:       OK (Should we show another column rather than the date? Maybe a matter for another bug)
- Search history - Authority:     Large table not collapsed
- Checkout history - All:         Large table not collapsed
- Checkout history - Checkouts:   Large table not collapsed
- Checkout history - On-site:     Large table not collapsed
- Recalls history:                Large table not collapsed
- Purchase suggestions:           OK (list view not table)
- Messaging:                      Large table not collapsed
- Lists:                          OK (list view not table)
- ILL requests:                   To check, I have never been able to set up ILL on my installation
- Curbside pickups:               OK

Other pages that have tables (not sure I found all of them)
- Holdings:                       OK
- Subscription (serial):          Large table not collapsed
- Course reserves - Courses:      Large table not collapsed
- Course reserves - Reserves:     Large table not collapsed
- Authority search results:       Large table not collapsed

Should we open another bug for these non-patron-account pages?
Comment 12 Hammat wele 2023-02-06 18:07:39 UTC Comment hidden (obsolete)
Comment 13 Hammat wele 2023-02-16 17:34:55 UTC Comment hidden (obsolete)
Comment 14 Hammat wele 2023-02-16 18:07:35 UTC Comment hidden (obsolete)
Comment 15 solene.ngamga 2023-04-20 19:45:36 UTC Comment hidden (obsolete)
Comment 16 Hammat wele 2023-04-27 21:55:24 UTC Comment hidden (obsolete)
Comment 17 David Cook 2023-05-05 00:22:53 UTC
Upgrading the severity of this one, since this really should be fixed ASAP. 

--

That said, I'm looking at 21.11, and the holdings on the OPAC detail page looks bad too (although in a totally different way).
Comment 18 David Cook 2023-05-05 00:50:14 UTC
root@kohadevbox:koha(bug_32341)$ yarn build --view opac
yarn run v1.22.19
$ yarn css:build && yarn js:build --view opac
$ gulp css && gulp css --view opac
[00:48:48] Using gulpfile /kohadevbox/koha/gulpfile.js
[00:48:48] Starting 'css'...
[00:48:48] Finished 'css' after 12 ms
[00:48:51] Using gulpfile /kohadevbox/koha/gulpfile.js
[00:48:51] Starting 'css'...
[00:48:51] Finished 'css' after 13 ms
$ webpack --mode development --view opac
[webpack-cli] Error: Unknown option '--view'
[webpack-cli] Run 'webpack --help' to see available commands and options
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Comment 19 David Cook 2023-05-05 00:51:42 UTC
Of course, since we .gitignore built files, it's tough to say if anything changed. But it looks like the timestamp on koha-tmpl/opac-tmpl/bootstrap/css/opac.css is different, so we'll assume it worked despite the webpack error.
Comment 20 David Cook 2023-05-05 01:23:40 UTC Comment hidden (obsolete)
Comment 21 David Cook 2023-05-05 01:23:43 UTC Comment hidden (obsolete)
Comment 22 David Cook 2023-05-05 01:23:47 UTC Comment hidden (obsolete)
Comment 23 David Cook 2023-05-05 01:23:50 UTC Comment hidden (obsolete)
Comment 24 David Cook 2023-05-05 01:23:54 UTC Comment hidden (obsolete)
Comment 25 David Cook 2023-05-05 01:23:57 UTC Comment hidden (obsolete)
Comment 26 David Cook 2023-06-02 01:38:47 UTC
Oh looks like I can't QA this one, but it's a very useful one... would be great to get this done.
Comment 27 Martin Renvoize 2023-06-05 14:04:12 UTC
sha1 issues on apply I'm afraid.
Comment 28 David Cook 2023-06-06 02:19:33 UTC
(In reply to Martin Renvoize from comment #27)
> sha1 issues on apply I'm afraid.

Hmm weird. I've rebased, so I'll upload again.
Comment 29 David Cook 2023-06-06 02:20:57 UTC Comment hidden (obsolete)
Comment 30 David Cook 2023-06-06 02:21:01 UTC Comment hidden (obsolete)
Comment 31 David Cook 2023-06-06 02:21:05 UTC Comment hidden (obsolete)
Comment 32 David Cook 2023-06-06 02:21:08 UTC Comment hidden (obsolete)
Comment 33 David Cook 2023-06-06 02:21:12 UTC Comment hidden (obsolete)
Comment 34 David Cook 2023-06-06 02:21:16 UTC Comment hidden (obsolete)
Comment 35 Martin Renvoize 2023-06-08 11:21:50 UTC
The Marc Details view was missed.. but that page is already out of sync so I'm not too worried (I'd like to see the Marc and ISBD views converted to modals that display just the record as opposed to whole pages that try to replicate most of the features of the main detail display)

Works well in all testing, QA scripts are happy.

I'm generally happy to call this PQA, great work!
Comment 36 Martin Renvoize 2023-06-08 11:27:21 UTC
Created attachment 152164 [details] [review]
Bug 32341: Some OPAC tables are not displayed well in mobile mode

Some OPAC tables are not displayed well in mobile mode, it is absolutely necessary to scroll to the right to read the content properly

This patch fix this problem by making the tables responsive

To test:
      1- Go to the OPAC
      2- Open mobile mode
      3- Go to a bibliographic record detail page in the OPAC (opac-detail.pl?biblionumber=X)
      4- Check the Holdings table
            --> the information is not presented in a table as it is when viewing on a laptop or PC browser screen.
            --> we see very narrow columns
            --> unreadable text
      5- Go to to the page 'Summary' (opac-user.pl)
      6- Check the 'Checked out' table
            --> the information is not presented in a table as it is when viewing on a laptop or PC browser screen.
            --> The columns are overflowing to the right
      7- Check the 'Overdue' table
            --> the information is not presented in a table as it is when viewing on a laptop or PC browser screen.
            --> The columns are overflowing to the right
      8- Go to the page 'Charges' (opac-account.pl)
      9- Click on 'Show all transactions'
            --> the information is not presented in a table as it is when viewing on a laptop or PC browser screen.
            --> The columns are overflowing to the right
      10- Go to the page 'Search history' (opac-search-history.pl)
            --> the information is not presented in a table as it is when viewing on a laptop or PC browser screen.
            --> The columns are overflowing to the right
      11- Apply the patch
      12- Execute 'yarn build --view opac'
      13- Clean your cache or open your navigator on private mode (to load updated css files)
      14- Perform previous step (1-10)
      15- Confirm that the tables are now displayed correctly and is now responsive.

Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de>
Signed-off-by: David Cook <dcook@prosentient.com.au>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 37 Martin Renvoize 2023-06-08 11:27:24 UTC
Created attachment 152165 [details] [review]
Bug 32341: (Fix) Changing the placement of the button

This attachment correct the placement of the responsive button. It is now in its own column at the last column and the '+' and '-' are remplaced by 'Expand' and 'Unexpand' to make it more clear.

Signed-off-by: David Cook <dcook@prosentient.com.au>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 38 Martin Renvoize 2023-06-08 11:27:28 UTC
Created attachment 152166 [details] [review]
Bug 32341: (follow-up) Alternate button style

This patch applies a different button style and does a couple of clean
up tasks: Removing the redundant sorting-related CSS and moving the
responsive button CSS to _common.scss where other DataTable-related
styles are found.

I think this different button style is more consistent with the OPAC's
design. It also eliminates untranslatable strings from the CSS.

Signed-off-by: David Cook <dcook@prosentient.com.au>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 39 Martin Renvoize 2023-06-08 11:27:31 UTC
Created attachment 152167 [details] [review]
Bug 32341: (follow-up) Making the remains OPAC tables responsive

Apply the patch and check for the responsivity of the following tables
1- Go to the OPAC
2- Open mobile mode
3- The following tables are not responsive
- Summary - Clubs
- Summary - Recalls
- Summary - Article requests
- Charges - (relative's)
- Search history - Authority
- Checkout history - All
- Checkout history - Checkouts
- Checkout history - On-site
- Recalls history
- Messaging
- Subscription (serial)
- Course reserves - Courses
- Course reserves - Reserves
- Authority search results
4- Apply the patch
5- Execute 'yarn build --view opac'
6- Clean your cache or open your navigator on private mode (to load updated css files)
7- Perform previous step (1-3)
8- Confirm that the tables are now displayed correctly and is now responsive.

Signed-off-by: David Cook <dcook@prosentient.com.au>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 40 Martin Renvoize 2023-06-08 11:27:34 UTC
Created attachment 152168 [details] [review]
Bug 32341: (follow-up) Add responsivity to Curbside pickups table and changing button style for finestables

To activate Curbside pickups
    1- Enable the CurbsidePickup system preference
        1.1 Go to Administration > Global system preferences
        1.2 Search for CurbsidePickup
        1.3 Change the value for 'Enable'
        1.4 Click on 'Save all circulation preferences'
    2- Configure time slots for at least one library
        2.1 Go to Administration > Curbside pickup
        2.2 Fill out the form for Centerville (or another library)
            Enable: Check
            Pickup interval: 10 (or other)
            Maximum boss per interval: 3 (or other)
            Patron-scheduled pickup: Check
            Enable for waiting holds only: DO NOT check
        2.3 Add a time slot
            In 'New slot', enter
                Monday
                From: 10:00
                To: 12:00
            Click on 'Add'
    3- Make an appointment from the OPAC
        3.1 Go to OPAC
        3.2 Open mobile mode
        3.3 Connect with a user
        3.4 Click on 'Curbside pickups'
        3.5 Choose the library in 'Pick a library'
        3.6 Choose a date in 'Pickup date'
        3.7 Choose a time range in 'Select a time'
        3.8 Click on 'Schedule pickup'
            => Notice The table is not responsive
    4- Apply the patch
    5- Execute 'yarn build --view opac'
    6- Clean your cache or open your navigator on private mode (to load updated css files)
    7- Perform step 3.1, 3.2, 3.3, 3.4,
    8- click on 'Your pickups'
     => Confirm that the CurbsidePickup table are now displayed correctly and is now responsive.
    9- Click on 'Charges'
     => Confirm that the Charges table are now displayed correctly and is now responsive.

I correct a little bug. The "suspend_hold" button did not work anymore. This change resets it to it's original state.

Signed-off-by: David Cook <dcook@prosentient.com.au>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 41 Martin Renvoize 2023-06-08 11:27:38 UTC
Created attachment 152169 [details] [review]
Bug 32341: (follow-up) Making the label not showed twice when the tables are in responsive mode

Signed-off-by: David Cook <dcook@prosentient.com.au>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 42 Tomás Cohen Arazi 2023-06-08 11:33:26 UTC
Pushed to master for 23.11.

Nice work everyone, thanks!
Comment 43 Martin Renvoize 2023-07-12 07:01:37 UTC
Thanks for all the hard work!

Pushed to 23.05.x for the next release
Comment 44 Matt Blenkinsop 2023-07-12 09:16:56 UTC
Nice work everyone!

Pushed to oldstable for 22.11.x