From 73d7c3f42811f412c9c34bde788e7843267ce51b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= <danxuliu@gmail.com>
Date: Tue, 6 Mar 2018 20:50:22 +0100
Subject: [PATCH 1/2] Add controls to #app instead of before #content-wrapper
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The "#content-wrapper" element is the scrolling container of the
gallery. As the "#controls" element was a sibling with a relative top
position it overlapped the "#content-wrapper"; the contents themselves
were not overlapped due to the "margin-top" CSS rule for "#content
.hascontrols" elements, but as the scroll bar belongs to the
"#content-wrapper" it was.

This could have been fixed by setting the top position of the
"#content-wrapper" element to visually move it below the "#controls".
However, conceptually the controls are part of the contents, and other
apps may expect that the gallery adds all its contents in the
"#content-wrapper" (like the JSXC app), so also for consistency with the
Files app this commit moves the "#controls" element into the "#app"
element instead.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
---
 css/public.css |  7 +++++--
 css/styles.css | 10 +++++++++-
 js/app.js      |  2 +-
 3 files changed, 15 insertions(+), 4 deletions(-)

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..cc119e9d8 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,6 +89,14 @@ 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;
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();

From 1c12610292d87801b0ee25985120dcb9979fdb10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= <danxuliu@gmail.com>
Date: Tue, 6 Mar 2018 23:49:29 +0100
Subject: [PATCH 2/2] Remove margin from server for "hascontrols" CSS class
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The server adds a "margin-top" to the elements with the "hascontrols"
CSS class, like the element for the gallery. However, since the controls
were moved into the "#app" element that margin is no longer necessary;
the controls are a previous sibling of the gallery, and its sticky
position behaves like a relative position before getting stuck, so the
controls are positioned according to the normal flow of the document and
thus "push" the gallery down without the need of a margin.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
---
 css/styles.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/css/styles.css b/css/styles.css
index cc119e9d8..01e2cd3fd 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -103,6 +103,9 @@ div.crumb.last a {
 	text-align: justify;
 	padding-bottom: 10px;
 	margin-bottom: 45px;
+
+	/* Override unneeded margin from server */
+	margin-top: 0;
 }
 
 #gallery .row {