From a392532e28bb50a724e7ea76daad4472307406b2 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Wed, 29 Mar 2017 01:35:18 +0200
Subject: [PATCH] also improve layout of apps from store

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 settings/css/settings.css   | 20 ++++++--------------
 settings/js/apps.js         |  2 +-
 settings/templates/apps.php | 16 ++++++++--------
 3 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index f43170158ce..8fe4ae8bebe 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -568,6 +568,7 @@ span.version {
 .app-score {
 	position: relative;
 	top: 4px;
+	opacity: .5;
 }
 
 #apps-list {
@@ -640,13 +641,6 @@ span.version {
 	}
 }
 
-@media (max-width: 600px), (min-width: 771px) and (max-width: 900px) {
-	#apps-list .section {
-		width: 100%;
-		box-sizing: border-box;
-	}
-}
-
 /* hide app version and level on narrower screens */
 @media only screen and (max-width: 768px) {
 	#apps-list.installed .app-version,
@@ -661,8 +655,8 @@ span.version {
 }
 
 .section h2.app-name {
-	margin-bottom: 8px;
-	display: inline;
+	display: block;
+	margin: 8px 0;
 }
 form.section {
 	position: relative;
@@ -676,11 +670,9 @@ form.section {
 	position: relative;
 }
 .app-image {
-	float: left;
-	padding-right: 10px;
-	width: 80px;
-	height: 80px;
-	opacity: 0.8;
+	height: 150px;
+	opacity: 1;
+	overflow: hidden;
 }
 .app-name,
 .app-version,
diff --git a/settings/js/apps.js b/settings/js/apps.js
index 90453b7afdf..06ec001b672 100644
--- a/settings/js/apps.js
+++ b/settings/js/apps.js
@@ -271,7 +271,7 @@ OC.Settings.Apps = OC.Settings.Apps || {
 	imageUrl : function (url, appfromstore) {
 		var img;
 		if (appfromstore) {
-			img = '<svg width="72" height="72" viewBox="0 0 72 72">';
+			img = '<svg width="250" height="250" viewBox="0 0 72 72">';
 			img += '<image x="0" y="0" width="72" height="72" preserveAspectRatio="xMinYMin meet" xlink:href="' + url  + '"  class="app-icon" /></svg>';
 		} else {
 			img = '<svg width="32" height="32" viewBox="0 0 32 32">';
diff --git a/settings/templates/apps.php b/settings/templates/apps.php
index 224092d9ae5..d1e2e501a62 100644
--- a/settings/templates/apps.php
+++ b/settings/templates/apps.php
@@ -86,14 +86,6 @@ script(
 			{{name}}
 		{{/if}}
 	</h2>
-	<div class="app-version"> {{version}}</div>
-	{{#if profilepage}}<a href="{{profilepage}}" target="_blank" rel="noreferrer">{{/if}}
-	<div class="app-author"><?php p($l->t('by %s', ['{{author}}']));?>
-		{{#if licence}}
-		(<?php p($l->t('%s-licensed', ['{{licence}}'])); ?>)
-		{{/if}}
-	</div>
-	{{#if profilepage}}</a>{{/if}}
 	<div class="app-level">
 		{{{level}}}
 	</div>
@@ -103,6 +95,14 @@ script(
 	<div class="app-detailpage"></div>
 
 	<div class="app-description-container hidden">
+		<div class="app-version">{{version}}</div>
+		{{#if profilepage}}<a href="{{profilepage}}" target="_blank" rel="noreferrer">{{/if}}
+		<div class="app-author"><?php p($l->t('by %s', ['{{author}}']));?>
+			{{#if licence}}
+			(<?php p($l->t('%s-licensed', ['{{licence}}'])); ?>)
+			{{/if}}
+		</div>
+		{{#if profilepage}}</a>{{/if}}
 		<div class="app-description">{{{description}}}</div>
 		<!--<div class="app-changed">{{changed}}</div>-->
 		{{#if documentation}}