Merge branch 'navbar-profile-redesign'

app/assets/stylesheets/scss/navbar.scss

@@ -84,4 +84,39 @@
   margin-right: 7px;
   margin-bottom: 7px;
   z-index: 99;
+}
+
+.profile--dropdown {
+  min-width: 220px;
+  margin-top: 0px !important;
+}
+
+.profile--dropdown-media {
+  padding: 3px 15px;
+}
+
+.profile--dropdown-img {
+  min-height: 45px;
+  min-width: 45px;
+  height: 45px;
+  width: 45px;
+}
+
+.profile--dropdown-username {
+  font-weight: 700;
+  font-size: 1.2em;
+  line-height: 1.33em;
+  margin-top: 10px;
+}
+
+.profile--dropdown-displayname {
+  font-weight: 700;
+  font-size: 1.2em;
+  line-height: 1.33em;
+  margin-top: 2px;
+}
+
+.profile--image-dropdown > a {
+  padding-top: 16px !important;
+  padding-bottom: 16px !important;
 }

app/views/layouts/_header.html.haml

@@ -27,22 +27,7 @@
           %li.hidden-xs{"data-toggle" => "tooltip", "data-placement" => "bottom", title: "Ask a question"}
             .btn.btn-link.navbar-btn{name: "toggle-all-ask", "data-target" => "#modal-ask-followers", "data-toggle" => "modal", :type => "button"}
               %i.fa.fa-pencil-square-o
-          %li.dropdown
+          = render "layouts/profile"
-            %a.dropdown-toggle{href: "#", "data-toggle" => "dropdown"}
-              %img.img-rounded.answerbox--img-small.hidden-xs{src: current_user.profile_picture.url(:small)}
-              = current_user.screen_name
-              %b.caret
-            %ul.dropdown-menu
-              %li= link_to "View profile", show_user_profile_path(current_user.screen_name)
-              %li= link_to "Settings", edit_user_registration_path
-              %li.divider
-              - if current_user.admin?
-                %li= link_to "Kontrollzentrum", rails_admin_path
-                %li= link_to "Sidekiq", sidekiq_web_path
-              - if current_user.mod?
-                %li= link_to "Moderation panel", moderation_path
-                %li.divider
-              %li= link_to "Logout",  destroy_user_session_path, method: :delete
       - else
         %ul.nav.navbar-nav.navbar-right
           = nav_entry "Sign in", new_user_session_path

app/views/layouts/_profile.html.haml

@@ -0,0 +1,33 @@
+%li.dropdown.profile--image-dropdown
+  %a.dropdown-toggle{href: "#", "data-toggle" => "dropdown"}
+    %img.img-rounded.answerbox--img.hidden-xs{src: current_user.profile_picture.url(:small)}
+    %span.visible-xs
+      = current_user.screen_name
+      %b.caret
+  %ul.dropdown-menu.profile--dropdown
+    %li.hidden-xs
+      .media.profile--dropdown-media
+        .pull-left
+          %img.img-rounded.profile--dropdown-img{src: current_user.profile_picture.url(:medium)}
+        .media-body
+          - if current_user.display_name.blank?
+            .profile--dropdown-username
+              %a{href: show_user_profile_path(current_user.screen_name)}
+                = current_user.screen_name
+          - else
+            .profile--dropdown-displayname
+              %a{href: show_user_profile_path(current_user.screen_name)}
+                = current_user.display_name
+            .profile--username
+              = current_user.screen_name
+    %li.divider.hidden-xs
+    %li.visible-xs= link_to "View profile", show_user_profile_path(current_user.screen_name)
+    %li= link_to "Settings", edit_user_registration_path
+    %li.divider
+    - if current_user.admin?
+      %li= link_to "Kontrollzentrum", rails_admin_path
+      %li= link_to "Sidekiq", sidekiq_web_path
+    - if current_user.mod?
+      %li= link_to "Moderation panel", moderation_path
+      %li.divider
+    %li= link_to "Logout",  destroy_user_session_path, method: :delete