feat(apps): minor design update for apps view

public/app/features/apps/edit_ctrl.ts

@@ -7,10 +7,9 @@ export class AppEditCtrl {
   appModel: any;
 
   /** @ngInject */
-  constructor(private backendSrv: any, private $routeParams: any) {}
-
-  init() {
+  constructor(private backendSrv: any, private $routeParams: any) {
     this.appModel = {};
+
     this.backendSrv.get(`/api/org/apps/${this.$routeParams.appId}/settings`).then(result => {
       this.appModel = result;
     });

public/app/features/apps/partials/edit.html

@@ -5,99 +5,99 @@
 </navbar>
 
 <div class="page-container">
-	<div class="apps-side-box">
-		<div class="apps-side-box-logo" >
+	<div class="flex-container">
+		<div class="flex-column app-edit-logo-box">
 			<img src="{{ctrl.appModel.info.logos.large}}">
 		</div>
-		<ul class="app-side-box-links">
-			<li>
-				By <a href="{{ctrl.appModel.info.author.url}}" class="external-link" target="_blank">{{ctrl.appModel.info.author.name}}</a>
-			</li>
-			<li ng-repeat="link in ctrl.appModel.info.links">
-				<a href="{{link.url}}" class="external-link" target="_blank">{{link.name}}</a>
-			</li>
-		</ul>
-	</div>
-
-  <div class="page-wide-margined" ng-init="ctrl.init()">
-		<h1>
-			{{ctrl.appModel.name}}
-		</h1>
-		<em>
-			{{ctrl.appModel.info.description}}<br>
-			<span style="small">
-			Version: {{ctrl.appModel.info.version}} &nbsp; &nbsp; Updated: {{ctrl.appModel.info.updated}}
-		</span>
-		</em>
-		<br><br>
+		<div class="flex-column">
+			<h1>
+				{{ctrl.appModel.name}}
+			</h1>
+			<div class="app-edit-description">
+				{{ctrl.appModel.info.description}}<br>
+				<span style="small">
+					Version: {{ctrl.appModel.info.version}} &nbsp; &nbsp; Updated: {{ctrl.appModel.info.updated}}
+				</span>
+			</div>
 
-		<div class="form-inline">
-			<editor-checkbox text="Enabled" model="ctrl.appModel.enabled" change="ctrl.toggleEnabled()"></editor-checkbox>
-			&nbsp; &nbsp; &nbsp;
-			<editor-checkbox text="Pinned" model="ctrl.appModel.pinned" change="ctrl.togglePinned()"></editor-checkbox>
+			<div class="form-inline">
+				<editor-checkbox text="Enabled" model="ctrl.appModel.enabled" change="ctrl.toggleEnabled()"></editor-checkbox>
+				&nbsp; &nbsp; &nbsp;
+				<editor-checkbox text="Pinned" model="ctrl.appModel.pinned" change="ctrl.togglePinned()"></editor-checkbox>
+			</div>
+		</div>
+		<div class="flex-column">
+			<ul class="app-edit-links">
+				<li>
+					By <a href="{{ctrl.appModel.info.author.url}}" class="external-link" target="_blank">{{ctrl.appModel.info.author.name}}</a>
+				</li>
+				<li ng-repeat="link in ctrl.appModel.info.links">
+					<a href="{{link.url}}" class="external-link" target="_blank">{{link.name}}</a>
+				</li>
+			</ul>
 		</div>
+	</div>
 
-		<section class="simple-box">
-			<h3 class="simple-box-header">Included with app:</h3>
-			<div class="flex-container">
-				<div class="simple-box-body simple-box-column">
-					<div class="simple-box-column-header">
-						<i class="fa fa-th-large"></i>
-						Dashboards
-					</div>
-					<ul>
-						<li><em class="small">None</em></li>
-					</ul>
+	<section class="simple-box">
+		<h3 class="simple-box-header">Included with app:</h3>
+		<div class="flex-container">
+			<div class="simple-box-body simple-box-column">
+				<div class="simple-box-column-header">
+					<i class="fa fa-th-large"></i>
+					Dashboards
 				</div>
-				<div class="simple-box-body simple-box-column">
-					<div class="simple-box-column-header">
-						<i class="fa fa-line-chart"></i>
-						Panels
-					</div>
-					<ul>
-						<li><em class="small">None</em></li>
-					</ul>
+				<ul>
+					<li><em class="small">None</em></li>
+				</ul>
+			</div>
+			<div class="simple-box-body simple-box-column">
+				<div class="simple-box-column-header">
+					<i class="fa fa-line-chart"></i>
+					Panels
 				</div>
-				<div class="simple-box-body simple-box-column">
-					<div class="simple-box-column-header">
-						<i class="fa fa-database"></i>
-						Datasources
-					</div>
-					<ul>
-						<li><em class="small">None</em></li>
-					</ul>
+				<ul>
+					<li><em class="small">None</em></li>
+				</ul>
+			</div>
+			<div class="simple-box-body simple-box-column">
+				<div class="simple-box-column-header">
+					<i class="fa fa-database"></i>
+					Datasources
 				</div>
-				<div class="simple-box-body simple-box-column">
-					<div class="simple-box-column-header">
-						<i class="fa fa-files-o"></i>
-						Pages
-					</div>
-					<ul>
-						<li ng-repeat="page in ctrl.appModel.pages">
-							<a href="{{page.url}}" class="external-link">{{page.name}}</a>
-						</li>
-					</ul>
+				<ul>
+					<li><em class="small">None</em></li>
+				</ul>
+			</div>
+			<div class="simple-box-body simple-box-column">
+				<div class="simple-box-column-header">
+					<i class="fa fa-files-o"></i>
+					Pages
 				</div>
-
+				<ul>
+					<li ng-repeat="page in ctrl.appModel.pages">
+						<a href="{{page.url}}" class="external-link">{{page.name}}</a>
+					</li>
+				</ul>
 			</div>
-		</section>
 
-		<section class="simple-box">
-			<h3 class="simple-box-header">Dependencies:</h3>
-			<div class="simple-box-body">
-				Grafana 2.6.x
-			</div>
-		</section>
+		</div>
+	</section>
 
-		<section class="simple-box">
-			<h3 class="simple-box-header">Configuration:</h3>
-			<div class="simple-box-body">
-				<div ng-if="ctrl.appModel.appId">
-					<app-config-view app-model="ctrl.appModel"></app-config-view>
-				</div>
+	<section class="simple-box">
+		<h3 class="simple-box-header">Dependencies:</h3>
+		<div class="simple-box-body">
+			Grafana 2.6.x
+		</div>
+	</section>
+
+	<section class="simple-box">
+		<h3 class="simple-box-header">Configuration:</h3>
+		<div class="simple-box-body">
+			<div ng-if="ctrl.appModel.appId">
+				<app-config-view app-model="ctrl.appModel"></app-config-view>
 			</div>
-		</section>
+		</div>
+	</section>
 
 
-	</div>
 </div>

public/less/apps.less

@@ -1,26 +1,26 @@
-.apps-side-box {
-  float: left;
-}
 
-.apps-side-box-logo {
-  padding: 15px;
+.app-edit-logo-box {
+  padding: 1.2rem;
   background: @grafanaPanelBackground;
-  width: 120px;
   text-align: center;
   img {
-    max-width: 100px;
+    max-width: 7rem;
   }
-  margin-bottom: 10px;
+  margin-right: 2rem;
 }
 
-.app-side-box-links {
+.app-edit-links {
   list-style: none;
-  margin: 0;
+  margin: 0 0 0 2rem;
 
   li {
     background: @grafanaPanelBackground;
     margin-top: 4px;
-    padding-left: 10px;
-    line-height: 25px;
+    padding: 0.2rem 1rem;
   }
 }
+
+.app-edit-description {
+  font-style: italic;
+  margin-bottom: 1.5rem;
+}

public/less/simple-box.less

@@ -44,3 +44,7 @@
 .flex-container {
   display: flex;
 }
+
+.flex-column {
+  flex-direction: row;
+}