Bug 22023 - Further improve responsive layout handling of staff client menu bar
Summary: Further improve responsive layout handling of staff client menu bar
Status: RESOLVED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Owen Leonard
QA Contact: Josef Moravec
URL:
Keywords:
Depends on:
Blocks: 14546 22656 22698
  Show dependency treegraph
 
Reported: 2018-12-18 18:46 UTC by Owen Leonard
Modified: 2019-04-12 15:03 UTC (History)
5 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Medium patch
Who signed the patch off:
Text to go in the release notes:
Version(s) released in:


Attachments
Animated gif showing responsive header menu (186.98 KB, image/gif)
2018-12-18 18:46 UTC, Owen Leonard
Details
Bug 22023: Further improve responsive layout handling of staff client menu bar (442.50 KB, patch)
2019-01-15 17:29 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 22023: Further improve responsive layout handling of staff client menu bar (442.50 KB, patch)
2019-02-04 14:50 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 22023: Further improve responsive layout handling of staff client menu bar (442.71 KB, patch)
2019-03-06 14:09 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 22023: Further improve responsive layout handling of staff client menu bar (443.18 KB, patch)
2019-03-06 21:13 UTC, Hayley Mapley
Details | Diff | Splinter Review
Bug 22023: (follow-up) Right-to-left layout improvements (2.18 KB, patch)
2019-03-11 16:11 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 22023: (follow-up) Right-to-left layout improvements (2.23 KB, patch)
2019-03-11 18:18 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 22023: Further improve responsive layout handling of staff client menu bar (442.50 KB, patch)
2019-03-12 06:14 UTC, Josef Moravec
Details | Diff | Splinter Review
Bug 22023: (follow-up) Right-to-left layout improvements (2.30 KB, patch)
2019-03-12 06:14 UTC, Josef Moravec
Details | Diff | Splinter Review
Bug 22023: (QA follow-up) Remove console.log used for debugging (885 bytes, patch)
2019-03-12 06:14 UTC, Josef Moravec
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Owen Leonard 2018-12-18 18:46:56 UTC
Created attachment 83372 [details]
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.
Comment 1 Owen Leonard 2019-01-15 17:29:44 UTC Comment hidden (obsolete)
Comment 2 Owen Leonard 2019-01-15 17:30:49 UTC
This will probably require some follow-ups, but I would love to get some testers for this.
Comment 3 Owen Leonard 2019-02-04 14:50:54 UTC Comment hidden (obsolete)
Comment 4 Hayley Mapley 2019-03-05 20:45:49 UTC
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.
Comment 5 Owen Leonard 2019-03-06 14:09:01 UTC
Created attachment 86172 [details] [review]
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.
Comment 6 Hayley Mapley 2019-03-06 21:13:56 UTC
Created attachment 86217 [details] [review]
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>
Comment 7 Josef Moravec 2019-03-08 09:39:42 UTC
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.
Comment 8 Owen Leonard 2019-03-11 16:11:12 UTC
Created attachment 86466 [details] [review]
Bug 22023: (follow-up) Right-to-left layout improvements

This patch makes some corrections to accommodate right-to-left layouts.
Comment 9 Josef Moravec 2019-03-11 17:16:56 UTC
Owen, thanks for quick follow-up, but I still have some minor issues with this: 

https://screenshots.firefox.com/VWFAQUJcL2Jg9RAi/localhost
Comment 10 Owen Leonard 2019-03-11 18:18:24 UTC
Created attachment 86478 [details] [review]
Bug 22023: (follow-up) Right-to-left layout improvements

This patch makes some corrections to accommodate right-to-left layouts.
Comment 11 Josef Moravec 2019-03-12 06:14:23 UTC
Created attachment 86498 [details] [review]
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>
Comment 12 Josef Moravec 2019-03-12 06:14:27 UTC
Created attachment 86499 [details] [review]
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>
Comment 13 Josef Moravec 2019-03-12 06:14:30 UTC
Created attachment 86500 [details] [review]
Bug 22023: (QA follow-up) Remove console.log used for debugging

Signed-off-by: Josef Moravec <josef.moravec@gmail.com>
Comment 14 Nick Clemens 2019-03-16 13:54:59 UTC
Awesome work all!

Pushed to master for 19.05
Comment 15 Martin Renvoize 2019-03-19 11:06:45 UTC
Enhancement will not be backported to 18.11.x series.