From 09e419c1ecf1abcf665df57d70b514e636d45ab2 Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Wed, 30 Apr 2014 10:49:07 -0400
Subject: [PATCH] ui: experiment with the vertical line

---
 ui/index.html                   | 30 ++++++++++++++++++++++++++----
 ui/static/loading-cylon-red.svg | 11 +++++++++++
 ui/styles/base.scss             | 11 +++++++++++
 3 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 ui/static/loading-cylon-red.svg

diff --git a/ui/index.html b/ui/index.html
index 11148e974..5ac5422ce 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -87,8 +87,13 @@
       </div>
     </div>
 
+    <div class="col-md-1">
+      <div class="border-left hidden-xs hidden-sm">
+        <div class="line"></div>
+      </div>
+    </div>
 
-    <div class="col-md-6 col-md-offset-1">
+    <div class="col-md-6">
       <div class="panel">
         <div {{ bind-attr class=":panel-bar newKey.isValid:bg-green:bg-light-gray" }}></div>
           <div class="panel-heading">
@@ -142,8 +147,13 @@
         </div>
     </div>
 
+    <div class="col-md-1">
+      <div class="border-left hidden-xs hidden-sm">
+        <div class="line"></div>
+      </div>
+    </div>
 
-    <div class="col-md-6 col-md-offset-1">
+    <div class="col-md-6">
       <div class="panel">
         <div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-green" }}></div>
           <div class="panel-heading">
@@ -192,7 +202,13 @@
 
     </div>
 
-    <div class="col-md-6 col-md-offset-1">
+    <div class="col-md-1">
+      <div class="border-left hidden-xs hidden-sm">
+        <div class="line"></div>
+      </div>
+    </div>
+
+    <div class="col-md-6">
       <div class="row">
         {{outlet}}
       </div>
@@ -261,7 +277,13 @@
 
     </div>
 
-    <div class="col-md-6 col-md-offset-1">
+    <div class="col-md-1">
+      <div class="border-left hidden-xs hidden-sm">
+        <div class="line"></div>
+      </div>
+    </div>
+
+    <div class="col-md-6">
       <div class="row">
         {{outlet}}
       </div>
diff --git a/ui/static/loading-cylon-red.svg b/ui/static/loading-cylon-red.svg
new file mode 100644
index 000000000..67140a4e0
--- /dev/null
+++ b/ui/static/loading-cylon-red.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 14 32 18" width="32" height="4" fill="#f20" preserveAspectRatio="none">
+  <path opacity="0.8" transform="translate(0 0)" d="M2 14 V18 H6 V14z">
+    <animateTransform attributeName="transform" type="translate" values="0 0; 24 0; 0 0" dur="2s" begin="0" repeatCount="indefinite" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
+  </path>
+  <path opacity="0.5" transform="translate(0 0)" d="M0 14 V18 H8 V14z">
+    <animateTransform attributeName="transform" type="translate" values="0 0; 24 0; 0 0" dur="2s" begin="0.1s" repeatCount="indefinite" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
+  </path>
+  <path opacity="0.25" transform="translate(0 0)" d="M0 14 V18 H8 V14z">
+    <animateTransform attributeName="transform" type="translate" values="0 0; 24 0; 0 0" dur="2s" begin="0.2s" repeatCount="indefinite" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
+  </path>
+</svg>
diff --git a/ui/styles/base.scss b/ui/styles/base.scss
index 7d0385965..59b8b844c 100644
--- a/ui/styles/base.scss
+++ b/ui/styles/base.scss
@@ -28,6 +28,17 @@ a {
     }
 }
 
+.border-left {
+  display: block;
+  height: 700px;
+
+  .line {
+    margin: 0 auto;
+    background-color: $gray-background;
+    height: 100%;
+    width: 1px;
+  }
+}
 
 .no-margin {
     margin: 0;