Merge pull request #30697 from nextcloud/backport/30655/stable22

[stable22] Improve layout for the public download page

4 files changed, 28 insertions, 17 deletions

diff --git a/apps/files_sharing/lib/Controller/ShareController.php b/apps/files_sharing/lib/Controller/ShareController.php
index ffd2413e901..cce118f6d6f 100644
--- a/apps/files_sharing/lib/Controller/ShareController.php
+++ b/apps/files_sharing/lib/Controller/ShareController.php
@@ -385,7 +385,7 @@ class ShareController extends AuthPublicShareController {
 		$shareTmpl['protected'] = $share->getPassword() !== null ? 'true' : 'false';
 		$shareTmpl['dir'] = '';
 		$shareTmpl['nonHumanFileSize'] = $shareNode->getSize();
-		$shareTmpl['fileSize'] = \OCP\Util::humanFileSize($shareNode->getSize());
+		$shareTmpl['fileSize'] = str_replace(' ', ' ', \OCP\Util::humanFileSize($shareNode->getSize()));
 		$shareTmpl['hideDownload'] = $share->getHideDownload();
 
 		$hideFileList = false;
diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php
index 832e8a00b1a..677f015ce81 100644
--- a/apps/files_sharing/templates/public.php
+++ b/apps/files_sharing/templates/public.php
@@ -75,7 +75,7 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
 						<?php if (isset($_['mimetype']) && strpos($_['mimetype'], 'image') === 0) { ?>
 							<div class="directDownload">
 								<div>
-									<?php p($_['filename'])?> (<?php p($_['fileSize']) ?>)
+									<?php p($_['filename'])?> (<?php echo($_['fileSize']) ?>)
 								</div>
 								<a href="<?php p($_['downloadURL']); ?>" id="downloadFile" class="button">
 									<span class="icon icon-download"></span>
@@ -87,7 +87,7 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
 				<?php if ($_['previewURL'] === $_['downloadURL'] && !$_['hideDownload']): ?>
 					<div class="directDownload">
 						<div>
-							<?php p($_['filename'])?> (<?php p($_['fileSize']) ?>)
+							<?php p($_['filename'])?> (<?php echo($_['fileSize']) ?>)
 						</div>
 						<a href="<?php p($_['downloadURL']); ?>" id="downloadFile" class="button">
 							<span class="icon icon-download"></span>
diff --git a/apps/files_sharing/tests/Controller/ShareControllerTest.php b/apps/files_sharing/tests/Controller/ShareControllerTest.php
index be2616f70fc..512a61d811e 100644
--- a/apps/files_sharing/tests/Controller/ShareControllerTest.php
+++ b/apps/files_sharing/tests/Controller/ShareControllerTest.php
@@ -329,7 +329,7 @@ class ShareControllerTest extends \Test\TestCase {
 			'protected' => 'true',
 			'dir' => '',
 			'downloadURL' => 'downloadURL',
-			'fileSize' => '33 B',
+			'fileSize' => '33&nbsp;B',
 			'nonHumanFileSize' => 33,
 			'maxSizeAnimateGif' => 10,
 			'previewSupported' => true,
@@ -480,7 +480,7 @@ class ShareControllerTest extends \Test\TestCase {
 			'protected' => 'true',
 			'dir' => '',
 			'downloadURL' => 'downloadURL',
-			'fileSize' => '33 B',
+			'fileSize' => '33&nbsp;B',
 			'nonHumanFileSize' => 33,
 			'maxSizeAnimateGif' => 10,
 			'previewSupported' => true,
@@ -631,7 +631,7 @@ class ShareControllerTest extends \Test\TestCase {
 			'protected' => 'true',
 			'dir' => '',
 			'downloadURL' => 'downloadURL',
-			'fileSize' => '33 B',
+			'fileSize' => '33&nbsp;B',
 			'nonHumanFileSize' => 33,
 			'maxSizeAnimateGif' => 10,
 			'previewSupported' => true,
@@ -756,7 +756,7 @@ class ShareControllerTest extends \Test\TestCase {
 			'protected' => 'false',
 			'dir' => null,
 			'downloadURL' => '',
-			'fileSize' => '1 KB',
+			'fileSize' => '1&nbsp;KB',
 			'nonHumanFileSize' => 1337,
 			'maxSizeAnimateGif' => null,
 			'previewSupported' => null,
diff --git a/core/css/public.scss b/core/css/public.scss
index b171dd4970d..31e48f3c7cc 100644
--- a/core/css/public.scss
+++ b/core/css/public.scss
@@ -1,8 +1,25 @@
-$footer-height: 65px;
-
 #body-public {
-	.header-right {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+
+	#content {
+		flex-grow: 2;
+		min-height: initial;
 
+		/** Center the shared content inside the page */
+		&.app-files_sharing {
+			justify-content: center;
+			align-items: center;
+			#app-content {
+				min-height: inherit;
+				padding-left: 1rem;
+				padding-right: 1rem;
+			}
+		}
+	}
+
+	.header-right {
 		#header-primary-action a {
 			color: var(--color-primary-text);
 		}
@@ -35,12 +52,6 @@ $footer-height: 65px;
 		}
 	}
 
-	#content {
-		// 100% - footer
-		min-height: calc(100% - #{$footer-height});
-
-	}
-
 	/** don't apply content header padding on the base layout */
 	&.layout-base #content {
 		padding-top: 0;
@@ -72,8 +83,8 @@ $footer-height: 65px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		height: $footer-height;
 		flex-direction: column;
+		padding: 0.5rem;
 		p {
 			text-align: center;
 			color: var(--color-text-lighter);