diff --git a/public/app/features/apps/edit_ctrl.ts b/public/app/features/apps/edit_ctrl.ts
index 2cbeb4a2ae1..d793f045690 100644
--- a/public/app/features/apps/edit_ctrl.ts
+++ b/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;
});
diff --git a/public/app/features/apps/partials/edit.html b/public/app/features/apps/partials/edit.html
index fc09dc4754c..4de73a25901 100644
--- a/public/app/features/apps/partials/edit.html
+++ b/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="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}} Updated: {{ctrl.appModel.info.updated}}
+ </span>
+ </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}} Updated: {{ctrl.appModel.info.updated}}
- </span>
- </em>
- <br><br>
-
- <div class="form-inline">
- <editor-checkbox text="Enabled" model="ctrl.appModel.enabled" change="ctrl.toggleEnabled()"></editor-checkbox>
-
- <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>
+
+ <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>
-
- <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>
- </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>
- </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>
- </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>
-
- </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 ng-if="ctrl.appModel.appId">
- <app-config-view app-model="ctrl.appModel"></app-config-view>
- </div>
- </div>
- </section>
-
-
</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>
+ </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>
+ </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>
+ </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>
+
+ </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 ng-if="ctrl.appModel.appId">
+ <app-config-view app-model="ctrl.appModel"></app-config-view>
+ </div>
+ </div>
+ </section>
+
+
</div>
diff --git a/public/less/apps.less b/public/less/apps.less
index b53b0272290..de8ad65b83c 100644
--- a/public/less/apps.less
+++ b/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;
+}
diff --git a/public/less/simple-box.less b/public/less/simple-box.less
index 65cd63fe0e3..9bf21f960c7 100644
--- a/public/less/simple-box.less
+++ b/public/less/simple-box.less
@@ -44,3 +44,7 @@
.flex-container {
display: flex;
}
+
+.flex-column {
+ flex-direction: row;
+}