Web Client: Smallish screens obscure menus

[Terran McCanna]

In 3.0.0...

When the window is narrow enough to make the top menu bar wrap to two rows, but not so narrow as to make it switch completely to mobile view, the wrapped menu bar obscures portions of the page. Example screenshots attached from firefox and chrome.

[Terran McCanna (tmccanna)]

This is also a problem on the patron registration / edit screen when on a monitor with a moderate resolution. Attached screenshot shows the wrapped menu item and the inaccessible fields circled in red.

[Jeanette Lundgren (jlundgren)]

This is also an issue on Checkout screen. The check out, items out, holds, etc menu stays put and obscures the screen when scrolling. See attached.

confirmed on 2.12.8 and 3.0.3

[Mike Risher (mrisher)]

I pushed a branch that resolves this. By adding "position: sticky" to the nav-bar we keep it in the page flow, so we shouldn't have the problem of it obscuring content. However, this change impacts many pages of evergreen. I've checked many places and see no problems, but please let me know if this has any negative side effects.

Branch here:
https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/mrisher/lp1724008-navbar-two-lines

Terran, this should address your comment #3 as well.

Jeanette, I wasn't able to replicate the issue you're showing us in your screen shot on comment #4. I can see some problems with that page and believe I've addressed them. However I've never seen the text input field _on_top_ of the page navigation, like you're showing. I notice your screen is at 400 pixels wide, so I imagine it's from a mobile device? I used my Chrome "device toolbar" and tried various settings, like "Galaxy S5", "iPad", etc, but never saw the problem. If it's still happening, please let us know your browser and operating system.

[Jason Boyer (jboyer)]

I tried this out and it does address most of the AngularJS parts of the client but patron pages have a large gap at the top and all of the Angular parts of the client (/eg2/) have similar problems with the bar overlapping content when the username and workstation are compressed. Images attached for both.

[Mike Risher (mrisher)]

Jason Boyer,

Thanks very much for your feedback! I see the problem with the Angular pages (/eg2/) and my re-patch should fix the issue. Here it is:

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/mrisher/lp1724008-navbar-two-lines

I have visited the various patron pages and do not see the issue you're pointing out in the screenshot. I'm attaching a screenshot of how it looks on my end. Perhaps clear your cache and reload? Also, there are some changes to .tt2 files in the patch that are specifically for patron pages, so make sure those are applied.

[Rogan Hamby (rogan-hamby)]

Jsut a note that I wasn't able to replicate the original issue as described in Firefox or Chrome. Perhaps other issues have helped address this? I'm not removing any tags, just noting I couldn't replicate on current Firefox and Chrome on Mac.

[Terran McCanna (tmccanna)]

Just looked at current master without the patch and it does work better than it did before but there are still some places where there is some overlap - for instance on the patron registration page, the page title gets hidden at that intermediate size, but the fields no longer get hidden. So I think Rogan is right that improvements have been made along the way, but it's probably still worth looking at these additional improvements.

[Terran McCanna (tmccanna)]

I am getting a merge conflict error when I try to cherry pick this to current master.

[Mike Risher (mrisher)]

The reason for the conflict is because of some edits pushed to master a couple weeks ago from bug #1805860. These edits ended up resolving most of the patron page problems described in this bug.

If we're happy with the current fix on master, we probably don't need the cherry picked version of my work. My work changes the page flow everywhere that navigation is used and it might be overkill if we're only trying to adjust a few pages involving patrons. Cherry picked version here:

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/mrisher/lp1724008-navbar-two-lines-cp

If all we're after is keeping the title of the Patron Registration page from being obscured, here's a quick fix that applies just to that one page:

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/mrisher/lp1724008-patron-register-title

[Erica Rohlfs (erohlfs)]

I was going to sign off on this fix. However, I'm not sure which fix is applied. I do not see the original behavior on other databases that I've tested to compare. Unassigned myself for testing.

[Terran McCanna (tmccanna)]

Sorry, Erica - I just applied the last commit mentioned to fix the overlap of the title on the Patron Registration page. (Which does work now, btw - I'll sign off shortly.)

[Terran McCanna (tmccanna)]

Most of the originally reported problems have been fixed along with other improvements, so I just tested Mike's small fix to the Patron Registration form title overlap problem and have signed off on it here:

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/mccanna/lp1724008-patron-register-title-signoff

[Galen Charlton (gmc)]

I'm not sure about that patch - by removing the fixed position from the patron registration form's toolbar, staff users would be forced to scroll all the way back up to the top of the page to save the record. That was a pretty big deal when the AngularJS patron registration form was previewed in 2015; see comment #14 in bug 1452950.

Setting needsdiscussion tag.

[Mike Risher (mrisher)]

Thanks for your comment Galen. I didn't realize that the fixed position was intended to keep the save buttons at the top of the screen. I re-did my work, this time keeping the positioning fixed. Also adjusted the z-index value of the title, so that the datepicker doesn't render on top of the title.

The only page changed with this is patron registration, and only the title should be impacted. Branch here:

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/mrisher/lp1724008-patron-register-title-v2

Keeping the pull request tag, and keeping needs discussion in case someone else wants to weigh in.

[Ruth Frasur Davis (redavis)]

Within the patron registration screen, the barcode field is completely obscured at full resolution and mobile view. When viewed as a small screen but not yet mobile, the field is visible but only partially and without a label.

[Ruth Frasur Davis (redavis)]

No barcode field in mobile view

[Ruth Frasur Davis (redavis)]

Obscured barcode field in small screen view

[Terran McCanna (tmccanna)]

Removing pullrequest tag due to obscured barcode field.

[Jason Boyer (jboyer)]

I have a branch that addresses this here: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/jboyer/lp1724008_navigate_the_narrows / working/user/jboyer/lp1724008_navigate_the_narrows by just hiding the user@workstation section when the screen is narrow for both versions of the staff client.

[Ruth Frasur Davis (redavis)]

I have tested this code and consent to signing off on it with my name, rfrasur and my email address, <email address hidden>.

[Mike Rylander (mrylander)]

Thank you, all, from future-us, for reducing the maintenance burden and finding the smallest change that could possibly work! Merged Jason's change to master for 3.9.

Does this need to be backported to 3.8 or even 3.7? Looks like "maybe"... but it's not targeted to those.

[Mike Rylander (mrylander)]

I've set the status to In Progress until backporting is decided upon.