|
Description
Owen Leonard
2021-02-26 19:11:57 UTC
Created attachment 117397 [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. 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 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. 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> 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.) 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? (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 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. 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? 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. 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 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> 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. 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> 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> Thank you! Pushed to master for 21.05, thanks to everybody involved! Enhancement not pushed to 20.11.x |
