From 38490ce1023f1a64b6a05c1654c469a23cb14aee Mon Sep 17 00:00:00 2001 From: Brendan Reville Date: Wed, 9 Aug 2017 18:50:07 -0700 Subject: [PATCH 1/3] Header: The Pegasus header's user menu & hamburger no longer wrap With a particularly long set of options in the Pegasus header on a responsive page, there was a chance that the user menu and hamburger would wrap into the whitespace below, rendering them invisible, at certain browser widths. The same thing was occurring on the teacher-dashboard, since he header has remained responsive even as those pages themselves are not. This fix brings the Pegasus functionality closer to the dashboard, by not allowing these right-hand components to wrap. It does produce some overlapped rendering, but going forward we can tune the content of the header and the responsive rules to prevent that. --- shared/css/header2.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/shared/css/header2.scss b/shared/css/header2.scss index 01edcafa787bd..59b918891da35 100644 --- 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 { From 1718c55bea7968322cd93daecb20b7f8d6b91649 Mon Sep 17 00:00:00 2001 From: Brendan Reville Date: Wed, 9 Aug 2017 19:00:33 -0700 Subject: [PATCH 2/3] Header: adjust dashboard header's rightmost padding Make the hamburger the same distance from the edge as it is on pegasus. This also makes it the same distance as the logo on the left. --- dashboard/app/assets/stylesheets/application.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dashboard/app/assets/stylesheets/application.scss b/dashboard/app/assets/stylesheets/application.scss index 0575d8fea77e6..1af12dee2161c 100644 --- a/dashboard/app/assets/stylesheets/application.scss +++ b/dashboard/app/assets/stylesheets/application.scss @@ -983,7 +983,7 @@ $default-modal-width: 640px; .header_right { position: absolute; float: left; - right: 25px; + right: 16px; } .freeplay_links { From 69b04d8ea229e3ad24044fdf627dbda6c3bf7571 Mon Sep 17 00:00:00 2001 From: Brendan Reville Date: Fri, 11 Aug 2017 14:40:05 -0700 Subject: [PATCH 3/3] Header: use better glyphs for user menu up/down, and improve its layout --- .../app/assets/stylesheets/application.scss | 35 +++++++++---- .../app/views/shared/_user_header.html.haml | 50 ++++++++++--------- shared/css/header2.scss | 23 ++++++--- 3 files changed, 67 insertions(+), 41 deletions(-) diff --git a/dashboard/app/assets/stylesheets/application.scss b/dashboard/app/assets/stylesheets/application.scss index 1af12dee2161c..4da6b39c7cfa0 100644 --- 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,7 +996,6 @@ $default-modal-width: 640px; .header_right { position: absolute; - float: left; right: 16px; } diff --git a/dashboard/app/views/shared/_user_header.html.haml b/dashboard/app/views/shared/_user_header.html.haml index 4ff028b4f0441..d560ba5c5032c 100644 --- 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 - ▼ - %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 +   + %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('▼'); + $('.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('▲'); + $('.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 index 59b918891da35..67f9278882a72 100644 --- a/shared/css/header2.scss +++ b/shared/css/header2.scss @@ -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; } }