Merge pull request #525 from nextcloud/fix-theme-logo-position

Fix theme logo position and shape

apps/theming/js/settings-admin.js

@@ -75,11 +75,11 @@ function preview(setting, value) {
 		var logos = document.getElementsByClassName('logo-icon');
 		var timestamp = new Date().getTime();
 		if (value !== '') {
-			logos[0].style.background = "url('" + OC.generateUrl('/apps/theming/logo') + "?v" + timestamp + "')";
-			logos[0].style.backgroundSize = "62px 34px";
+			logos[0].style.backgroundImage = "url('" + OC.generateUrl('/apps/theming/logo') + "?v" + timestamp + "')";
+			logos[0].style.backgroundSize = "contain";
 		} else {
-			logos[0].style.background = "url('" + OC.getRootPath() + '/core/img/logo-icon.svg?v' + timestamp +"')";
-			logos[0].style.backgroundSize = "62px 34px";
+			logos[0].style.backgroundImage = "url('" + OC.getRootPath() + '/core/img/logo-icon.svg?v' + timestamp +"')";
+			logos[0].style.backgroundSize = "contain";
 		}
 	}
 }

apps/theming/lib/controller/themingcontroller.php

@@ -224,10 +224,11 @@ class ThemingController extends Controller {
 		if($logo !== '') {
 			$responseCss .= sprintf('#header .logo {
 				background-image: url(\'./logo?v='.$cacheBusterValue.'\');
+				background-size: contain;
 			}
 			#header .logo-icon {
 				background-image: url(\'./logo?v='.$cacheBusterValue.'\');
-				background-size: 62px 34px;
+				background-size: contain;
 			}'
 			);
 		}

apps/theming/tests/lib/controller/ThemingControllerTest.php

@@ -383,10 +383,11 @@ class ThemingControllerTest extends TestCase {
 
 		$expected = new Http\DataDownloadResponse('#header .logo {
 				background-image: url(\'./logo?v=0\');
+				background-size: contain;
 			}
 			#header .logo-icon {
 				background-image: url(\'./logo?v=0\');
-				background-size: 62px 34px;
+				background-size: contain;
 			}', 'style', 'text/css');
 		$expected->cacheFor(3600);
 		@$this->assertEquals($expected, $this->themingController->getStylesheet());
@@ -445,10 +446,11 @@ class ThemingControllerTest extends TestCase {
 
 		$expected = new Http\DataDownloadResponse('#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #000}#header .logo {
 				background-image: url(\'./logo?v=0\');
+				background-size: contain;
 			}
 			#header .logo-icon {
 				background-image: url(\'./logo?v=0\');
-				background-size: 62px 34px;
+				background-size: contain;
 			}#body-login {
 				background-image: url(\'./loginbackground?v=0\');
 			}', 'style', 'text/css');
@@ -479,10 +481,11 @@ class ThemingControllerTest extends TestCase {
 
 		$expected = new Http\DataDownloadResponse('#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #fff}#header .logo {
 				background-image: url(\'./logo?v=0\');
+				background-size: contain;
 			}
 			#header .logo-icon {
 				background-image: url(\'./logo?v=0\');
-				background-size: 62px 34px;
+				background-size: contain;
 			}#body-login {
 				background-image: url(\'./loginbackground?v=0\');
 			}#header .header-appname, #expandDisplayName { color: #000000; } #header .icon-caret { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/caret-dark.svg\'); } .searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid { color: #000; border: 1px solid rgba(0, 0, 0, .5); }', 'style', 'text/css');

core/css/header.css

@@ -71,7 +71,7 @@
 	background-image: url('../img/logo-icon.svg');
 	background-repeat: no-repeat;
 	background-size: 175px;
-	background-position: center 30px;
+	background-position: center;
 	width: 252px;
 	height: 120px;
 	margin: 0 auto;
@@ -82,6 +82,7 @@
 	display: inline-block;
 	background-image: url('../img/logo-icon.svg');
 	background-repeat: no-repeat;
+	background-position: center center;
 	width: 62px;
 	height: 34px;
 }