Angular staff client navbar is not responsive

Bug #1945498 reported by Galen Charlton
20
This bug affects 4 people
Affects Status Importance Assigned to Milestone
Evergreen
Confirmed
Medium
Unassigned

Bug Description

The Angular staff client's navbar is not responsive. For example, particularly on phones, it

- its height expands, covering parts of the interface
- Unlike the AngularJS version, it doesn't shrink down to a bar with a hamburger menu; instead, it displays full width, and consequently gets cut off. The latter can be an issue with tablet display

It should be adjusted so be fully responsive, similar to the examples at https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

I've attached a screenshot of the problem. While there may or may not be little call to use the Angular staff client on phones, there certainly is for tablets.

Evergreen 3.6+

Revision history for this message
Galen Charlton (gmc) wrote :
tags: added: accessibility angular
tags: added: usability
Revision history for this message
Stephanie Leary (stephanieleary) wrote :

Here's a branch that makes the nav menu responsive: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/LP1945498-responsive-navbar

The keyboard events are verbose, but the ng-bootstrap Collapse functionality (https://ng-bootstrap.github.io/#/components/collapse/examples#navbar) was written as a simple click handler, which doesn't support keyboard users, so here we are. If nothing else, this demonstrates why I've spent so much time converting links to buttons elsewhere in the interface.

tags: added: pullrequest
Andrea Neiman (aneiman)
Changed in evergreen:
status: New → Confirmed
Revision history for this message
Galen Charlton (gmc) wrote :

Some feedback:

[1] I'm seeing the following errors in the console:

NG0303: Can't bind to 'ngbDropdown' since it isn't a known property of 'div' (used in the 'StaffNavComponent' component template).
NG0303: Can't bind to 'ngbDropdownMenu' since it isn't a known property of 'div' (used in the 'StaffNavComponent' component template).
NG0303: Can't bind to 'ngbDropdownItem' since it isn't a known property of 'button' (used in the 'StaffNavComponent' component template).

I don't think it likes the "[ngbDropdown]", "[ngbDropdownMenu]", etc.

[2] This is a little artificial, but when you expand the viewport from cell phone size to something wider while one of the menus is open, the navbar doesn't fully convert back to the full-width version: the background color of the open menu doesn't change to white and the overall navbar height remains too high.

[3] On smaller viewports, if you've opened the menu, then select the home menu item to go to the splash page, the menu remains open.

[4] The patch no loner passes ng lint.

tags: removed: pullrequest
Andrea Neiman (aneiman)
tags: added: needswork
Revision history for this message
Michael Kares (michael-kares) wrote :

Also, I noticed that all but one of the navbar and menu items don't respect browser text size. For example, I have my default text size set to Large in Chrome (on OS X) and only "Retrieve last Bib record" respects that setting. See the attachment.

Revision history for this message
Stephanie Leary (stephanieleary) wrote :

Thanks, both! I've added a couple of commits (and rebased the branch) to address the feedback.

Galen, your point [2] is a known bug of the ng-bootstrap responsive navbar implementation. We would have to write our own listener to toggle the collapse function at the correct breakpoint, and I'm not sure the extra overhead would be worth it.

tags: added: pullrequest
removed: needswork
Galen Charlton (gmc)
Changed in evergreen:
assignee: nobody → Galen Charlton (gmc)
Revision history for this message
Galen Charlton (gmc) wrote (last edit ):

Signoff pushed to working/user/gmcharlt/lp1945498_signoff. I also squashed in a minor whitespace correction.

tags: added: signedoff
Changed in evergreen:
assignee: Galen Charlton (gmc) → nobody
Revision history for this message
Terran McCanna (tmccanna) wrote :

I tried to cherry-pick this to main today and got a conflict on nav.component.html. Can you please rebase?

Changed in evergreen:
assignee: nobody → Terran McCanna (tmccanna)
assignee: Terran McCanna (tmccanna) → nobody
tags: added: needsrebase
Galen Charlton (gmc)
tags: removed: signedoff
Revision history for this message
Stephanie Leary (stephanieleary) wrote :
tags: removed: needsrebase
To post a comment you must log in.
This report contains Public information  
Everyone can see this information.

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.