feat(apps): worked on apps edit view styles

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

@@ -21,7 +21,7 @@
 	</div>
 
   <div class="page-wide-margined" ng-init="ctrl.init()">
-		<h2>{{ctrl.appModel.name}}</h2>
+		<h1>{{ctrl.appModel.name}}</h1>
 		<em>
 			{{ctrl.appModel.info.description}}
 		</em>
@@ -33,6 +33,66 @@
 			<editor-checkbox text="Pinned" model="ctrl.appModel.pinned" change="ctrl.togglePinned()"></editor-checkbox>
 		</div>
 
-			<app-config-loader></app-config-loader>
+		<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>Test</li>
+						<li>Test2</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>
+					<ul>
+						<li>Test</li>
+						<li>Test2</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>
+					<ul>
+						<li>Test</li>
+						<li>Test2</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>Test</li>
+						<li>Test2</li>
+					</ul>
+				</div>
+
+			</div>
+		</section>
+
+		<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>
+		</section>
+
+		<app-config-loader></app-config-loader>
 	</div>
 </div>

public/less/grafana.less

@@ -25,6 +25,7 @@
 @import "filter-controls.less";
 @import "filter-list.less";
 @import "filter-table.less";
+@import "simple-box.less";
 
 .row-control-inner {
   padding:0px;

public/less/simple-box.less

@@ -0,0 +1,46 @@
+
+@simpleBoxBorderWidth:  0.2rem;
+@simpleBoxMargin:  1.5rem;
+@simpleBoxBodyPadding:  0.5rem 0 0.5rem 1rem;
+
+.simple-box {
+  margin-top: @simpleBoxMargin;
+  background: @grafanaPanelBackground;
+}
+
+.simple-box-header {
+  font-weight: normal;
+  line-height: 2.5rem;
+  color: @textColor;
+  margin: 0;
+  padding-left: 1rem;
+  border-bottom: @simpleBoxBorderWidth solid @bodyBackground;
+}
+
+.simple-box-column {
+  flex-direction: row;
+  width: 25%;
+  border-right: @simpleBoxBorderWidth solid @bodyBackground;
+  ul {
+    margin: 0.7rem 0 1rem 1.2rem;
+  }
+}
+
+.simple-box-column:last-child {
+  border: none;
+}
+
+.simple-box-column-header {
+  font-size: @fontSizeLarge;
+  i {
+    padding-right: 0.3rem;
+  }
+}
+
+.simple-box-body {
+  padding: @simpleBoxBodyPadding;
+}
+
+.flex-container {
+  display: flex;
+}