From 52fe6522bdf673fc8de27ea241441a7130f14a97 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Fri, 15 Dec 2017 13:34:26 -0700 Subject: [PATCH 1/6] Remove extra height declarations in CSS; remove block styling from dropdowns --- app/assets/stylesheets/framework/contextual-sidebar.scss | 6 ------ app/assets/stylesheets/framework/dropdowns.scss | 1 - app/assets/stylesheets/framework/sidebar.scss | 6 ------ app/assets/stylesheets/pages/issuable.scss | 3 +-- 4 files changed, 1 insertion(+), 15 deletions(-) diff --git a/app/assets/stylesheets/framework/contextual-sidebar.scss b/app/assets/stylesheets/framework/contextual-sidebar.scss index 8baf7ca23a4..2e417315ed7 100644 --- a/app/assets/stylesheets/framework/contextual-sidebar.scss +++ b/app/assets/stylesheets/framework/contextual-sidebar.scss @@ -9,12 +9,6 @@ padding-left: $contextual-sidebar-width; } - // Override position: absolute - .right-sidebar { - position: fixed; - height: calc(100% - #{$header-height}); - } - .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header { padding: 10px 0 15px; } diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 478269f3fcf..66dddfb35c1 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -214,7 +214,6 @@ .dropdown-menu, .dropdown-menu-nav { @include set-invisible; - display: block; position: absolute; width: auto; top: 100%; diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 0742c0a2a09..1145a49065f 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -89,12 +89,6 @@ .right-sidebar { border-left: 1px solid $border-color; - height: calc(100% - #{$header-height}); - - &.affix { - position: fixed; - top: $header-height; - } } .with-performance-bar .right-sidebar.affix { diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index e19196e0c41..48a787aa737 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -122,7 +122,7 @@ } .right-sidebar { - position: absolute; + position: fixed; top: $header-height; bottom: 0; right: 0; @@ -243,7 +243,6 @@ .issuable-sidebar { width: calc(100% + 100px); - height: 100%; overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; From 36b3dbf29ab5af30658c7e50028d4040498c82bd Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Fri, 15 Dec 2017 13:46:16 -0700 Subject: [PATCH 2/6] Remove all dropdown animations and set display: none if they're not open --- app/assets/stylesheets/framework/dropdowns.scss | 12 ++---------- app/assets/stylesheets/pages/issuable.scss | 4 ---- 2 files changed, 2 insertions(+), 14 deletions(-) diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 66dddfb35c1..22303e6ec14 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -16,20 +16,12 @@ @mixin set-visible { transform: translateY(0); - visibility: visible; - opacity: 1; - transition-duration: 100ms, 150ms, 25ms; - transition-delay: 35ms, 50ms, 25ms; + display: block; } @mixin set-invisible { transform: translateY(-10px); - visibility: hidden; - opacity: 0; - transition-property: opacity, transform, visibility; - transition-duration: 70ms, 250ms, 250ms; - transition-timing-function: linear, $dropdown-animation-timing; - transition-delay: 25ms, 50ms, 0ms; + display: none; } .open { diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 48a787aa737..4bc7aeb127d 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -499,10 +499,6 @@ .with-performance-bar .right-sidebar { top: $header-height + $performance-bar-height; - - .issuable-sidebar { - height: calc(100% - #{$header-height} - #{$performance-bar-height}); - } } .sidebar-move-issue-confirmation-button { From c5e400405e545dddd68bf79e9a581b093159209d Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Fri, 15 Dec 2017 13:57:28 -0700 Subject: [PATCH 3/6] Fix sidebar height when performance bar enabled --- app/assets/stylesheets/framework/sidebar.scss | 1 + app/assets/stylesheets/pages/issuable.scss | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 1145a49065f..d61809cb0a4 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -89,6 +89,7 @@ .right-sidebar { border-left: 1px solid $border-color; + height: calc(100% - #{$header-height}); } .with-performance-bar .right-sidebar.affix { diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 4bc7aeb127d..e1637618ab2 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -243,6 +243,7 @@ .issuable-sidebar { width: calc(100% + 100px); + height: 100%; overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; @@ -499,6 +500,10 @@ .with-performance-bar .right-sidebar { top: $header-height + $performance-bar-height; + + .issuable-sidebar { + height: calc(100% - #{$performance-bar-height}); + } } .sidebar-move-issue-confirmation-button { From 325fdc9f1f9d4e4c9375e024a3d146782fcc9623 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Mon, 18 Dec 2017 11:59:21 -0700 Subject: [PATCH 4/6] Remove block styling from search dropdown --- app/assets/stylesheets/pages/search.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index 49c8e546bf2..2381d7eb92b 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -108,13 +108,6 @@ input[type="checkbox"]:hover { // Custom dropdown positioning .dropdown-menu { - transition-property: opacity, transform; - transition-duration: 250ms, 250ms; - transition-delay: 0ms, 25ms; - transition-timing-function: $dropdown-animation-timing; - transform: translateY(0); - opacity: 0; - display: block; left: -5px; } From f3f9dedcf70c1bf247945253f3cd9026ab87d421 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Tue, 19 Dec 2017 10:46:13 +0000 Subject: [PATCH 5/6] Remove transitionend event from GL dropdown --- app/assets/javascripts/gl_dropdown.js | 24 ++++++++---------------- 1 file changed, 8 insertions(+), 16 deletions(-) diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js index cf4a70e321e..64f258aed64 100644 --- a/app/assets/javascripts/gl_dropdown.js +++ b/app/assets/javascripts/gl_dropdown.js @@ -300,7 +300,7 @@ GitLabDropdown = (function() { return function(data) { _this.fullData = data; _this.parseData(_this.fullData); - _this.focusTextInput(true); + _this.focusTextInput(); if (_this.options.filterable && _this.filter && _this.filter.input && _this.filter.input.val() && _this.filter.input.val().trim() !== '') { return _this.filter.input.trigger('input'); } @@ -790,24 +790,16 @@ GitLabDropdown = (function() { return [selectedObject, isMarking]; }; - GitLabDropdown.prototype.focusTextInput = function(triggerFocus = false) { + GitLabDropdown.prototype.focusTextInput = function() { if (this.options.filterable) { - this.dropdown.one('transitionend', () => { - const initialScrollTop = $(window).scrollTop(); + const initialScrollTop = $(window).scrollTop(); - if (this.dropdown.is('.open')) { - this.filterInput.focus(); - } + if (this.dropdown.is('.open')) { + this.filterInput.focus(); + } - if ($(window).scrollTop() < initialScrollTop) { - $(window).scrollTop(initialScrollTop); - } - }); - - if (triggerFocus) { - // This triggers after a ajax request - // in case of slow requests, the dropdown transition could already be finished - this.dropdown.trigger('transitionend'); + if ($(window).scrollTop() < initialScrollTop) { + $(window).scrollTop(initialScrollTop); } } }; From 6a0b6772544a3f5fcc82898e39d877ff2e4dfe53 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Tue, 19 Dec 2017 11:01:14 -0700 Subject: [PATCH 6/6] Line up search dropdown with other nav dropdowns --- app/assets/stylesheets/framework/dropdowns.scss | 6 +++++- app/assets/stylesheets/pages/search.scss | 7 ------- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 22303e6ec14..bc907a390d8 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -28,7 +28,6 @@ .dropdown-menu, .dropdown-menu-nav { @include set-visible; - display: block; min-height: 40px; @media (max-width: $screen-xs-max) { @@ -47,6 +46,11 @@ } } +// Get search dropdown to line up with other nav dropdowns +.search-input-container .dropdown-menu { + margin-top: 11px; +} + .dropdown-toggle { padding: 6px 8px 6px 10px; background-color: $white-light; diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index 2381d7eb92b..c9363188505 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -145,13 +145,6 @@ input[type="checkbox"]:hover { background-color: $nav-badge-bg; border-color: $border-color; } - - .dropdown-menu { - transition-duration: 100ms, 75ms; - transition-delay: 75ms, 100ms; - transform: translateY(7px); - opacity: 1; - } } &.has-value {