Merge pull request #16984 from code-dot-org/header-do-not-wrap-user-menu

Header: The Pegasus header's user menu & hamburger no longer wrap
code-dot-org · Aug 14, 2017 · c610c99 · c610c99
2 parents 1397917 + 69b04d8
commit c610c99
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 44 deletions.
diff --git a/dashboard/app/assets/stylesheets/application.scss b/dashboard/app/assets/stylesheets/application.scss
@@ -403,6 +403,8 @@ img.video_thumbnail {
 
   .user_menu {
     margin-top: 6px;
+    height: 38px;
+    user-select: none;
 
     .user_name {
       max-width: 120px;
@@ -413,10 +415,28 @@ img.video_thumbnail {
       white-space: nowrap;
     }
 
-    .user_menu_glyph {
-      display: inline-block;
-      float: left;
-      padding-left: 5px;
+    .user_menu_arrow_down,
+    .user_menu_arrow_up {
+      font-size: 30px;
+    }
+
+    .user_options {
+      position: absolute;
+      top: 55px;
+      right: 55px;
+    }
+
+    .user_menu_arrow_down,
+    .user_menu_arrow_up {
+      font-size: 25px;
+    }
+
+    .user_menu_arrow_up {
+      margin-top: -3px;
+    }
+
+    .user_menu_arrow_down {
+      margin-top: -2px;
     }
   }
 
@@ -433,12 +453,6 @@ img.video_thumbnail {
     padding-left: 20px;
   }
 
-  .user_menu {
-    .user_options {
-      top: 37px;
-    }
-  }
-
   #signin_button .header_button {
     margin-top: 6px;
   }
@@ -982,8 +996,7 @@ $default-modal-width: 640px;
 
 .header_right {
   position: absolute;
-  float: left;
-  right: 25px;
+  right: 16px;
 }
 
 .freeplay_links {

diff --git a/dashboard/app/views/shared/_user_header.html.haml b/dashboard/app/views/shared/_user_header.html.haml
@@ -5,28 +5,28 @@
       %span= t('nav.user.label', username: t('nav.user.team'))
     - else
       %span.user_name= t('nav.user.label', username: h(current_user.short_name))
-    %span.user_menu_glyph
-      &#x25BC;
-    %div{style: 'position: relative; top: 3px;'}
-      .user_options{style: 'display: none;'}
-        - if current_user.can_pair?
-          - if session[:pairings].present?
-            = link_to '#', {id: 'pairing_link', style: 'display: none'} do
-              %i.fa.fa-user-plus
-              = t('nav.user.pair_programming')
-              .pairing_summary
-                #{t('nav.user.driver')}:
-                = h(current_user.short_name)
-                - session[:pairings].map do |id|
-                  %br
-                  #{t('nav.user.navigator')}:
-                  = h(User.find(id).short_name)
-          - else
-            = link_to '#', {id: 'pairing_link', style: 'display: none'} do
-              %i.fa.fa-user-plus
-              = t('nav.user.pair_programming')
-        = link_to t('nav.user.settings'), edit_user_registration_url
-        = link_to t('nav.user.logout'), destroy_user_session_url
+    &nbsp;
+    %i.user_menu_arrow_down{class: "fa fa-caret-down"}
+    %i.user_menu_arrow_up{class: "fa fa-caret-up", style: "display: none"}
+    .user_options{style: 'display: none'}
+      - if current_user.can_pair?
+        - if session[:pairings].present?
+          = link_to '#', {id: 'pairing_link', style: 'display: none'} do
+            %i.fa.fa-user-plus
+            = t('nav.user.pair_programming')
+            .pairing_summary
+              #{t('nav.user.driver')}:
+              = h(current_user.short_name)
+              - session[:pairings].map do |id|
+                %br
+                #{t('nav.user.navigator')}:
+                = h(User.find(id).short_name)
+        - else
+          = link_to '#', {id: 'pairing_link', style: 'display: none'} do
+            %i.fa.fa-user-plus
+            = t('nav.user.pair_programming')
+      = link_to t('nav.user.settings'), edit_user_registration_url
+      = link_to t('nav.user.logout'), destroy_user_session_url
 - else
   = link_to new_user_session_url, class: 'button-signin', id: 'signin_button'  do
     .header_button.header_user
@@ -35,14 +35,16 @@
 :javascript
   function hideUserOptions() {
     $('.user_options').slideUp();
-    $('.user_menu_glyph').html('&#x25BC;');
+    $('.user_menu_arrow_down').show();
+    $('.user_menu_arrow_up').hide();
     $(document).off('click', hideUserOptions);
   }
   $('.user_menu').click(function (e) {
     if ($('.user_options').is(':hidden')) {
       e.stopPropagation();
       $('.user_options').slideDown();
-      $('.user_menu_glyph').html('&#x25B2;');
+      $('.user_menu_arrow_down').hide();
+      $('.user_menu_arrow_up').show();
       $(document).on('click', hideUserOptions);
 
       $("#hamburger-icon").removeClass('active');

diff --git a/shared/css/header2.scss b/shared/css/header2.scss
@@ -54,8 +54,8 @@
     }
 
     #right {
-      float: right;
-      padding-right: 15px;
+      right: 16px;
+      position: absolute;
     }
 
     #headerlinks {
@@ -112,6 +112,8 @@
     background-color: transparent;
     border: 2px solid $white;
     margin-top: -4px;
+    height: 38px;
+    user-select: none;
 
     .user_name {
       font-family: 'Gotham 4r', sans-serif;
@@ -123,14 +125,23 @@
       float: left;
     }
 
-    .user_menu_glyph {
-      display: inline-block;
-      float: left;
-      padding-left: 5px;
+    .user_options {
+      position: absolute;
+      top: 55px;
+      right: 55px;
     }
 
-    .user_options {
-      top: 37px;
+    .user_menu_arrow_down,
+    .user_menu_arrow_up {
+      font-size: 25px;
+    }
+
+    .user_menu_arrow_up {
+      margin-top: -3px;
+    }
+
+    .user_menu_arrow_down {
+      margin-top: -2px;
     }
   }