Merge pull request #19611 from owncloud/fix-public-scroll

Fix scrollbars in public template

3 files changed, 42 insertions, 38 deletions

diff --git a/apps/files_sharing/css/public.css b/apps/files_sharing/css/public.css
index 2b7e84c987d..bd8e98e966d 100644
--- a/apps/files_sharing/css/public.css
+++ b/apps/files_sharing/css/public.css
@@ -1,8 +1,12 @@
+#content {
+	height: initial;
+	min-height: calc(100vh - 120px);
+	overflow: hidden;
+}
+
 #preview {
 	background: #fff;
 	text-align: center;
-	margin: 45px auto 0;
-	min-height: 200px;
 }
 
 #preview .notCreatable {
diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php
index 06d797c3c6f..b5dd653d718 100644
--- a/apps/files_sharing/templates/public.php
+++ b/apps/files_sharing/templates/public.php
@@ -86,38 +86,39 @@ $thumbSize = 1024;
 				</a>
 			</span>
 		</div>
-	</div></header>
-<div id="content">
-	<div id="preview">
-		<?php if (isset($_['folder'])): ?>
-			<?php print_unescaped($_['folder']); ?>
-		<?php else: ?>
-			<?php if ($_['previewEnabled'] && substr($_['mimetype'], 0, strpos($_['mimetype'], '/')) == 'video'): ?>
-				<div id="imgframe">
-					<video tabindex="0" controls="" preload="none">
-						<source src="<?php p($_['downloadURL']); ?>" type="<?php p($_['mimetype']); ?>" />
-					</video>
-				</div>
+</div></header>
+<div id="content-wrapper">
+	<div id="content">
+		<div id="preview">
+			<?php if (isset($_['folder'])): ?>
+				<?php print_unescaped($_['folder']); ?>
 			<?php else: ?>
-				<!-- Preview frame is filled via JS to support SVG images for modern browsers -->
-				<div id="imgframe"></div>
+				<?php if ($_['previewEnabled'] && substr($_['mimetype'], 0, strpos($_['mimetype'], '/')) == 'video'): ?>
+					<div id="imgframe">
+						<video tabindex="0" controls="" preload="none">
+							<source src="<?php p($_['downloadURL']); ?>" type="<?php p($_['mimetype']); ?>" />
+						</video>
+					</div>
+				<?php else: ?>
+					<!-- Preview frame is filled via JS to support SVG images for modern browsers -->
+					<div id="imgframe"></div>
+				<?php endif; ?>
+				<div class="directDownload">
+					<a href="<?php p($_['downloadURL']); ?>" id="downloadFile" class="button">
+						<img class="svg" alt="" src="<?php print_unescaped(OCP\image_path("core", "actions/download.svg")); ?>"/>
+						<?php p($l->t('Download %s', array($_['filename'])))?> (<?php p($_['fileSize']) ?>)
+					</a>
+				</div>
+				<div class="directLink">
+					<label for="directLink"><?php p($l->t('Direct link')) ?></label>
+					<input id="directLink" type="text" readonly value="<?php p($_['downloadURL']); ?>">
+				</div>
 			<?php endif; ?>
-			<div class="directDownload">
-				<a href="<?php p($_['downloadURL']); ?>" id="downloadFile" class="button">
-					<img class="svg" alt="" src="<?php print_unescaped(OCP\image_path("core", "actions/download.svg")); ?>"/>
-					<?php p($l->t('Download %s', array($_['filename'])))?> (<?php p($_['fileSize']) ?>)
-				</a>
-			</div>
-			<div class="directLink">
-				<label for="directLink"><?php p($l->t('Direct link')) ?></label>
-				<input id="directLink" type="text" readonly value="<?php p($_['downloadURL']); ?>">
-			</div>
-		<?php endif; ?>
+		</div>
 	</div>
-
+	<footer>
+		<p class="info">
+			<?php print_unescaped($theme->getLongFooter()); ?>
+		</p>
+	</footer>
 </div>
-<footer>
-	<p class="info">
-		<?php print_unescaped($theme->getLongFooter()); ?>
-	</p>
-</footer>
diff --git a/core/css/styles.css b/core/css/styles.css
index df533aab318..3d68a591522 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -404,8 +404,7 @@ input[type="submit"].enabled {
 	width: 100%;
 }
 #content .hascontrols {
-	position: relative;
-	top: 45px;
+	margin-top: 45px;
 }
 #content-wrapper {
 	position: absolute;
@@ -425,9 +424,9 @@ input[type="submit"].enabled {
 .emptycontent {
 	font-size: 16px;
 	color: #888;
-	position: absolute;
 	text-align: center;
-	top: 30%;
+	margin-top: 100px; /* ie8 */
+	margin-top: 30vh;
 	width: 100%;
 }
 #emptycontent h2,
@@ -1164,7 +1163,7 @@ div.crumb:active {
 
 /* public footer */
 #body-public footer {
-	margin-top: 65px;
+	position: relative;
 	text-align: center;
 }