diff options
| author | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2017-05-05 14:38:49 -0500 |
|---|---|---|
| committer | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2017-05-05 14:49:28 -0500 |
| commit | 29aa1e249c3f3c0fadd49845e30b92af071fac3d (patch) | |
| tree | 2d6aa7119453ba325a12941507fcaf88fddab485 | |
| parent | e67ce86f24528ec155f68ed5e663d7dd4df21784 (diff) | |
| download | gitlab-ce-30975-fixed-top-nav-POC.tar.gz | |
Fade out border on scroll30975-fixed-top-nav-POC
| -rw-r--r-- | app/assets/javascripts/layout_nav.js | 8 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/header.scss | 15 | ||||
| -rw-r--r-- | app/views/layouts/header/_default.html.haml | 1 | ||||
| -rw-r--r-- | app/views/shared/issuable/_sidebar.html.haml | 1 |
4 files changed, 14 insertions, 11 deletions
diff --git a/app/assets/javascripts/layout_nav.js b/app/assets/javascripts/layout_nav.js index 341fc6fc3e4..17dc3161a1e 100644 --- a/app/assets/javascripts/layout_nav.js +++ b/app/assets/javascripts/layout_nav.js @@ -48,12 +48,8 @@ import _ from 'underscore'; }); function applyScrollNavClass() { - if ($(window).scrollTop() > 0) { - $('.navbar-gitlab').addClass('scroll'); - } else { - $('.navbar-gitlab').removeClass('scroll'); - } + $('.navbar-border').css("opacity", $(window).scrollTop() / 40); } - $(window).scroll( _.throttle(applyScrollNavClass, 250)); + $(window).scroll( _.throttle(applyScrollNavClass, 100)); }).call(window); diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index f7309889265..1e4556c813a 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -23,7 +23,6 @@ header { } &.navbar-gitlab { - @include transition(border-color 150ms ease-in-out); padding: 0 16px; z-index: 100; margin-bottom: 0; @@ -43,10 +42,6 @@ header { border-color: transparent; } - &.scroll { - border-color: $border-color; - } - .container-fluid { width: 100% !important; filter: none; @@ -118,6 +113,16 @@ header { } } + .navbar-border { + height: 1px; + position: fixed; + left: 0; + right: 0; + top: 50px; + background-color: $border-color; + opacity: 0; + } + .global-dropdown { position: absolute; left: -10px; diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml index 659d548df18..9db98451f1d 100644 --- a/app/views/layouts/header/_default.html.haml +++ b/app/views/layouts/header/_default.html.haml @@ -1,4 +1,5 @@ %header.navbar.navbar-gitlab{ class: nav_header_class } + .navbar-border %a.sr-only.gl-accessibility{ href: "#content-body", tabindex: "1" } Skip to content .container-fluid .header-content diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml index a4862f11421..2bd496da902 100644 --- a/app/views/shared/issuable/_sidebar.html.haml +++ b/app/views/shared/issuable/_sidebar.html.haml @@ -4,6 +4,7 @@ = page_specific_javascript_bundle_tag('sidebar') %aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => "50", "spy" => "affix" }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' } + .issuable-sidebar{ data: { endpoint: "#{issuable_json_path(issuable)}" } } - can_edit_issuable = can?(current_user, :"admin_#{issuable.to_ability_name}", @project) .block.issuable-sidebar-header - if current_user |