WIP fix: Allow pop up notifications to go under the navigation when scrolling

[petesfrench]

Done

• Lower the z-index of notifications so they go under the navigation
• Put the notifications in their own file

QA

• go to https://ubuntu-com-14222.demos.haus/#success and scroll down, see that the notification goes under the navigation

Issue / Card

Fixes https://warthogs.atlassian.net/browse/WD-11728

[webteam-app]

Demo

Jenkins

demos.haus

[anthonydillon]

Thank you, this definitely works but the scroll brings the navigation now over the notification. Could you try adding scroll-padding-top to the notifications to try and block this behaviour?

[pastelcyborg]

@petesfrench Would you mind updating the description of this to explain exactly what all these changes are? This seems like a large number of modifications for something that reads as simply needing a z-index tweak, and I'm not sure why all these changes were made.

[petesfrench]

@pastelcyborg Sure thing. Note that the majority of the changes come from formatting changes applied by Jinja. The scope of the pr has not changed.

I got a little stuck on this and haven't had time to jump back into it. If you want to look into it and see if you can get it working feel free

[pastelcyborg]

After looking into this a bit further, I think my inclination here would actually be to make the #newsletter-signup (and probably other similar confirmation notifications) fixed position, rather than do any z-index manipulation. Not only would this avoid any placement issues, since the notification is already located vertically lower than the navigation in the DOM, it would also be a slightly improved UX, since these notifications should really be visible to the user regardless of their scroll position anyway.

@petesfrench Thoughts?