Bug 19851 - Improve responsive layout handling of staff client menu bar
Summary: 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 minor (vote)
Assignee: Owen Leonard
QA Contact: Josef Moravec
URL:
Whiteboard:
Keywords:
Depends on:
Blocks: 14546 20051 20135
  Show dependency treegraph
 
Reported: 2017-12-20 16:50 UTC by Owen Leonard
Modified: 2018-06-04 20:15 UTC (History)
5 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Bot Control: ---
When did the bot last check this:
Who signed the patch off:
Text to go in the release notes:


Attachments
Screenshot showing broken layout below 768 pixels wide (58.38 KB, image/png)
2017-12-20 16:50 UTC, Owen Leonard
Details
Screenshot of the proposed updated interface (84.56 KB, image/png)
2017-12-20 17:04 UTC, Owen Leonard
Details
Bug 19851: Improve responsive layout handling of staff client menu bar (10.64 KB, patch)
2017-12-21 13:51 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 19851: Improve responsive layout handling of staff client menu bar (10.69 KB, patch)
2017-12-22 21:36 UTC, Dominic Pichette
Details | Diff | Splinter Review
Bug 19851: Improve responsive layout handling of staff client menu bar (10.74 KB, patch)
2017-12-23 08:08 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 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
Created attachment 70023 [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.
Comment 4 Dominic Pichette 2017-12-22 21:36:10 UTC
Created attachment 70139 [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>
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