From 597c31b3753e41e604370b3a16a3f5b536e3ae53 Mon Sep 17 00:00:00 2001
From: Lisa Passing <mail@lislis.de>
Date: Fri, 20 Feb 2015 14:04:55 +0100
Subject: [PATCH] get dropdown right

---
 app/styles/app/components/buttons.sass   |  1 +
 app/styles/app/layouts/dashboard.sass    | 43 ++++++++++-----
 app/templates/dashboard/repositories.hbs | 70 ++++++++++++------------
 3 files changed, 66 insertions(+), 48 deletions(-)

diff --git a/app/styles/app/components/buttons.sass b/app/styles/app/components/buttons.sass
index bb568a24..c3bfbe88 100644
--- a/app/styles/app/components/buttons.sass
+++ b/app/styles/app/components/buttons.sass
@@ -57,6 +57,7 @@ $button-border-color: #d4d4d4
   .button--signin
     display: inline-block
     padding: 0.7em 2em 0.65em 0.6em
+    margin-right: 1em
     color: $white
     font-size: $font-size-small
     line-height: 1
diff --git a/app/styles/app/layouts/dashboard.sass b/app/styles/app/layouts/dashboard.sass
index cd929155..3729c758 100644
--- a/app/styles/app/layouts/dashboard.sass
+++ b/app/styles/app/layouts/dashboard.sass
@@ -89,7 +89,7 @@ $db-gray: #C9C9C9
     opacity: .9
 
 .db-controls
-  position: relative
+  // position: relative
   transform: translateY(24%)
   line-height: 3em
   border-left: 1px solid $db-gray
@@ -109,6 +109,7 @@ $db-gray: #C9C9C9
 .db-timeago
   position: relative
   padding-left: 2.2em
+  z-index: 30
 
 .db-lock
   position: absolute
@@ -129,27 +130,43 @@ $db-gray: #C9C9C9
   height: 100%
   width: 4em
   cursor: pointer
+  z-index: 30
   .icon
     width: 2em
     height: 2em
     left: 0
     right: 0
 
-  .dropdown
-    @include resetul
+.db-burger:hover ~ .dropdown
+  display: block
+
+.dropdown
+  @include resetul
+  @extend %br-4px
+  position: absolute
+  padding: .5em
+  z-index: 90
+  width: 15em;
+  right: 0;
+  top: 4em;
+  border: 2px $dropdown-color solid;
+  background-color: $white
+  &:before
+    content: ""
+    width: 1.2em
+    height: 1.2em
+    display: block
     position: absolute
-    z-index: 50
-    width: 10em;
-    right: 0;
-    top: 3em;
-    border: solid;
+    top: -0.7em;
+    right: 1.1em;
     background-color: $white
+    
+    background-color: #fff;
+    border-top: solid 2px $dropdown-color;
+    border-left: solid 2px $dropdown-color;
+    transform: rotate(45deg);
 
-    //display: none
-
-  // &:hover
-  //   .dropdown
-  //     display: block
+  display: none
 
 
 @mixin colorDbelements($color)
diff --git a/app/templates/dashboard/repositories.hbs b/app/templates/dashboard/repositories.hbs
index 32f528af..d9af9b3c 100644
--- a/app/templates/dashboard/repositories.hbs
+++ b/app/templates/dashboard/repositories.hbs
@@ -87,14 +87,14 @@
         <p class="db-branch column medium-3"><span class="icon icon-branch"></span>master</p>
         <p class="db-commit column medium-3"><span class="icon icon-github"></span>394348a</p>
         <p class="db-timeago column medium-3"><span class="icon icon-cal"></span>in queue</p>
-        <div class="db-burger">
-          <span class="icon icon-burger"></span>
-          <ul class="dropdown">
-            <li><a href="#" title="">Deactivate repository</a></li>
-            <li><a href="#" title="">Trigger a build</a></li>
-          </ul>
-        </div>
       </div>
+      <div class="db-burger">
+        <span class="icon icon-burger"></span>
+      </div>
+      <ul class="dropdown">
+        <li><a href="#" title="">Deactivate repository</a></li>
+        <li><a href="#" title="">Trigger a build</a></li>
+      </ul>
     </div>
 
     <div class="db db--fail row">
@@ -112,14 +112,14 @@
         <p class="db-branch column medium-3"><span class="icon icon-branch"></span>master</p>
         <p class="db-commit column medium-3"><span class="icon icon-github"></span>394348a</p>
         <p class="db-timeago column medium-3"><span class="icon icon-cal"></span>25 minutes ago</p>
-        <div class="db-burger">
-          <span class="icon icon-burger"></span>
-          <ul class="dropdown">
-            <li><a href="#" title="">Deactivate repository</a></li>
-            <li><a href="#" title="">Trigger a build</a></li>
-          </ul>
-        </div>
       </div>
+      <div class="db-burger">
+        <span class="icon icon-burger"></span>
+      </div>
+      <ul class="dropdown">
+        <li><a href="#" title="">Deactivate repository</a></li>
+        <li><a href="#" title="">Trigger a build</a></li>
+      </ul>
     </div>
 
     <div class="db db--error row">
@@ -137,14 +137,14 @@
         <p class="db-branch column medium-3"><span class="icon icon-branch"></span>master</p>
         <p class="db-commit column medium-3"><span class="icon icon-github"></span>394348a</p>
         <p class="db-timeago column medium-3"><span class="icon icon-cal"></span>1 hour ago</p>
-        <div class="db-burger">
-          <span class="icon icon-burger"></span>
-          <ul class="dropdown">
-            <li><a href="#" title="">Deactivate repository</a></li>
-            <li><a href="#" title="">Trigger a build</a></li>
-          </ul>
-        </div>
       </div>
+      <div class="db-burger">
+        <span class="icon icon-burger"></span>
+      </div>
+      <ul class="dropdown">
+        <li><a href="#" title="">Deactivate repository</a></li>
+        <li><a href="#" title="">Trigger a build</a></li>
+      </ul>
     </div>
 
     <div class="db db--cancel row">
@@ -162,14 +162,14 @@
         <p class="db-branch column medium-3"><span class="icon icon-branch"></span>master</p>
         <p class="db-commit column medium-3"><span class="icon icon-github"></span>394348a</p>
         <p class="db-timeago column medium-3"><span class="icon icon-cal"></span>3 hours ago</p>
-        <div class="db-burger">
-          <span class="icon icon-burger"></span>
-          <ul class="dropdown">
-            <li><a href="#" title="">Deactivate repository</a></li>
-            <li><a href="#" title="">Trigger a build</a></li>
-          </ul>
-        </div>
       </div>
+      <div class="db-burger">
+        <span class="icon icon-burger"></span>
+      </div>
+      <ul class="dropdown">
+        <li><a href="#" title="">Deactivate repository</a></li>
+        <li><a href="#" title="">Trigger a build</a></li>
+      </ul>
     </div>
 
     <div class="db db--pass row">
@@ -187,14 +187,14 @@
         <p class="db-branch column medium-3"><span class="icon icon-branch"></span>master</p>
         <p class="db-commit column medium-3"><span class="icon icon-github"></span>394348a</p>
         <p class="db-timeago column medium-3"><span class="icon icon-cal"></span>2 days ago</p>
-        <div class="db-burger">
-          <span class="icon icon-burger"></span>
-          <ul class="dropdown">
-            <li><a href="#" title="">Deactivate repository</a></li>
-            <li><a href="#" title="">Trigger a build</a></li>
-          </ul>
-        </div>
       </div>
+      <div class="db-burger">
+        <span class="icon icon-burger"></span>
+      </div>
+      <ul class="dropdown">
+        <li><a href="#" title="">Deactivate repository</a></li>
+        <li><a href="#" title="">Trigger a build</a></li>
+      </ul>
     </div>
 
   </section>