Notifications are getting in the way

[almet]

See .

I'm not sure what to do about this: we could probably make the notifiications in the flow, and not floating on top of the rest of the content.

[Glandos]

I explored some solutions, but none of them seems better than the others:

• It's not simple to make it in the flow, because the main content is sometime customized, and I would much prefer that flash messages are defined only in layout.html
• I tried in the top navbar (not absolute), but it can be difficult not to have it in the way either:
  
• It can be put absolute on top of the navbar links. Navigation is usually less important than flash messages

[almet]

Thanks! Do you think it's possible to have it in the layout.html but after the header with the links and logo?

[Glandos]

The current screenshot was made with the messages div right after the h1 element in the navbar.

Do you mean to have it on the right in the top navbar, after the project menu? Or at the bottom of this?

[almet]

I'm thinking about putting it after the top navbar and the project menu. At the bottom of it, yes.

[JocelynDelalande]

A design warning : if flash messages are to be put back in flow : be sure that its vanishing after a couple of seconds does not make the whole page content move up. Some UI act like that, and that is very annoying.

(a solution to that is to remove notification from auto-hiding)

[Glandos]

Since #856 there is no auto-hide anymore.

But that's the main problem I encountered: how to integrate flash message without moving existing content. Even when I click on some "Close" action, I don't want the whole content to move. On top of that, moving the content can bring some other design issues.

[Glandos]

After seeing the issue in many angle, here is my best proposal so far:

Peek.11-11-2021.23-00.mp4

I didn't modify the absolute positioning. The trick was to add an empty div of 4.5rem height (as before) on top of messages, but only for screen larger than md in bootstrap.

[almet]

Sorry I didn't came back to you sooner @Glandos. It seems good enough to me 👍

[Nikos410]

@Glandos I really like this as well. Did you solve the issue of alerts blocking buttons behind the surrounding "messages" div? I solved it in #929 by fine-tuning the pointer-events css property.

This solution does not work with Internet Explorer < 11 however :/