Merge branch 'navbar' into achievements

app/styles/common/top_nav.sass

@@ -1,5 +1,39 @@
 @import "../bootstrap/variables"
 
+// This is still very blocky. Browser reflows? Investigate why.
+.open > .dropdown-menu
+  animation-name: fadeAnimation
+  animation-duration: .7s
+  animation-iteration-count: 1
+  animation-timing-function: ease
+  animation-fill-mode: forwards
+  -webkit-animation-name: fadeAnimation
+  -webkit-animation-duration: .7s
+  -webkit-animation-iteration-count: 1
+  -webkit-animation-timing-function: ease
+  -webkit-animation-fill-mode: backwards
+  -moz-animation-name: fadeAnimation
+  -moz-animation-duration: .7s
+  -moz-animation-iteration-count: 1
+  -moz-animation-timing-function: ease
+  -moz-animation-fill-mode: forwards
+
+@keyframes fadeAnimation
+  from
+    opacity: 0
+    top: 120%
+  to
+    opacity: 1
+    top: 100%
+
+@-webkit-keyframes fadeAnimation
+  from
+    opacity: 0
+    top: 120%
+  to
+    opacity: 1
+    top: 100%
+
 #top-nav
   a.navbar-brand
     padding: 4px 20px 0px 20px
@@ -22,8 +56,55 @@
 
   .glyphicon-user
     font-size: 16px
+    margin-right: 5px
 
-  .nav.navbar-link-text, .nav.navbar-link-text > li > a
+  .dropdown
+    .dropdown-menu
+      left: auto
+      width: 280px
+      padding: 0px
+      border-radius: 0px
+      font-family: Bangers
+
+      li.user-dropdown-header
+        background: #E4CF8C
+        height: 160px
+        padding: 10px
+        text-align: center
+        color: black
+        border-bottom: #32281e 1px solid
+        img
+          border: #e3be7a 8px solid
+          height: 98px // Includes the border
+        h3
+          margin-top: 10px
+          text-shadow: 2px 2px 3px white
+          color: #31281E
+
+      li.user-dropdown-body
+        color: black
+        padding: 15px
+        letter-spacing: 1px
+        font: 15px 'Helvetica Neue', Helvetica, Arial, sans-serif
+        &:after
+          display: table
+          content: " "
+          clear: both
+
+      li.user-dropdown-footer
+        padding: 10px
+        margin-left: 0px
+        font-size: 14px
+        &:after
+          display: table
+          content: " "
+          clear: both
+        .btn-flat
+          border: #ddd 1px solid
+          border-radius: 0px
+          margin: 0px
+
+  .nav.navbar-link-text > li > a
     font-weight: normal
     font-size: 25px
     letter-spacing: 2px
@@ -31,7 +112,7 @@
     &:hover
       color: #f8e413
 
-  .navbar-link-text a:hover
+  .navbar-link-text > a:hover
     background: darken($body-bg, 3%)
 
   .btn, .btn-group, .fancy-select
@@ -67,9 +148,6 @@
         top: 13px
       max-width: 140px
 
-  .nav
-    margin-bottom: 0
-    
   div.fancy-select
     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)
     div.trigger

app/templates/base.jade

@@ -27,17 +27,16 @@ body
 
         select.language-dropdown
 
-        if me.get('anonymous') === false
+          //button.btn.btn-primary.navbuttontext.header-font#logout-button(data-i18n="login.log_out") Log Out
-          button.btn.btn-primary.navbuttontext.header-font#logout-button(data-i18n="login.log_out") Log Out
+          //a.btn.btn-primary.navbuttontext.header-font(href=me.get('jobProfile') ? "/account/profile/#{me.id}" : "/account/settings")
-          a.btn.btn-primary.navbuttontext.header-font(href=me.get('jobProfile') ? "/account/profile/#{me.id}" : "/account/settings")
             div.navbuttontext-account(data-i18n="nav.account") Account
             if me.get('photoURL')
               img.account-settings-image(src=me.getPhotoURL(18), alt="")
             else
               span.glyphicon.glyphicon-user
 
-        else
+        //else
-          button.btn.btn-primary.navbuttontext.header-font.auth-button 
+          button.btn.btn-primary.navbuttontext.header-font.auth-button
             span(data-i18n="login.log_in") Log In
             span.spr.spl /
             span(data-i18n="login.sign_up") Create Account
@@ -47,6 +46,31 @@ body
             a.header-font(href='/play', data-i18n="nav.play") Levels
           li
             a.header-font(href='/community', data-i18n="nav.community") Community
+          if me.get('anonymous') === false
+            li.dropdown
+              button.btn.btn-primary.navbuttontext.header-font.dropdown-toggle(href="#", data-toggle="dropdown")
+                if me.get('photoURL')
+                  img.account-settings-image(src=me.getPhotoURL(18), alt="")
+                else
+                  i.glyphicon.glyphicon-user
+                .navbuttontext-account(data-i18n="nav.account") Account
+                span.caret
+              ul.dropdown-menu(role="menu")
+                li.user-dropdown-header
+                  img.img-circle(src="#{me.getPhotoURL()}" alt="")
+                  h3=me.get('name') || 'Anoner'
+                li.user-dropdown-body
+                  .col-xs-4.text-center
+                    a(href="#") Profile
+                  .col-xs-4.text-center
+                    a(href="#") Stats
+                  .col-xs-4.text-center
+                    a.disabled(href="#") Code
+                li.user-dropdown-footer
+                  .pull-left
+                    a.btn.btn-default.btn-flat(href="") Account
+                  .pull-right
+                    a.btn.btn-default.btn-flat(href="") Log Out
 
   block outer_content
     #outer-content-wrapper