From 0f91ae655a890146ad47669d0224e670227581da Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Tue, 3 Oct 2017 20:50:35 +0000 Subject: Merge branch '38187-38315-fix-dropdown-open-top-bottom-spacing' into 'master' Fix bottom spacing for dropdowns that open upwards Closes #38187 and #38315 See merge request gitlab-org/gitlab-ce!14535 --- app/assets/javascripts/gl_dropdown.js | 1 + app/assets/stylesheets/framework/dropdowns.scss | 4 ++++ app/assets/stylesheets/framework/variables.scss | 1 + app/assets/stylesheets/new_nav.scss | 2 +- app/assets/stylesheets/pages/note_form.scss | 2 +- app/views/shared/notes/_comment_button.html.haml | 2 +- .../unreleased/38187-38315-fix-dropdown-open-top-bottom-spacing.yml | 5 +++++ 7 files changed, 14 insertions(+), 3 deletions(-) create mode 100644 changelogs/unreleased/38187-38315-fix-dropdown-open-top-bottom-spacing.yml diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js index 50d822eba5a..ff218ccad62 100644 --- a/app/assets/javascripts/gl_dropdown.js +++ b/app/assets/javascripts/gl_dropdown.js @@ -548,6 +548,7 @@ GitLabDropdown = (function() { GitLabDropdown.prototype.positionMenuAbove = function() { var $menu = this.dropdown.find('.dropdown-menu'); + $menu.addClass('dropdown-open-top'); $menu.css('top', 'initial'); $menu.css('bottom', '100%'); }; diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index c0d8e6c328c..b8b8caca048 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -745,6 +745,10 @@ #{$selector}.dropdown-menu-nav { margin-bottom: 24px; + &.dropdown-open-top { + margin-bottom: $dropdown-vertical-offset; + } + li { display: block; padding: 0 1px; diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 3857226cddb..76d87fd81f4 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -323,6 +323,7 @@ $regular_font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-San * Dropdowns */ $dropdown-width: 300px; +$dropdown-vertical-offset: 4px; $dropdown-link-color: #555; $dropdown-link-hover-bg: $row-hover; $dropdown-empty-row-bg: rgba(#000, .04); diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/new_nav.scss index 8c5bafac637..24daf993b2e 100644 --- a/app/assets/stylesheets/new_nav.scss +++ b/app/assets/stylesheets/new_nav.scss @@ -292,7 +292,7 @@ header.navbar-gitlab-new { .header-user .dropdown-menu-nav, .header-new .dropdown-menu-nav { - margin-top: 4px; + margin-top: $dropdown-vertical-offset; } .search { diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 5d7c85b16ef..750a5b4a930 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -362,7 +362,7 @@ .dropdown-menu { top: initial; - bottom: 40px; + bottom: 100%; width: 298px; } diff --git a/app/views/shared/notes/_comment_button.html.haml b/app/views/shared/notes/_comment_button.html.haml index 1dfe380db16..4b9af78bc1a 100644 --- a/app/views/shared/notes/_comment_button.html.haml +++ b/app/views/shared/notes/_comment_button.html.haml @@ -7,7 +7,7 @@ = button_tag type: 'button', class: 'btn btn-nr dropdown-toggle comment-btn js-note-new-discussion js-disable-on-submit', data: { 'dropdown-trigger' => '#resolvable-comment-menu' }, 'aria-label' => 'Open comment type dropdown' do = icon('caret-down', class: 'toggle-icon') - %ul#resolvable-comment-menu.dropdown-menu{ data: { dropdown: true } } + %ul#resolvable-comment-menu.dropdown-menu.dropdown-open-top{ data: { dropdown: true } } %li#comment.droplab-item-selected{ data: { value: '', 'submit-text' => 'Comment', 'close-text' => "Comment & close #{noteable_name}", 'reopen-text' => "Comment & reopen #{noteable_name}" } } %button.btn.btn-transparent = icon('check', class: 'icon') diff --git a/changelogs/unreleased/38187-38315-fix-dropdown-open-top-bottom-spacing.yml b/changelogs/unreleased/38187-38315-fix-dropdown-open-top-bottom-spacing.yml new file mode 100644 index 00000000000..579c247c4c2 --- /dev/null +++ b/changelogs/unreleased/38187-38315-fix-dropdown-open-top-bottom-spacing.yml @@ -0,0 +1,5 @@ +--- +title: Fix bottom spacing for dropdowns that open upwards +merge_request: 14535 +author: +type: fixed -- cgit v1.2.3