Bug 19851

Summary: Improve responsive layout handling of staff client menu bar
Product: Koha Reporter: Owen Leonard <oleonard>
Component: TemplatesAssignee: Owen Leonard <oleonard>
Status: CLOSED FIXED QA Contact: Josef Moravec <josef.moravec>
Severity: minor    
Priority: P5 - low CC: dominic.pichette, fridolin.somers, J.P.Knight, josef.moravec, nick
Version: Main   
Hardware: All   
OS: All   
See Also: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=22023
Change sponsored?: --- Patch complexity: Small patch
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
Bug Depends on:    
Bug Blocks: 14546, 20051, 20135    
Attachments: Screenshot showing broken layout below 768 pixels wide
Screenshot of the proposed updated interface
Bug 19851: Improve responsive layout handling of staff client menu bar
Bug 19851: Improve responsive layout handling of staff client menu bar
Bug 19851: Improve responsive layout handling of staff client menu bar

Description Owen Leonard 2017-12-20 16:50:13 UTC
Created attachment 69952 [details]
Screenshot showing broken layout below 768 pixels wide

The built-in Bootstrap responsive layout makes the staff client's menu bar behave badly at browser widths smaller than 768 pixels. I propose to add some CSS to make it work somewhat better.
Comment 1 Owen Leonard 2017-12-20 17:04:06 UTC
Created attachment 69957 [details]
Screenshot of the proposed updated interface

In the proposed revision, the logged-in user's name and branch would move to the dropdown menu at lower screen widths.
Comment 2 Jon Knight 2017-12-20 17:20:53 UTC
That looks much better to me!
Comment 3 Owen Leonard 2017-12-21 13:51:16 UTC Comment hidden (obsolete)
Comment 4 Dominic Pichette 2017-12-22 21:36:10 UTC Comment hidden (obsolete)
Comment 5 Josef Moravec 2017-12-23 08:08:17 UTC
Created attachment 70149 [details] [review]
Bug 19851: Improve responsive layout handling of staff client menu bar

This patch modifies CSS and markup in the staff client header to
override the default responsive style of the menu bar. The changed
layout will keep the menu bar items in a horizontal line at lower screen
widths.

To test, apply the patch and clear your browser cache if necessary.

 - Log in to the staff client and confirm that the appearance of the
   menu bar at the top of the screen looks correct at various browser
   widths.
 - Confirm that the logged-in user menu label and help link expand and
   collapse according to browser width.

Signed-off-by: dom <dominic.pichette@inlibro.com>

Signed-off-by: Josef Moravec <josef.moravec@gmail.com>
Comment 6 Josef Moravec 2017-12-23 08:09:07 UTC
Nice job Owen ;)
Comment 7 Jonathan Druart 2017-12-26 15:54:03 UTC
Pushed to master for 18.05, thanks to everybody involved!
Comment 8 Nick Clemens 2018-01-15 16:46:26 UTC
Awesome work all, pushed to stable for 17.11.02
Comment 9 Fridolin Somers 2018-01-25 09:36:22 UTC
This looks more like enhancement to me.
BTW I will wait for Bug 20051 to decide if I backport to 17.05.x