basic inspect data directive

www/md_base/src/app/about/about.controller.coffee

@@ -1,4 +1,8 @@
 class About extends Controller
 
-    constructor: () ->
-
+    constructor: (config) ->
+        @projectInfo =
+            'Project Name': config.title
+            'Project URL': config.titleURL
+        @versions = config.versions
+        @config = config

www/md_base/src/app/about/about.tpl.jade

@@ -1,13 +1,16 @@
 div.about(layout="column")
   section(layout-md="column", layout-gt-md="row")
     div.meta(flex-gt-md="33")
-      h2 Runing informations
+      h2 Runtime informations
       p
         | Informations, configrations and statuses about this running instance of buildbot.
-    div.content
-      | consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-      | pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-      | laborum.
+    div.content(flex-gt-md="66")
+      h3 Project Info
+      inspect-data(data="about.projectInfo")
+      h3 Version Info
+      inspect-data(data="about.versions")
+      h3 Configrations
+      inspect-data(data="about.config")
 
   section(layout-md="column", layout-gt-md="row")
     div.meta(flex-gt-md="33")

www/md_base/src/app/common/directives/inspectdata/inspectdata.directive.coffee

@@ -0,0 +1,34 @@
+class InspectData extends Directive
+
+    constructor: ->
+        return {
+            restrict: 'E'
+            templateUrl: 'views/inspectdata.html'
+            controller: '_InspectDataController'
+            controllerAs: 'inspectdata'
+            scope:
+                data: '='
+        }
+
+
+class _InspectData extends Controller
+    addItem: (k, v) ->
+        v = JSON.stringify(v) if typeof(v) != 'string'
+        @items.push
+            key: k
+            value: v
+
+    constructor: ($scope) ->
+        return if not $scope.data
+
+        @items = []
+        @data = $scope.data
+
+        if @data instanceof Array
+            for item in @data
+                @addItem item[0], item[1]
+        else
+            for k, v of @data
+                @addItem(k, v)
+
+

www/md_base/src/app/common/directives/inspectdata/inspectdata.tpl.jade

@@ -0,0 +1,4 @@
+div.inspect-data
+  div.row(layout="row", ng-repeat="item in inspectdata.items")
+    div.key(flex="33") {{ item.key }}
+    div.value(flex="66") {{ item.value }}

www/md_base/src/styles/about.less

@@ -11,24 +11,22 @@
 
     p {
       line-height: 1.4;
-      margin-top: 0;
     }
 
     ul {
       padding-left: 20px;
     }
 
+    h2 {
+      font-size: 18px;
+      color: #673ab7;
+      font-weight: normal;
+    }
+
     .meta{
       font-size: 14px;
       padding-right: 60px;
 
-      h2 {
-        font-size: 18px;
-        margin-top: 0;
-        color: #673ab7;
-        font-weight: normal;
-      }
-
       p {
         color: #666;
       }

www/md_base/src/styles/inspectdata.less

@@ -0,0 +1,34 @@
+.inspect-data {
+  margin: 10px 0;
+
+  .row {
+    padding: 4px 0;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .row:nth-child(odd) {
+    background-color: #efefef;
+
+    .value {
+      border-left: 1px solid #FFF;
+    }
+  }
+
+  .row:nth-child(even) {
+    .value {
+      border-left: 1px solid #efefef;
+    }
+
+    &:last-child {
+      border-bottom: 1px solid #efefef;
+    }
+  }
+
+  .key, .value {
+    height: 28px;
+    line-height: 28px;
+    padding: 2px 10px;
+  }
+
+}