diff options
| author | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2017-05-11 14:30:32 +0000 |
|---|---|---|
| committer | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2017-05-11 14:30:32 +0000 |
| commit | 92bf7dfcb040e3e035fc87b0a70461f891284c98 (patch) | |
| tree | 5f6f30b4e3bc62045fc8364a5a0911dbb9d915f2 | |
| parent | e3fa5275193df70159cba0173dbf99776788c34c (diff) | |
| parent | 5d74fc8a5496423b31eb4dc0daf02b39d0fb51de (diff) | |
| download | gitlab-ce-92bf7dfcb040e3e035fc87b0a70461f891284c98.tar.gz | |
Merge branch 'mr-tabs-sticky-poc' into 'master'
32156-link-to-member-avatar
POC: Use position sticky on merge request tabs
See merge request !11289
| -rw-r--r-- | app/assets/javascripts/merge_request_tabs.js | 7 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/merge_requests.scss | 9 |
2 files changed, 14 insertions, 2 deletions
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js index 93c30c54a8e..a3dff25c93b 100644 --- a/app/assets/javascripts/merge_request_tabs.js +++ b/app/assets/javascripts/merge_request_tabs.js @@ -358,6 +358,13 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion'; // So we dont affix the tabs on these if (Breakpoints.get().getBreakpointSize() === 'xs' || !$tabs.length) return; + /** + If the browser does not support position sticky, it returns the position as static. + If the browser does support sticky, then we allow the browser to handle it, if not + then we default back to Bootstraps affix + **/ + if ($tabs.css('position') !== 'static') return; + const $diffTabs = $('#diff-notes-app'); $tabs.off('affix.bs.affix affix-top.bs.affix') diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 75c57e369e7..87592926930 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -693,12 +693,17 @@ } .merge-request-tabs-holder { + top: 0; + z-index: 10; background-color: $white-light; + @media(min-width: $screen-sm-min) { + position: sticky; + position: -webkit-sticky; + } + &.affix { - top: 0; left: 0; - z-index: 10; transition: right .15s; @media (max-width: $screen-xs-max) { |