Merge pull request #19307 from owncloud/large-sidebar-preview-resize

adjust the height of the sidebar preview image when resizing the browser

2 files changed, 9 insertions, 5 deletions

diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css
index 8acf884f219..faa26678562 100644
--- a/apps/files/css/detailsView.css
+++ b/apps/files/css/detailsView.css
@@ -32,12 +32,18 @@
 #app-sidebar .image .thumbnail {
 	width:100%;
 	display:block;
-	height: 250px;
 	background-repeat: no-repeat;
 	background-position: center;
 	background-size: 100%;
 	float: none;
 	margin: 0;
+	height: auto;
+}
+
+#app-sidebar .image.landscape .thumbnail::before {
+	content: '';
+	display: block;
+	padding-bottom: 56.25%; /* sets height of .thumbnail to 9/16 of the width */
 }
 
 #app-sidebar .image.portrait .thumbnail {
diff --git a/apps/files/js/mainfileinfodetailview.js b/apps/files/js/mainfileinfodetailview.js
index 830f074f3f1..82cca0d0fb3 100644
--- a/apps/files/js/mainfileinfodetailview.js
+++ b/apps/files/js/mainfileinfodetailview.js
@@ -176,9 +176,7 @@
 					$iconDiv.removeClass('icon-loading icon-32');
 					var targetHeight = getTargetHeight(img);
 					if (this.model.isImage() && targetHeight > smallPreviewSize) {
-						if (!isLandscape(img)) {
-							$container.addClass('portrait');
-						}
+						$container.addClass(isLandscape(img)? 'landscape': 'portrait');
 						$container.addClass('image');
 					}
 
@@ -186,7 +184,7 @@
 					// when we dont have a preview we show the mime icon in the error handler
 					$iconDiv.css({
 						'background-image': 'url("' + previewUrl + '")',
-						'height': targetHeight
+						height: (isLandscape(img) && targetHeight > smallPreviewSize)? 'auto': targetHeight
 					});
 				}.bind(this),
 				error: function () {