Starting design of applicationDetailView

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

@@ -1,12 +1,12 @@
 <script id="applicationDetailView.ejs" type="text/template">
+  <div class="applicationDetailView">
     <section>
-    <div class='applicationDetailView'>
+      <div class="header_left">
-      <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'>
+      <div class="header_right">
         <h3>
           <%= attributes.name %>
           <span class="license"><%= attributes.license %></span>
@@ -15,8 +15,7 @@
         <p class="description"><%= attributes.description %></p>
       </div>
       <div class="swagger">
-        <iframe src="http://localhost:8529/_db/_system/_admin/aardvark/standalone.html#application/documentation/<%= attributes._key %>" width="800" height="600" name="Documentation"></iframe>
+        <iframe src="http://localhost:8529/_db/_system/_admin/aardvark/standalone.html#application/documentation/<%= attributes._key %>" name="Documentation"></iframe>
-      </div>
       </div>
     </section>
     <aside>
@@ -33,4 +32,5 @@
         </dd>
       </dl>
     </aside>
+  </div>
 </script>

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

@@ -0,0 +1,42 @@
+.applicationDetailView {
+  section {
+    float: left;
+    width: 900px;
+
+    .header_left {
+      float: left;
+      width: 170px;
+      text-align: center;
+    }
+
+    .header_right {
+      float: left;
+      clear: right;
+
+      .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;
+      }
+    }
+
+    .swagger {
+      iframe {
+        width: 100%;
+        height: 600px;
+      }
+    }
+  }
+
+  aside {
+    float: left;
+    clear: right;
+    width: 200px;
+  }
+}

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

@@ -5903,6 +5903,34 @@ input.gv-radio-button {
   margin-left: 10px;
   margin-top: 7px; }
 
+.applicationDetailView section {
+  float: left;
+  width: 900px; }
+  .applicationDetailView section .header_left {
+    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; }
+  .applicationDetailView section .swagger iframe {
+    width: 100%;
+    height: 600px; }
+.applicationDetailView aside {
+  float: left;
+  clear: right;
+  width: 200px; }
+
 .hotkeysList .hotkeysLabel {
   clear: both;
   color: #000;

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

@@ -65,6 +65,8 @@
 @import 'documentView';
 // progress view
 @import 'progressView';
+// application detail view
+@import 'applicationDetailView';
 
 // screen hotkeys
 @import 'hotkeys';