Media Grid: error-message sidebar covers grid

[Ipstenu]

​https://cloudup.com/iH1BeOXpJBM

Possibly related to #29085

This occurs in portrait and landscape, on iOS and android as well.

[celloexpressions]

Per IRC, can't reproduce anymore and that sidebar doesn't exist.

[celloexpressions]

This is an issue; specifically, the sidebar is only used for displaying upload errors. Rather than a sidebar, it should probably be displayed as more of a popup, with more visual dismiss-ability. That way only a minimal amount of attachments are covered by it.

I'm working on a patch.

[celloexpressions]

Proposed design. This is a starting point, could use some more work from a designer, exact alignment is pending the removal of the checkboxes.

[celloexpressions]

29141.diff​ is a start. There are issues with uploading multiple invalid files - every other one shows the attachment details sidebar and then hides the whole sidebar. That's most likely related to the JS though, and should probably be fixed elsewhere.

[ocean90]

Replying to celloexpressions:

There are issues with uploading multiple invalid files - every other one shows the attachment details sidebar and then hides the whole sidebar.

See #29037.

[wonderboymusic]

In 29526:

Media Grid: improve the design of upload errors.

Props celloexpressions.
See #29141.

[adamsilverstein]

looks good! one thing: at certain screen sizes, i'm seeing the error 'behind' the search bar:

[helen]

I think I'd rather see these full width between the grid and the filter bar, and just push down/up the grid when needed. I don't think that movement is a big deal, given that you probably want to see it and it's dismissable.

[ocean90]

In 29548:

Media Grid: Don't hide error messages behind the toolbar.

fixes #29141.

[ocean90]

Missed helen's comment.

[helen]

Screenshots above are the result of some tinkering - it required that the .media-sidebar div be moved, though. The first has the issue of the close icon looking like it dismisses just the one error but it really dismisses all of them. Individual errors are less clear in the second. Just wanted to drop that here sooner than later for feedback.

[stephdau]

Props pento for JS

[stephdau]

attachment:29141.2.diff​ figures out the moving of the media-sidebar div to underneath the media-toolbar div (props pento), and begins to style it relatively, coming closer to Helen's 2nd screenshot.

The change does not affect the errors in other upload UIs: ​https://cloudup.com/cHqxorvI5Sz

[helen]

In 29612:

Media Grid: Show upload errors above the grid rather than as a popup.

props pento, stephdau, helen. fixes #29141.