From 71f2d9ee1b3ad0fe51d5e62f500db489c68a83f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Wed, 4 Jun 2014 13:53:36 +0200
Subject: [PATCH] General cool popover mixin

---
 app/styles/components/popover.scss | 25 +++++++++++++++++++++
 app/styles/main.scss               |  1 +
 app/styles/modules/nav.scss        | 35 ++++++++++++++++++++++--------
 app/views/modules/nav.jade         | 12 ++++++++--
 4 files changed, 62 insertions(+), 11 deletions(-)
 create mode 100644 app/styles/components/popover.scss

diff --git a/app/styles/components/popover.scss b/app/styles/components/popover.scss
new file mode 100644
index 00000000..c1fbef80
--- /dev/null
+++ b/app/styles/components/popover.scss
@@ -0,0 +1,25 @@
+@mixin popover($width, $top:"", $left:"", $bottom:"", $right:"") {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    position: absolute;
+    background: $blackish;
+    color: $white;
+    font-family: 'DroidSans';
+    padding: 10px;
+    top: #{$top};
+    left: #{$left};
+    bottom: #{$bottom};
+    right: #{$right};
+    width: $width;
+    display: none;
+    a {
+        padding: 10px 2px;
+        display: block;
+        @extend .small;
+        border-bottom: 1px solid $grayer;
+        &:last-child {
+            border: none;
+        }
+    }
+}
diff --git a/app/styles/main.scss b/app/styles/main.scss
index a9e2f39b..e9cf5279 100755
--- a/app/styles/main.scss
+++ b/app/styles/main.scss
@@ -20,6 +20,7 @@ $prefix-for-spec:      true;
 @import 'components/buttons';
 @import 'components/avatar';
 @import 'components/summary';
+@import 'components/popover';
 
 //Layout
 @import 'layout/base';
diff --git a/app/styles/modules/nav.scss b/app/styles/modules/nav.scss
index b54dad9f..ba66ba2c 100644
--- a/app/styles/modules/nav.scss
+++ b/app/styles/modules/nav.scss
@@ -51,27 +51,44 @@
     }
 }
 
+.user-settings {
+
+}
+
 .user {
     width: 80px;
     padding: 0 10px;
     position: absolute;
     bottom: 1em;
-    a {
-        text-align: center;
-        color: $white;
-        @extend .medium;
+    .popover {
+        @include popover(150px, "", 30px, 30px);
+        a{
+            text-align: left;
+            @extend .small;
+            color: $white;
+            &:hover {
+                color: $freshTaiga;
+                @include transition (color .2s linear);
+            }
+        }
     }
-    img{
-        border: 1px solid transparent;
-        &:hover {
-            border: 2px solid $freshTaiga;
-            @include transition (all .6s ease-in-out);
+    .user-settings{
+        position: relative;
+        img{
+          border: 1px solid transparent;
+          width: 100%;
+          border-radius: 50%;
+          &:hover {
+              border: 2px solid $freshTaiga;
+              @include transition (all .6s ease-in-out);
+          }
         }
     }
     .settings {
         text-align: center;
         a {
             margin-right: .5em;
+            color: $whitish;
             &:hover {
                 @include transition (color .3s linear);
                 color: $freshTaiga;
diff --git a/app/views/modules/nav.jade b/app/views/modules/nav.jade
index bb26982b..1d90245f 100644
--- a/app/views/modules/nav.jade
+++ b/app/views/modules/nav.jade
@@ -28,8 +28,16 @@ nav.menu
         span.icon.icon-video
         span.item Video
   div.user
-    a.avatar(href="", title="User preferences")
-      img(src="http://thecodeplayer.com/u/uifaces/12.jpg", alt="username")
+    div.user-settings
+        ul.popover
+            li
+                a(href="", title="Change profile photo") Change profile photo
+            li
+                a(href="", title="Account settings") Account settings
+            li
+                a(href="", title="Logout") Logout
+        a.avatar(href="", title="User preferences")
+        img(src="http://thecodeplayer.com/u/uifaces/12.jpg", alt="username")
     div.settings
       a(href="", title="User preferences") Pilar
       a(href="", title="Site preferences")