Design for applicationDetailView

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

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

@@ -1,18 +1,29 @@
 <script id="applicationDetailView.ejs" type="text/template">
   <div class="applicationDetailView">
-    <section>
-      <div class="header_left">
-        <img src="foxxes/thumbnail/<%=attributes.app %>" class="icon" alt="Icon for App">
-        <input type="button" value="Open">
-        <input type="button" value="Delete">
-      </div>
-      <div class="header_right">
-        <h3>
+    <div class="headerBar">
+      <div class="breadcrumb">
+        <a class="activeBread" href="#applications">Applications</a>
+        &gt;
+        <a class="disabledBread">
           <%= attributes.name %>
-          <span class="license"><%= attributes.license %></span>
-          <span class="version"><%= attributes.app.split(':').pop() %></span>
-        </h3>
-        <p class="description"><%= attributes.description %></p>
+        </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" class="open button-success" value="Open">
+          <input type="button" class="delete button-danger" value="Delete">
+        </div>
+        <div class="header_right">
+          <h3>
+            <%= attributes.name %>
+            <span class="license"><%= attributes.license %></span>
+            <span class="version"><%= attributes.app.split(':').pop() %></span>
+          </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>

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,26 +3,36 @@
     float: left;
     width: 900px;
 
-    .header_left {
+    .header {
       float: left;
-      width: 170px;
-      text-align: center;
-    }
+      margin-bottom: 10px;
 
-    .header_right {
-      float: left;
-      clear: right;
+      .header_left {
+        float: left;
+        width: 170px;
+        text-align: center;
 
-      .license, .version {
-        -webkit-border-radius: 6px;
-        -moz-border-radius: 6px;
-        border-radius: 6px;
-        border: 1px solid #AAA;
-        color: #AAA;
-        padding: 0px 8px;
-        font-size: 0.6em;
-        position: relative;
-        top: -2px;
+        img {
+          margin: 0px 0px 4px;
+        }
+      }
+
+      .header_right {
+        float: left;
+        clear: right;
+        padding: 5px;
+
+        .license, .version {
+          -webkit-border-radius: 6px;
+          -moz-border-radius: 6px;
+          border-radius: 6px;
+          border: 1px solid #AAA;
+          color: #AAA;
+          padding: 0px 8px;
+          font-size: 0.6em;
+          position: relative;
+          top: -2px;
+        }
       }
     }
 

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

@@ -5906,23 +5906,29 @@ input.gv-radio-button {
 .applicationDetailView section {
   float: left;
   width: 900px; }
-  .applicationDetailView section .header_left {
+  .applicationDetailView section .header {
     float: left;
-    width: 170px;
-    text-align: center; }
-  .applicationDetailView section .header_right {
-    float: left;
-    clear: right; }
-    .applicationDetailView section .header_right .license, .applicationDetailView section .header_right .version {
-      -webkit-border-radius: 6px;
-      -moz-border-radius: 6px;
-      border-radius: 6px;
-      border: 1px solid #AAA;
-      color: #AAA;
-      padding: 0px 8px;
-      font-size: 0.6em;
-      position: relative;
-      top: -2px; }
+    margin-bottom: 10px; }
+    .applicationDetailView section .header .header_left {
+      float: left;
+      width: 170px;
+      text-align: center; }
+      .applicationDetailView section .header .header_left img {
+        margin: 0px 0px 4px; }
+    .applicationDetailView section .header .header_right {
+      float: left;
+      clear: right;
+      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;
+        border: 1px solid #AAA;
+        color: #AAA;
+        padding: 0px 8px;
+        font-size: 0.6em;
+        position: relative;
+        top: -2px; }
   .applicationDetailView section .swagger iframe {
     width: 100%;
     height: 600px; }