Fix controls position in gallery layout

[danxuliu]

This pull request addresses a comment in #350, although it does not fix the original issue there (the comment is unrelated to the issue, but it has good information ;-) ).

The problem was that the #controls element was added outside the #content-wrapper element. This caused the controls to overlap the scroll bar of the contents, and also the controls to the right to be hidden when the sidebar of the JavaScript XMPP Chat was open.

Before:

After:

To fix that the #controls element was moved inside the #app element and the styles were adjusted to keep the same appearance and scrolling behaviour as before.

Note, however, that #content-wrapper is kept as the scrolling container; in order to reduce the styles overriden from the server it would be better to make #app the scrolling container. The problem is that although it would work nicely in the main gallery it would require some changes to the gallery of the public share page (due to the footer element, which is outside the #app element). Given that the gallery of the public share page is going to be modified soon for the time being I just left it as is.

When testing this note that the public sharing page of current master branch of the Gallery does not work on current master branch of the server (that is why it is going to be modified soon ;-) ). You have to use a commit prior to nextcloud/server@01f420c7ac38128c03975d7de7dd20190c4afcc1

@nextcloud/designers

[codecov[bot]]

Codecov Report

Merging #404 into master will not change coverage. The diff coverage is n/a.

@@            Coverage Diff            @@
##             master     #404   +/-   ##
=========================================
  Coverage     82.55%   82.55%           
  Complexity      360      360           
=========================================
  Files            38       38           
  Lines          1313     1313           
=========================================
  Hits           1084     1084           
  Misses          229      229

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update a7b3ca5...1c12610. Read the comment docs.