diff --git a/css/public.css b/css/public.css index 1d72d7613..bdc56b582 100644 --- a/css/public.css +++ b/css/public.css @@ -5,9 +5,12 @@ body { } #content { - height: initial; + /* #content is the previous sibling of the footer, so its height must match + * the height of its child elements to prevent the footer from overlapping + * them. The server sets "height: 100%" for #content, so that value has to + * be overriden. */ + height: auto; min-height: calc(100vh - 103px); /* 45px(#controls) + 58px(footer) = 103px */ - overflow: hidden; } /* height fix for ie11 */ diff --git a/css/styles.css b/css/styles.css index e415ca8a2..01e2cd3fd 100644 --- a/css/styles.css +++ b/css/styles.css @@ -8,7 +8,6 @@ body:after { #controls { width: 100%; - top: 45px; } .breadcrumbs-droppable-hover { @@ -82,6 +81,7 @@ div.crumb.last a { #content-wrapper { position: relative; height: calc(100vh - 45px); /* 45px for #controls element */ + top: 45px; padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; @@ -89,12 +89,23 @@ div.crumb.last a { transition: background-color 1s linear; } +#app { + /* #app is the parent of #controls and #gallery, and #controls uses a sticky + * position, so the #app height must contain the full gallery for the + * controls to be stuck while scrolling. The server sets "height: 100%" for + * the app, so that value has to be overriden. */ + height: auto; +} + #gallery.hascontrols { position: relative; overflow: hidden; text-align: justify; padding-bottom: 10px; margin-bottom: 45px; + + /* Override unneeded margin from server */ + margin-top: 0; } #gallery .row { diff --git a/js/app.js b/js/app.js index 6201516a0..c8530f703 100644 --- a/js/app.js +++ b/js/app.js @@ -12,7 +12,7 @@ /* global OC, $, _, Gallery, SlideShow */ $(document).ready(function () { "use strict"; - $('#controls').insertBefore($('#content-wrapper')); + $('#controls').prependTo($('#app')); Gallery.utility = new Gallery.Utility(); Gallery.view = new Gallery.View(); Gallery.token = Gallery.utility.getPublicToken();