[Bug 22023] New: Further improve responsive layout handling of staff client menu bar
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22023 Bug ID: 22023 Summary: Further improve responsive layout handling of staff client menu bar Change sponsored?: --- Product: Koha Version: master Hardware: All OS: All Status: ASSIGNED Severity: enhancement Priority: P5 - low Component: Templates Assignee: oleonard@myacpl.org Reporter: oleonard@myacpl.org QA Contact: testopia@bugs.koha-community.org Blocks: 14546 Target Milestone: --- Created attachment 83372 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=83372&action=edit Animated gif showing responsive header menu Bootstrap has built-in functionality for collapsing a navbar menu at smaller screen widths. I propose to add this to the staff client header menu along with some other improvements to the responsive behavior of the menu. Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=14546 [Bug 14546] Make staff client templates responsive -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22023 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- See Also| |https://bugs.koha-community | |.org/bugzilla3/show_bug.cgi | |?id=19851 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22023 Josef Moravec <josef.moravec@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |josef.moravec@gmail.com -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22023 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|ASSIGNED |Needs Signoff Patch complexity|--- |Medium patch -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22023 --- Comment #1 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 83992 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=83992&action=edit Bug 22023: Further improve responsive layout handling of staff client menu bar This patch makes a number of changes in order to improve the way the staff client's header menu adjusts at narrower browser widths: - Updated version of Bootstrap 3.3.7 which includes the "collapse" JavaScript plugin. - Modified default Bootstrap CSS using Bootstrap's customization tool. These changes facilitate the removal of some custom CSS (overriding Bootstrap) from staff-global.scss. - Added Bootstrap config file for loading customizations at https://getbootstrap.com/docs/3.3/customize/ - Revised button classes for buttons in Bootstrap-styled toolbars. The modified default CSS resets the base font size in Bootstrap to better match our global CSS. A side-effect of this is that toolbar buttons ended up looking smaller than they should. Changing the button class solves this. - Restructure the header menu in order to allow different rules to govern the appearance of the navigational part of the menu (Circulation, Search, etc) and the user menu (Set library, My account, Log out). - Modify the cart JS to so that the popup works well at narrow widths. To test, apply the patch, regenerate the staff client CSS, and clear your browser cache. - Log in to the staff client and observe the layout of the header menu as you adjust the browser to various widths. - Confirm that sections of the menu "collapse" as the window gets narrower. - Confirm that dropdown menus behave correctly and that links work. - Confirm that the Cart link works as expected when the cart empty and when it has items. - Install and enable multiple translations, including at least one set of sub-languages (e.g. fr-FR and fr-CA). - Test the appearance of the language menus in the footer at various browser widths. - View pages with button toolbars and confirm that they appear unchanged (e.g. biblio detail page, patron detail page). NOTE: While this patch is intended to make improvements to staff client responsiveness, it does so within a limited scope. There are still many pages which do not work well at narrower browser widths. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22023 --- Comment #2 from Owen Leonard <oleonard@myacpl.org> --- This will probably require some follow-ups, but I would love to get some testers for this. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22023 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #83992|0 |1 is obsolete| | --- Comment #3 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 84727 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=84727&action=edit Bug 22023: Further improve responsive layout handling of staff client menu bar This patch makes a number of changes in order to improve the way the staff client's header menu adjusts at narrower browser widths: - Updated version of Bootstrap 3.3.7 which includes the "collapse" JavaScript plugin. - Modified default Bootstrap CSS using Bootstrap's customization tool. These changes facilitate the removal of some custom CSS (overriding Bootstrap) from staff-global.scss. - Added Bootstrap config file for loading customizations at https://getbootstrap.com/docs/3.3/customize/ - Revised button classes for buttons in Bootstrap-styled toolbars. The modified default CSS resets the base font size in Bootstrap to better match our global CSS. A side-effect of this is that toolbar buttons ended up looking smaller than they should. Changing the button class solves this. - Restructure the header menu in order to allow different rules to govern the appearance of the navigational part of the menu (Circulation, Search, etc) and the user menu (Set library, My account, Log out). - Modify the cart JS to so that the popup works well at narrow widths. To test, apply the patch, regenerate the staff client CSS, and clear your browser cache. - Log in to the staff client and observe the layout of the header menu as you adjust the browser to various widths. - Confirm that sections of the menu "collapse" as the window gets narrower. - Confirm that dropdown menus behave correctly and that links work. - Confirm that the Cart link works as expected when the cart empty and when it has items. - Install and enable multiple translations, including at least one set of sub-languages (e.g. fr-FR and fr-CA). - Test the appearance of the language menus in the footer at various browser widths. - View pages with button toolbars and confirm that they appear unchanged (e.g. biblio detail page, patron detail page). NOTE: While this patch is intended to make improvements to staff client responsiveness, it does so within a limited scope. There are still many pages which do not work well at narrower browser widths. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22023 Hayley Mapley <hayleymapley@catalyst.net.nz> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |hayleymapley@catalyst.net.n | |z Status|Needs Signoff |Patch doesn't apply --- Comment #4 from Hayley Mapley <hayleymapley@catalyst.net.nz> --- Patch doesn't apply cleanly: CONFLICT (content): Merge conflict in koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss error: Failed to merge in the changes. Perhaps a rebase is needed? Let me know if I'm missing something. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22023 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Patch doesn't apply |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22023 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #84727|0 |1 is obsolete| | --- Comment #5 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 86172 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=86172&action=edit Bug 22023: Further improve responsive layout handling of staff client menu bar This patch makes a number of changes in order to improve the way the staff client's header menu adjusts at narrower browser widths: - Updated version of Bootstrap 3.3.7 which includes the "collapse" JavaScript plugin. - Modified default Bootstrap CSS using Bootstrap's customization tool. These changes facilitate the removal of some custom CSS (overriding Bootstrap) from staff-global.scss. - Added Bootstrap config file for loading customizations at https://getbootstrap.com/docs/3.3/customize/ - Revised button classes for buttons in Bootstrap-styled toolbars. The modified default CSS resets the base font size in Bootstrap to better match our global CSS. A side-effect of this is that toolbar buttons ended up looking smaller than they should. Changing the button class solves this. - Restructure the header menu in order to allow different rules to govern the appearance of the navigational part of the menu (Circulation, Search, etc) and the user menu (Set library, My account, Log out). - Modify the cart JS to so that the popup works well at narrow widths. To test, apply the patch, regenerate the staff client CSS, and clear your browser cache. - Log in to the staff client and observe the layout of the header menu as you adjust the browser to various widths. - Confirm that sections of the menu "collapse" as the window gets narrower. - Confirm that dropdown menus behave correctly and that links work. - Confirm that the Cart link works as expected when the cart empty and when it has items. - Install and enable multiple translations, including at least one set of sub-languages (e.g. fr-FR and fr-CA). - Test the appearance of the language menus in the footer at various browser widths. - View pages with button toolbars and confirm that they appear unchanged (e.g. biblio detail page, patron detail page). NOTE: While this patch is intended to make improvements to staff client responsiveness, it does so within a limited scope. There are still many pages which do not work well at narrower browser widths. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22023 Hayley Mapley <hayleymapley@catalyst.net.nz> 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=22023 Hayley Mapley <hayleymapley@catalyst.net.nz> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #86172|0 |1 is obsolete| | --- Comment #6 from Hayley Mapley <hayleymapley@catalyst.net.nz> --- Created attachment 86217 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=86217&action=edit Bug 22023: Further improve responsive layout handling of staff client menu bar This patch makes a number of changes in order to improve the way the staff client's header menu adjusts at narrower browser widths: - Updated version of Bootstrap 3.3.7 which includes the "collapse" JavaScript plugin. - Modified default Bootstrap CSS using Bootstrap's customization tool. These changes facilitate the removal of some custom CSS (overriding Bootstrap) from staff-global.scss. - Added Bootstrap config file for loading customizations at https://getbootstrap.com/docs/3.3/customize/ - Revised button classes for buttons in Bootstrap-styled toolbars. The modified default CSS resets the base font size in Bootstrap to better match our global CSS. A side-effect of this is that toolbar buttons ended up looking smaller than they should. Changing the button class solves this. - Restructure the header menu in order to allow different rules to govern the appearance of the navigational part of the menu (Circulation, Search, etc) and the user menu (Set library, My account, Log out). - Modify the cart JS to so that the popup works well at narrow widths. To test, apply the patch, regenerate the staff client CSS, and clear your browser cache. - Log in to the staff client and observe the layout of the header menu as you adjust the browser to various widths. - Confirm that sections of the menu "collapse" as the window gets narrower. - Confirm that dropdown menus behave correctly and that links work. - Confirm that the Cart link works as expected when the cart empty and when it has items. - Install and enable multiple translations, including at least one set of sub-languages (e.g. fr-FR and fr-CA). - Test the appearance of the language menus in the footer at various browser widths. - View pages with button toolbars and confirm that they appear unchanged (e.g. biblio detail page, patron detail page). NOTE: While this patch is intended to make improvements to staff client responsiveness, it does so within a limited scope. There are still many pages which do not work well at narrower browser widths. Signed-off-by: Hayley Mapley <hayleymapley@catalyst.net.nz> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22023 Josef Moravec <josef.moravec@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Failed QA QA Contact|testopia@bugs.koha-communit |josef.moravec@gmail.com |y.org | --- Comment #7 from Josef Moravec <josef.moravec@gmail.com> --- Owen, this looks great. But i found some issues when switched to rtl language: the menu and menu button (on smaller screen) is rendered over user menu. also, koha logo does not change position to center as when using ltr language. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22023 Chris Slone <cslone@camdencountylibrary.org> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |cslone@camdencountylibrary. | |org -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22023 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=22023 --- Comment #8 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 86466 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=86466&action=edit Bug 22023: (follow-up) Right-to-left layout improvements This patch makes some corrections to accommodate right-to-left layouts. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22023 Josef Moravec <josef.moravec@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Failed QA --- Comment #9 from Josef Moravec <josef.moravec@gmail.com> --- Owen, thanks for quick follow-up, but I still have some minor issues with this: https://screenshots.firefox.com/VWFAQUJcL2Jg9RAi/localhost -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22023 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=22023 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #86466|0 |1 is obsolete| | --- Comment #10 from Owen Leonard <oleonard@myacpl.org> --- Created attachment 86478 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=86478&action=edit Bug 22023: (follow-up) Right-to-left layout improvements This patch makes some corrections to accommodate right-to-left layouts. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22023 Josef Moravec <josef.moravec@gmail.com> 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=22023 Josef Moravec <josef.moravec@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #86217|0 |1 is obsolete| | Attachment #86478|0 |1 is obsolete| | --- Comment #11 from Josef Moravec <josef.moravec@gmail.com> --- Created attachment 86498 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=86498&action=edit Bug 22023: Further improve responsive layout handling of staff client menu bar This patch makes a number of changes in order to improve the way the staff client's header menu adjusts at narrower browser widths: - Updated version of Bootstrap 3.3.7 which includes the "collapse" JavaScript plugin. - Modified default Bootstrap CSS using Bootstrap's customization tool. These changes facilitate the removal of some custom CSS (overriding Bootstrap) from staff-global.scss. - Added Bootstrap config file for loading customizations at https://getbootstrap.com/docs/3.3/customize/ - Revised button classes for buttons in Bootstrap-styled toolbars. The modified default CSS resets the base font size in Bootstrap to better match our global CSS. A side-effect of this is that toolbar buttons ended up looking smaller than they should. Changing the button class solves this. - Restructure the header menu in order to allow different rules to govern the appearance of the navigational part of the menu (Circulation, Search, etc) and the user menu (Set library, My account, Log out). - Modify the cart JS to so that the popup works well at narrow widths. To test, apply the patch, regenerate the staff client CSS, and clear your browser cache. - Log in to the staff client and observe the layout of the header menu as you adjust the browser to various widths. - Confirm that sections of the menu "collapse" as the window gets narrower. - Confirm that dropdown menus behave correctly and that links work. - Confirm that the Cart link works as expected when the cart empty and when it has items. - Install and enable multiple translations, including at least one set of sub-languages (e.g. fr-FR and fr-CA). - Test the appearance of the language menus in the footer at various browser widths. - View pages with button toolbars and confirm that they appear unchanged (e.g. biblio detail page, patron detail page). NOTE: While this patch is intended to make improvements to staff client responsiveness, it does so within a limited scope. There are still many pages which do not work well at narrower browser widths. Signed-off-by: Hayley Mapley <hayleymapley@catalyst.net.nz> Signed-off-by: Josef Moravec <josef.moravec@gmail.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22023 --- Comment #12 from Josef Moravec <josef.moravec@gmail.com> --- Created attachment 86499 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=86499&action=edit Bug 22023: (follow-up) Right-to-left layout improvements This patch makes some corrections to accommodate right-to-left layouts. Signed-off-by: Josef Moravec <josef.moravec@gmail.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22023 --- Comment #13 from Josef Moravec <josef.moravec@gmail.com> --- Created attachment 86500 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=86500&action=edit Bug 22023: (QA follow-up) Remove console.log used for debugging Signed-off-by: Josef Moravec <josef.moravec@gmail.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22023 Nick Clemens <nick@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |nick@bywatersolutions.com Status|Passed QA |Pushed to Master --- Comment #14 from Nick Clemens <nick@bywatersolutions.com> --- Awesome work all! Pushed to master for 19.05 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22023 Martin Renvoize <martin.renvoize@ptfs-europe.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Resolution|--- |FIXED CC| |martin.renvoize@ptfs-europe | |.com Status|Pushed to Master |RESOLVED --- Comment #15 from Martin Renvoize <martin.renvoize@ptfs-europe.com> --- Enhancement will not be backported to 18.11.x series. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22023 Josef Moravec <josef.moravec@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Blocks| |22656 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22656 [Bug 22656] Report charts broken after bug 22023 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22023 Owen Leonard <oleonard@myacpl.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Blocks| |22698 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22698 [Bug 22698] Fix incorrect button classes -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org