kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Use position sticky on merge request tabs

Browse source 
Removes the need for Bootstraps affix on browser that support sticky positions. On these browsers, there should be a slight performance improvement as there will be no scrolling events, it will all be handled by the browser
This commit is contained in:
Phil Hughes 2017-05-11 11:37:40 +01:00
parent 4067dd4f84
commit 5d74fc8a54
2 changed files with 14 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/assets/javascripts/merge_request_tabs.js
View file

@ -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')

9
app/assets/stylesheets/pages/merge_requests.scss
View file

@ -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) {