Style app bundles

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

settings/Controller/AppSettingsController.php

@@ -133,8 +133,8 @@ class AppSettingsController extends Controller {
 		$formattedCategories = [
 			['id' => self::CAT_ALL_INSTALLED, 'ident' => 'installed', 'displayName' => (string)$this->l10n->t('Your apps')],
 			['id' => self::CAT_ENABLED, 'ident' => 'enabled', 'displayName' => (string)$this->l10n->t('Enabled apps')],
-			['id' => self::CAT_APP_BUNDLES, 'ident' => 'app-bundles', 'displayName' => (string)$this->l10n->t('App bundles')],
 			['id' => self::CAT_DISABLED, 'ident' => 'disabled', 'displayName' => (string)$this->l10n->t('Disabled apps')],
+			['id' => self::CAT_APP_BUNDLES, 'ident' => 'app-bundles', 'displayName' => (string)$this->l10n->t('App bundles')],
 		];
 		$categories = $this->categoryFetcher->get();
 		foreach($categories as $category) {

settings/css/settings.css

@@ -520,18 +520,28 @@ input.userFilter {width: 200px;}
 /* APPS */
 
 /* Bundle header */
-#apps-list > h2 {
-	display: block;
-	width: 100%;
-	margin-top: 50px;
-	margin-left: 50px;
-	font-weight: 600;
+#apps-list .apps-header {
+	display: table-row;
+	position: relative;
+}
+#apps-list .apps-header div {
+	display: table-cell;
+	height: 50px;
 }
-#apps-list > h2 .enable {
+#apps-list .apps-header h2 {
+	display: table-cell;
+	position: absolute;
+	bottom: 0;
+	padding-left: 6px;
+}
+#apps-list .apps-header h2 .enable {
 	position: relative;
 	top: -1px;
 	margin-left: 12px;
 }
+#apps-list .apps-header h2 + .section {
+	margin-top: 50px;
+}
 
 #app-content > svg.app-filter {
 	float: left;
@@ -539,7 +549,7 @@ input.userFilter {width: 200px;}
 	width: 0;
 }
 
-#app-category-disabled {
+#app-category-app-bundles {
 	margin-bottom: 20px;
 }
 
@@ -572,6 +582,10 @@ span.version {
 	border-radius: 3px;
 	padding: 3px 6px;
 }
+.app-level a {
+	padding: 10px;
+	white-space: nowrap;
+}
 .app-level .official {
 	border-color: #37ce02;
 	background-position: left center;
@@ -751,6 +765,7 @@ form.section {
 	display: table;
 	width: 100%;
 	height: auto;
+	margin-bottom: 100px;
 }
 
 #apps-list.installed .section {

settings/templates/apps.php

@@ -31,7 +31,14 @@ script(
 
 <script id="app-template-installed" type="text/x-handlebars">
 {{#if newCategory}}
-<h2>{{categoryName}} <input class="enable" type="submit" data-bundleid="{{bundleId}}" data-active="true" value="<?php p($l->t('Enable all'));?>"/></h2>
+<div class="apps-header">
+	<div class="app-image"></div>
+	<h2>{{categoryName}} <input class="enable" type="submit" data-bundleid="{{bundleId}}" data-active="true" value="<?php p($l->t('Enable all'));?>"/></h2>
+	<div class="app-version"></div>
+	<div class="app-level"></div>
+	<div class="app-groups"></div>
+	<div class="actions">&nbsp;</div>
+</div>
 {{/if}}
 <div class="section" id="app-{{id}}">
 	<div class="app-image app-image-icon"></div>