Bug 27814

Summary: Improve responsive behavior of the user page in the OPAC
Product: Koha Reporter: Owen Leonard <oleonard>
Component: OPACAssignee: Owen Leonard <oleonard>
Status: CLOSED FIXED QA Contact: Testopia <testopia>
Severity: enhancement    
Priority: P5 - low CC: dcook, fridolin.somers, lucas
Version: Main   
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: Small patch
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
21.05.00
Bug Depends on: 20168    
Bug Blocks:    
Attachments: Bug 27814: Improve responsive behavior of the user page in the OPAC
Bug 27814: Improve responsive behavior of the user page in the OPAC
Bug 27814: Improve responsive behavior of the user page in the OPAC
Bug 27814: (follow-up) Adjust container padding, button flow
Bug 27814: (follow-up) Adjust container padding, button flow
Bug 27814: Improve responsive behavior of the user page in the OPAC
Bug 27814: (follow-up) Adjust container padding, button flow
Bug 27814: Improve responsive behavior of the user page in the OPAC
Bug 27814: (follow-up) Adjust container padding, button flow

Description Owen Leonard 2021-02-26 19:11:57 UTC
I'd like to make some changes to the way the "your summary" page works at lower browser widths. I think the responsive behavior can be improved.
Comment 1 Owen Leonard 2021-02-26 19:30:54 UTC Comment hidden (obsolete)
Comment 2 Lucas Gass 2021-03-04 00:22:25 UTC
Owen,

Two things I encountered here:

On smaller screens (500px or less) the .dt-buttons within the toolbar become hard to see. This is only on the checkout's tab. 

Also the iCal button ins't inside of a button element so it doesn't line up nicely with the other buttons inside that toolbar.

https://snipboard.io/O0Qkvd.jpg
Comment 3 Owen Leonard 2021-03-04 15:32:42 UTC
Created attachment 117737 [details] [review]
Bug 27814: Improve responsive behavior of the user page in the OPAC

This patch makes minor changes to OPAC CSS in order to improve the way
the logged-in user's "your account" page works at narrower browser
widths.

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

 - Log in to the OPAC as a user who has multiple checkouts.
 - Test the page at various browser widths, from > 1200 pixels wide to <
   300 pixels wide. Your browser's built-in responsive design mode,
   found in developer tools, can make these measurements easier.
 - At "phone-size" width the tabs ("Checked out," "Overdue," etc) should
   start displaying full-width.
 - The DataTable controls at the top of the checkouts table should
    adapt well as the browser width changes.
 - At narrower widths the tables on this page should display much better
   than they did before the patch: They should expand to fit the width
   of the page.

Edit: Tweaked the display property of the table search field at narrower
browser widths; Converted iCal download link to button to match other
elements in the toolbar.
Comment 4 Lucas Gass 2021-03-04 16:40:11 UTC
Created attachment 117753 [details] [review]
Bug 27814: Improve responsive behavior of the user page in the OPAC

This patch makes minor changes to OPAC CSS in order to improve the way
the logged-in user's "your account" page works at narrower browser
widths.

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

 - Log in to the OPAC as a user who has multiple checkouts.
 - Test the page at various browser widths, from > 1200 pixels wide to <
   300 pixels wide. Your browser's built-in responsive design mode,
   found in developer tools, can make these measurements easier.
 - At "phone-size" width the tabs ("Checked out," "Overdue," etc) should
   start displaying full-width.
 - The DataTable controls at the top of the checkouts table should
    adapt well as the browser width changes.
 - At narrower widths the tables on this page should display much better
   than they did before the patch: They should expand to fit the width
   of the page.

Edit: Tweaked the display property of the table search field at narrower
browser widths; Converted iCal download link to button to match other
elements in the toolbar.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 5 Katrin Fischer 2021-03-04 21:32:58 UTC
I've tried several times with yarn build --view opac and restart_all... but I fail to see a big difference.

Also the table options (Print etc.) fail to wrap at some point for me.

Could I ask you to try this out with German? The English link descriptions are all super short in this case... and I just now the situation will be very different with German. (Renew = Verlängern, Print = Drucken etc.)
Comment 6 Katrin Fischer 2021-03-04 21:36:41 UTC
Also looking at it I wonder if we don't give up too much space left and right with the current layout on smaller screens... should we kill/minimize that?
Comment 7 Owen Leonard 2021-03-05 12:26:55 UTC
(In reply to Katrin Fischer from comment #5)
> Could I ask you to try this out with German?

Here's how it looks to me:

https://zivotdesign.com/p/view.php?p=16149471271240
Comment 8 Owen Leonard 2021-03-05 13:47:36 UTC
Created attachment 117854 [details] [review]
Bug 27814: (follow-up) Adjust container padding, button flow

This patch makes minor changes to the SCSS so that the user summary
page's DataTables button flow better at very narrow widths.

Also, the main container should have less padding at narrow widths.
Comment 9 Katrin Fischer 2021-03-06 13:07:59 UTC
Hi Owen, 

I have compared the result of the current patches to the current behavior again. I think that the table options stop wrapping and vanish outside the screen is something that we should still look into. It's easy miss the options that way, especially the "renew all" option that completely disappears in the German version. Would you agree to have another look at wrapping them on a small screen size?
Comment 10 Owen Leonard 2021-03-16 14:52:42 UTC
Created attachment 118332 [details] [review]
Bug 27814: (follow-up) Adjust container padding, button flow

This patch makes minor changes to the SCSS so that the user summary
page's DataTables button flow better at very narrow widths.

Also, the main container should have less padding at narrow widths.
Comment 11 Katrin Fischer 2021-04-18 09:04:58 UTC
A small conflict, but I am not confident in fixing it, can you do it please?

Apply? [(y)es, (n)o, (i)nteractive] y
Applying: Bug 27814: Improve responsive behavior of the user page in the OPAC
Using index info to reconstruct a base tree...
M	koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
M	koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
Falling back to patching base and 3-way merge...
Auto-merging koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
Auto-merging koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
CONFLICT (content): Merge conflict in koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
error: Failed to merge in the changes.
Patch failed at 0001 Bug 27814: Improve responsive behavior of the user page in the OPAC
The copy of the patch that failed is found in: .git/rebase-apply/patch
When you have resolved this problem run "git bz apply --continue".
If you would prefer to skip this patch, instead run "git bz apply --skip".
To restore the original branch and stop patching run "git bz apply --abort".
Patch left in /tmp/Bug-27814-Improve-responsive-behavior-of-the-user--KxCJoQ.patch
Comment 12 Owen Leonard 2021-04-19 10:18:08 UTC
Created attachment 119844 [details] [review]
Bug 27814: Improve responsive behavior of the user page in the OPAC

This patch makes minor changes to OPAC CSS in order to improve the way
the logged-in user's "your account" page works at narrower browser
widths.

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

 - Log in to the OPAC as a user who has multiple checkouts.
 - Test the page at various browser widths, from > 1200 pixels wide to <
   300 pixels wide. Your browser's built-in responsive design mode,
   found in developer tools, can make these measurements easier.
 - At "phone-size" width the tabs ("Checked out," "Overdue," etc) should
   start displaying full-width.
 - The DataTable controls at the top of the checkouts table should
    adapt well as the browser width changes.
 - At narrower widths the tables on this page should display much better
   than they did before the patch: They should expand to fit the width
   of the page.

Edit: Tweaked the display property of the table search field at narrower
browser widths; Converted iCal download link to button to match other
elements in the toolbar.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 13 Owen Leonard 2021-04-19 10:18:12 UTC
Created attachment 119845 [details] [review]
Bug 27814: (follow-up) Adjust container padding, button flow

This patch makes minor changes to the SCSS so that the user summary
page's DataTables button flow better at very narrow widths.

Also, the main container should have less padding at narrow widths.
Comment 14 Katrin Fischer 2021-04-22 21:57:07 UTC
Created attachment 120032 [details] [review]
Bug 27814: Improve responsive behavior of the user page in the OPAC

This patch makes minor changes to OPAC CSS in order to improve the way
the logged-in user's "your account" page works at narrower browser
widths.

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

 - Log in to the OPAC as a user who has multiple checkouts.
 - Test the page at various browser widths, from > 1200 pixels wide to <
   300 pixels wide. Your browser's built-in responsive design mode,
   found in developer tools, can make these measurements easier.
 - At "phone-size" width the tabs ("Checked out," "Overdue," etc) should
   start displaying full-width.
 - The DataTable controls at the top of the checkouts table should
    adapt well as the browser width changes.
 - At narrower widths the tables on this page should display much better
   than they did before the patch: They should expand to fit the width
   of the page.

Edit: Tweaked the display property of the table search field at narrower
browser widths; Converted iCal download link to button to match other
elements in the toolbar.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 15 Katrin Fischer 2021-04-22 21:57:11 UTC
Created attachment 120033 [details] [review]
Bug 27814: (follow-up) Adjust container padding, button flow

This patch makes minor changes to the SCSS so that the user summary
page's DataTables button flow better at very narrow widths.

Also, the main container should have less padding at narrow widths.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 16 Katrin Fischer 2021-04-22 21:57:59 UTC
Thank you!
Comment 17 Jonathan Druart 2021-04-23 09:55:25 UTC
Pushed to master for 21.05, thanks to everybody involved!
Comment 18 Fridolin Somers 2021-04-30 07:43:41 UTC
Enhancement not pushed to 20.11.x