[Bug 27814] New: Improve responsive behavior of the user page in the OPAC
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 Bug ID: 27814 Summary: Improve responsive behavior of the user page in the OPAC Change sponsored?: --- Product: Koha Version: master Hardware: All OS: All Status: ASSIGNED Severity: enhancement Priority: P5 - low Component: OPAC Assignee: oleonard@myacpl.org Reporter: oleonard@myacpl.org QA Contact: testopia@bugs.koha-community.org Depends on: 20168 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. Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=20168 [Bug 20168] Update of the OPAC bootstrap template to bootstrap v4 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|ASSIGNED |Needs Signoff Patch complexity|--- |Small patch -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 --- Comment #1 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 117397 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=117397&action=edit 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...). - 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. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 Lucas Gass <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |lucas@bywatersolutions.com --- Comment #2 from Lucas Gass <lucas@bywatersolutions.com> --- 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 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #117397|0 |1 is obsolete| | --- Comment #3 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 117737 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=117737&action=edit 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...). - 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. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 Lucas Gass <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 Lucas Gass <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #117737|0 |1 is obsolete| | --- Comment #4 from Lucas Gass <lucas@bywatersolutions.com> --- Created attachment 117753 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=117753&action=edit 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...). - 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> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 --- Comment #5 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- 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.) -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 --- Comment #6 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- 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? -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 --- Comment #7 from Owen Leonard <oleonard@myacpl.org> --- (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 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 --- Comment #8 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 117854 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=117854&action=edit 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. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Failed QA --- Comment #9 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- 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? -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Failed QA |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #117854|0 |1 is obsolete| | --- Comment #10 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 118332 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=118332&action=edit 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. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Patch doesn't apply --- Comment #11 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- 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 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Patch doesn't apply |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #117753|0 |1 is obsolete| | Attachment #118332|0 |1 is obsolete| | --- Comment #12 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 119844 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=119844&action=edit 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...). - 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> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 --- Comment #13 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 119845 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=119845&action=edit 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. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 David Cook <dcook@prosentient.com.au> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |dcook@prosentient.com.au -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Passed QA -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #119844|0 |1 is obsolete| | --- Comment #14 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- Created attachment 120032 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=120032&action=edit 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...). - 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> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #119845|0 |1 is obsolete| | --- Comment #15 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- Created attachment 120033 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=120033&action=edit 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> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 --- Comment #16 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- Thank you! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 Jonathan Druart <jonathan.druart@bugs.koha-community.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Version(s)| |21.05.00 released in| | Status|Passed QA |Pushed to master -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 --- Comment #17 from Jonathan Druart <jonathan.druart@bugs.koha-community.org> --- Pushed to master for 21.05, thanks to everybody involved! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 Fridolin Somers <fridolin.somers@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |fridolin.somers@biblibre.co | |m --- Comment #18 from Fridolin Somers <fridolin.somers@biblibre.com> --- Enhancement not pushed to 20.11.x -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=27814 Bug 27814 depends on bug 20168, which changed state. Bug 20168 Summary: Update of the OPAC bootstrap template to bootstrap v4 https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=20168 What |Removed |Added ---------------------------------------------------------------------------- Status|Pushed to master |RESOLVED Resolution|--- |FIXED -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org