From 52a905ce73dddd95a50b271190fd4f07b127f529 Mon Sep 17 00:00:00 2001
From: Lisa Passing <mail@lislis.de>
Date: Wed, 18 Feb 2015 17:50:01 +0100
Subject: [PATCH] position placeholder icons

---
 app/styles/app/layouts/dashboard.sass    | 53 +++++++++++++++++++++++-
 app/templates/dashboard/repositories.hbs | 50 +++++++++++-----------
 2 files changed, 76 insertions(+), 27 deletions(-)

diff --git a/app/styles/app/layouts/dashboard.sass b/app/styles/app/layouts/dashboard.sass
index 1d284179..a951c706 100644
--- a/app/styles/app/layouts/dashboard.sass
+++ b/app/styles/app/layouts/dashboard.sass
@@ -77,19 +77,68 @@ $db-gray: #C9C9C9
     margin: 0
     font-weight: 400
 
+  .icon
+    position: absolute
+    left: 0
+    top: 0
+    bottom: 0
+    margin: auto
+    width: 1.5em
+    height: 1.5em
+    background: pink
+    display: inline-block
+
 .db-repo
   padding-left: 4em
-  // border-right: 1px solid $db-gray
   transform: translateY(0.4em)
 
 .db-status
-  @extend %br-4px
   position: absolute;
   top: 0
   left: 0
   height: 100%
   width: 2.5em
   background-color: $db-gray
+  border-top-left-radius: 4px
+  border-bottom-left-radius: 4px
+
+  .icon-status
+    left: 0
+    right: 0
+    margin: auto
+    top: -2em
+
+  .icon-star
+    left: 0
+    right: 0
+    margin: auto
+    bottom: -2em
+
+.db-job,
+.db-branch,
+.db-commit,
+.db-timeago
+  position: relative
+  padding-left: 2.2em
+  transform: translateY(24%)
+  line-height: 3em
+
+.db-job
+  border-left: 1px solid $db-gray
+
+.db-lock
+  position: absolute
+  left: -2.1em;
+  top: 1.2em;
+
+
+.db-burger
+  height: 100%
+  .icon
+    width: 2em
+    height: 2em
+    left: 0
+    right: 0
 
 .dropdown
   display: none
diff --git a/app/templates/dashboard/repositories.hbs b/app/templates/dashboard/repositories.hbs
index aac31996..35572e1e 100644
--- a/app/templates/dashboard/repositories.hbs
+++ b/app/templates/dashboard/repositories.hbs
@@ -74,11 +74,11 @@
 
     <div class="db db--started row">
       <div class="db-lock"><span class="icon icon-lock"></span></div>
+      <div class="db-status">
+        <span class="icon icon-status icon-started"></span>
+        <span class="icon icon-star"></span>
+      </div>
       <div class="db-repo column medium-3">
-        <div class="db-status">
-          <span class="icon icon-started"></span>
-          <span class="icon icon-star"></span>
-        </div>
         <h3>travis-pro</h3>
         <h2>travis-rubies</h2>
       </div>
@@ -86,7 +86,7 @@
       <p class="db-branch column medium-2"><span class="icon icon-branch"></span>master</p>
       <p class="db-commit column medium-2"><span class="icon icon-github"></span>394348a</p>
       <p class="db-timeago column medium-2"><span class="icon icon-cal"></span>in queue</p>
-      <div class="db-status column medium-1 end">
+      <div class="db-burger column medium-1 end">
         <span class="icon icon-burger"></span>
         <ul class="dropdown">
           <li><a href="#" title="">Deactivate repository</a></li>
@@ -97,11 +97,11 @@
 
     <div class="db db--fail row">
       <div class="db-lock"><span class="icon icon-lock"></span></div>
+      <div class="db-status">
+        <span class="icon icon-status icon-started"></span>
+        <span class="icon icon-star"></span>
+      </div>
       <div class="db-repo column medium-3">
-        <div class="db-status">
-          <span class="icon icon-started"></span>
-          <span class="icon icon-star"></span>
-        </div>
         <h3>travis-pro</h3>
         <h2>travis-rubies</h2>
       </div>
@@ -109,7 +109,7 @@
       <p class="db-branch column medium-2"><span class="icon icon-branch"></span>master</p>
       <p class="db-commit column medium-2"><span class="icon icon-github"></span>394348a</p>
       <p class="db-timeago column medium-2"><span class="icon icon-cal"></span>25 minutes ago</p>
-      <div class="db-status column medium-1 end">
+      <div class="db-burger column medium-1 end">
         <span class="icon icon-burger"></span>
         <ul class="dropdown">
           <li><a href="#" title="">Deactivate repository</a></li>
@@ -120,11 +120,11 @@
 
     <div class="db db--error row">
       <div class="db-lock"><span class="icon icon-lock"></span></div>
+      <div class="db-status">
+        <span class="icon icon-status icon-started"></span>
+        <span class="icon icon-star"></span>
+      </div>
       <div class="db-repo column medium-3">
-        <div class="db-status">
-          <span class="icon icon-started"></span>
-          <span class="icon icon-star"></span>
-        </div>
         <h3>travis-pro</h3>
         <h2>travis-rubies</h2>
       </div>
@@ -132,7 +132,7 @@
       <p class="db-branch column medium-2"><span class="icon icon-branch"></span>master</p>
       <p class="db-commit column medium-2"><span class="icon icon-github"></span>394348a</p>
       <p class="db-timeago column medium-2"><span class="icon icon-cal"></span>in queue</p>
-      <div class="db-status column medium-1 end">
+      <div class="db-burger column medium-1 end">
         <span class="icon icon-burger"></span>
         <ul class="dropdown">
           <li><a href="#" title="">Deactivate repository</a></li>
@@ -143,11 +143,11 @@
 
     <div class="db db--cancel row">
       <div class="db-lock"><span class="icon icon-lock"></span></div>
+      <div class="db-status">
+        <span class="icon icon-status icon-started"></span>
+        <span class="icon icon-star"></span>
+      </div>
       <div class="db-repo column medium-3">
-        <div class="db-status">
-          <span class="icon icon-started"></span>
-          <span class="icon icon-star"></span>
-        </div>
         <h3>travis-pro</h3>
         <h2>travis-rubies</h2>
       </div>
@@ -155,7 +155,7 @@
       <p class="db-branch column medium-2"><span class="icon icon-branch"></span>master</p>
       <p class="db-commit column medium-2"><span class="icon icon-github"></span>394348a</p>
       <p class="db-timeago column medium-2"><span class="icon icon-cal"></span>in queue</p>
-      <div class="db-status column medium-1 end">
+      <div class="db-burger column medium-1 end">
         <span class="icon icon-burger"></span>
         <ul class="dropdown">
           <li><a href="#" title="">Deactivate repository</a></li>
@@ -166,11 +166,11 @@
 
     <div class="db db--pass row">
       <div class="db-lock"><span class="icon icon-lock"></span></div>
+      <div class="db-status">
+        <span class="icon icon-status icon-started"></span>
+        <span class="icon icon-star"></span>
+      </div>
       <div class="db-repo column medium-3">
-        <div class="db-status">
-          <span class="icon icon-started"></span>
-          <span class="icon icon-star"></span>
-        </div>
         <h3>travis-pro</h3>
         <h2>travis-rubies</h2>
       </div>
@@ -178,7 +178,7 @@
       <p class="db-branch column medium-2"><span class="icon icon-branch"></span>master</p>
       <p class="db-commit column medium-2"><span class="icon icon-github"></span>394348a</p>
       <p class="db-timeago column medium-2"><span class="icon icon-cal"></span>in queue</p>
-      <div class="db-status column medium-1 end">
+      <div class="db-burger column medium-1 end">
         <span class="icon icon-burger"></span>
         <ul class="dropdown">
           <li><a href="#" title="">Deactivate repository</a></li>