From 07119585f04dc2aabe7a4a2a65ccba57ef2999d3 Mon Sep 17 00:00:00 2001
From: runnabro <tli415@gmail.com>
Date: Tue, 21 Mar 2017 17:56:31 -0700
Subject: [PATCH 1/2] add markup for compose and testing

---
 views/web-panel.hbs | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/views/web-panel.hbs b/views/web-panel.hbs
index 9721dd6..cbc19a1 100644
--- a/views/web-panel.hbs
+++ b/views/web-panel.hbs
@@ -1,8 +1,9 @@
 {{!< layout}}
 {{#if instance}}
   {{#if isTestingOnly}}
-    <div>Tests {{{testResults}}} <img src="https://s3-us-west-1.amazonaws.com/runnable-design/status-{{{testColor}}}.svg" title="{{{testResults}}}" width="9" height="9" class="icon-status">{{{repoName}}}/{{{instanceName}}}.</div>
-    <div><a href=http://{{{url}}} target="_blank" class="link">View on Runnable</a></div>
+    <div><img src="https://s3-us-west-1.amazonaws.com/runnable-design/status-{{{testColor}}}.svg" title="{{{testResults}}}" width="9" height="9" class="icon-status">{{{instanceName}}}</div>
+    <div>Tests: <a href="testUrl" class="link" target="_blank"><strong>{{{testResults}}}</strong></a></div>
+    <div><a href=http://{{{url}}} target="_blank" class="link">Manage on Runnable</a></div>
   {{else}}
     {{#if status}}
     {{!--
@@ -12,14 +13,14 @@
         "red"
         "gray"
     --}}
-    <div>{{{ state }}} <img src="https://s3-us-west-1.amazonaws.com/runnable-design/status-{{{statusColor}}}.svg" title="{{{status}}}" width="9" height="9" class="icon-status">{{{repoName}}}/{{{instanceName}}}.</div>
-      <div><a href="{{{environmentUrl}}}" target="_blank" class="link">View output</a></div>
-      <div><a href=http://{{{url}}} target="_blank" class="link">Manage on Runnable</a></div>
+    <div><img src="https://s3-us-west-1.amazonaws.com/runnable-design/status-{{{statusColor}}}.svg" title="{{{status}}}" width="9" height="9" class="icon-status"><a href="{{{environmentUrl}}}" target="_blank" class="link">{{{instanceName}}}</a></div>
+    <div>Tests: <a href="testUrl" class="link" target="_blank"><strong>Passed</strong></a></div>
+    <div><a href=http://{{{url}}} target="_blank" class="link">Manage on Runnable</a></div>
     {{else}}
     {{!-- if no status (between building and running) --}}
-    <div>{{{ state }}} <img src="https://s3-us-west-1.amazonaws.com/runnable-design/status-{{{statusColor}}}.svg" title="{{{status}}}" width="9" height="9" class="icon-status">{{{repoName}}}/{{{instanceName}}}</div>
-      <div><a href="{{{environmentUrl}}}" target="_blank" class="link">View output</a></div>
-      <div><a href=http://{{{url}}} target="_blank" class="link">Manage on Runnable</a></div>
+    <div><img src="https://s3-us-west-1.amazonaws.com/runnable-design/status-{{{statusColor}}}.svg" title="{{{status}}}" width="9" height="9" class="icon-status">{{{instanceName}}}</div>
+    <div>Tests: <a href="testUrl" class="link" target="_blank"><strong>Passed</strong></a></div>
+    <div><a href=http://{{{url}}} target="_blank" class="link">Manage on Runnable</a></div>
     {{/if}}
   {{/if}}
 {{/if}}

From 18b09cd64c6bd296c9f74b815038a761c3e8d9d5 Mon Sep 17 00:00:00 2001
From: runnabro <tli415@gmail.com>
Date: Tue, 21 Mar 2017 19:44:40 -0700
Subject: [PATCH 2/2] update markup for compose and testing

---
 public/css/addon.css | 19 ++++++++++++++++++-
 views/web-panel.hbs  | 44 ++++++++++++++++++++++----------------------
 2 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/public/css/addon.css b/public/css/addon.css
index 237081e..7847dac 100644
--- a/public/css/addon.css
+++ b/public/css/addon.css
@@ -2,6 +2,24 @@ body {
   background: #fff;
 }
 
+section + section {
+  margin-top: 9px;
+}
+
+.section-manage {
+  margin-left: 17px;
+}
+
+.container {
+  display: inline-block;
+}
+
+.container + .container::before {
+  content: ',';
+  display: inline-block;
+  padding-right: 4px;
+}
+
 .icon-status {
   margin-left: 2px;
   margin-right: 6px;
@@ -13,5 +31,4 @@ body {
 
 .link {
   display: inline-block;
-  margin-top: 9px;
 }
diff --git a/views/web-panel.hbs b/views/web-panel.hbs
index cbc19a1..afdc922 100644
--- a/views/web-panel.hbs
+++ b/views/web-panel.hbs
@@ -1,29 +1,29 @@
 {{!< layout}}
 {{#if instance}}
-  {{#if isTestingOnly}}
-    <div><img src="https://s3-us-west-1.amazonaws.com/runnable-design/status-{{{testColor}}}.svg" title="{{{testResults}}}" width="9" height="9" class="icon-status">{{{instanceName}}}</div>
-    <div>Tests: <a href="testUrl" class="link" target="_blank"><strong>{{{testResults}}}</strong></a></div>
-    <div><a href=http://{{{url}}} target="_blank" class="link">Manage on Runnable</a></div>
-  {{else}}
-    {{#if status}}
-    {{!--
-      possible status colors:
-        "green"
-        "orange"
-        "red"
-        "gray"
-    --}}
-    <div><img src="https://s3-us-west-1.amazonaws.com/runnable-design/status-{{{statusColor}}}.svg" title="{{{status}}}" width="9" height="9" class="icon-status"><a href="{{{environmentUrl}}}" target="_blank" class="link">{{{instanceName}}}</a></div>
-    <div>Tests: <a href="testUrl" class="link" target="_blank"><strong>Passed</strong></a></div>
-    <div><a href=http://{{{url}}} target="_blank" class="link">Manage on Runnable</a></div>
-    {{else}}
-    {{!-- if no status (between building and running) --}}
-    <div><img src="https://s3-us-west-1.amazonaws.com/runnable-design/status-{{{statusColor}}}.svg" title="{{{status}}}" width="9" height="9" class="icon-status">{{{instanceName}}}</div>
-    <div>Tests: <a href="testUrl" class="link" target="_blank"><strong>Passed</strong></a></div>
-    <div><a href=http://{{{url}}} target="_blank" class="link">Manage on Runnable</a></div>
-    {{/if}}
+  {{!-- staging containers --}}
+  <section>
+    {{#each container}}
+    <div class="container">
+      <img src="https://s3-us-west-1.amazonaws.com/runnable-design/status-{{{statusColor}}}.svg" title="{{{status}}}" width="9" height="9" class="icon-status">
+      <a href="{{{environmentUrl}}}" target="_blank" class="link">{{{instanceName}}}</a>
+    </div>
+    {{/each}}
+  </section>
+
+  {{!-- conditionally show test results --}}
+  {{#if testResults}}
+  <section>
+    <img src="https://s3-us-west-1.amazonaws.com/runnable-design/status-{{{testColor}}}.svg" title="{{{testResults}}}" width="9" height="9" class="icon-status">
+    <a href="testUrl" class="link" target="_blank">{{{testResults}}}</a>
+  </section>
   {{/if}}
+
+  {{!-- manage on runnable url --}}
+  <section class="section-manage">
+    <a href=http://{{{url}}} target="_blank" class="link">Manage on Runnable</a>
+  </section>
 {{/if}}
+
 {{#unless instance}}
   <div><span class="emoji">🔭</span> {{{text}}}</div>
   <div><a href="//runnable.com/" class="link" target="_blank">Go to Runnable</a></div>