Design for applicationDetailView

* Open and Delete App Buttons Fake implementation
* Breadcrumb for applicationDetailView

js/apps/system/aardvark/frontend/js/templates/applicationDetailView.ejs

@@ -1,10 +1,20 @@
 <script id="applicationDetailView.ejs" type="text/template">
   <div class="applicationDetailView">
+    <div class="headerBar">
+      <div class="breadcrumb">
+        <a class="activeBread" href="#applications">Applications</a>
+        &gt;
+        <a class="disabledBread">
+          <%= attributes.name %>
+        </a>
+      </div>
+    </div>
     <section>
+      <div class="header">
         <div class="header_left">
           <img src="foxxes/thumbnail/<%=attributes.app %>" class="icon" alt="Icon for App">
-        <input type="button" value="Open">
+          <input type="button" class="open button-success" value="Open">
-        <input type="button" value="Delete">
+          <input type="button" class="delete button-danger" value="Delete">
         </div>
         <div class="header_right">
           <h3>
@@ -14,6 +24,7 @@
           </h3>
           <p class="description"><%= attributes.description %></p>
         </div>
+      </div>
       <div class="swagger">
         <iframe src="http://localhost:8529/_db/_system/_admin/aardvark/standalone.html#application/documentation/<%= attributes._key %>" name="Documentation"></iframe>
       </div>

js/apps/system/aardvark/frontend/js/views/applicationDetailView.js

@@ -8,11 +8,20 @@ window.ApplicationDetailView = Backbone.View.extend({
   template: templateEngine.createTemplate('applicationDetailView.ejs'),
 
   events: {
+    'click .open': 'openApp',
+    'click .delete': 'deleteApp'
   },
 
   render: function() {
-    console.log(this.model);
     $(this.el).html(this.template.render(this.model));
     return $(this.el);
+  },
+
+  openApp: function() {
+    alert('Open!');
+  },
+
+  deleteApp: function() {
+    alert('Delete!');
   }
 });

js/apps/system/aardvark/frontend/scss/_applicationDetailView.scss

@@ -3,15 +3,24 @@
     float: left;
     width: 900px;
 
+    .header {
+      float: left;
+      margin-bottom: 10px;
+
       .header_left {
         float: left;
         width: 170px;
         text-align: center;
+
+        img {
+          margin: 0px 0px 4px;
+        }
       }
 
       .header_right {
         float: left;
         clear: right;
+        padding: 5px;
 
         .license, .version {
           -webkit-border-radius: 6px;
@@ -25,6 +34,7 @@
           top: -2px;
         }
       }
+    }
 
     .swagger {
       iframe {

js/apps/system/aardvark/frontend/scss/generated.css

@@ -5906,14 +5906,20 @@ input.gv-radio-button {
 .applicationDetailView section {
   float: left;
   width: 900px; }
-  .applicationDetailView section .header_left {
+  .applicationDetailView section .header {
+    float: left;
+    margin-bottom: 10px; }
+    .applicationDetailView section .header .header_left {
       float: left;
       width: 170px;
       text-align: center; }
-  .applicationDetailView section .header_right {
+      .applicationDetailView section .header .header_left img {
+        margin: 0px 0px 4px; }
+    .applicationDetailView section .header .header_right {
       float: left;
-    clear: right; }
+      clear: right;
-    .applicationDetailView section .header_right .license, .applicationDetailView section .header_right .version {
+      padding: 5px; }
+      .applicationDetailView section .header .header_right .license, .applicationDetailView section .header .header_right .version {
         -webkit-border-radius: 6px;
         -moz-border-radius: 6px;
         border-radius: 6px;