Commit 5a23af92 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

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
parents 900a19ed 64a60e08
...@@ -548,6 +548,7 @@ GitLabDropdown = (function() { ...@@ -548,6 +548,7 @@ GitLabDropdown = (function() {
GitLabDropdown.prototype.positionMenuAbove = function() { GitLabDropdown.prototype.positionMenuAbove = function() {
var $menu = this.dropdown.find('.dropdown-menu'); var $menu = this.dropdown.find('.dropdown-menu');
$menu.addClass('dropdown-open-top');
$menu.css('top', 'initial'); $menu.css('top', 'initial');
$menu.css('bottom', '100%'); $menu.css('bottom', '100%');
}; };
......
...@@ -745,6 +745,10 @@ ...@@ -745,6 +745,10 @@
#{$selector}.dropdown-menu-nav { #{$selector}.dropdown-menu-nav {
margin-bottom: 24px; margin-bottom: 24px;
&.dropdown-open-top {
margin-bottom: $dropdown-vertical-offset;
}
li { li {
display: block; display: block;
padding: 0 1px; padding: 0 1px;
......
...@@ -295,7 +295,7 @@ header.navbar-gitlab-new { ...@@ -295,7 +295,7 @@ header.navbar-gitlab-new {
.header-user .dropdown-menu-nav, .header-user .dropdown-menu-nav,
.header-new .dropdown-menu-nav { .header-new .dropdown-menu-nav {
margin-top: 4px; margin-top: $dropdown-vertical-offset;
} }
.breadcrumbs { .breadcrumbs {
......
...@@ -327,6 +327,7 @@ $regular_font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-San ...@@ -327,6 +327,7 @@ $regular_font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-San
* Dropdowns * Dropdowns
*/ */
$dropdown-width: 300px; $dropdown-width: 300px;
$dropdown-vertical-offset: 4px;
$dropdown-link-color: #555; $dropdown-link-color: #555;
$dropdown-link-hover-bg: $row-hover; $dropdown-link-hover-bg: $row-hover;
$dropdown-empty-row-bg: rgba(#000, .04); $dropdown-empty-row-bg: rgba(#000, .04);
......
...@@ -362,7 +362,7 @@ ...@@ -362,7 +362,7 @@
.dropdown-menu { .dropdown-menu {
top: initial; top: initial;
bottom: 40px; bottom: 100%;
width: 298px; width: 298px;
} }
......
...@@ -7,7 +7,7 @@ ...@@ -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 = 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') = 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}" } } %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 %button.btn.btn-transparent
= icon('check', class: 'icon') = icon('check', class: 'icon')
......
---
title: Fix bottom spacing for dropdowns that open upwards
merge_request: 14535
author:
type: fixed
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment