summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorHimanshu Kapoor <hkapoor@gitlab.com>2019-08-09 12:35:55 +0530
committerHimanshu Kapoor <hkapoor@gitlab.com>2019-08-09 12:44:45 +0530
commit4b9328c1c8b2c3c1e1c90b12db29e2250930b7c0 (patch)
tree3290ee07f7e7dc52f67f6b9f3e71a3f93c3f607b
parent8470c131fa1eaacdf5a2278b69e79939fe761dcc (diff)
downloadgitlab-ce-4b9328c1c8b2c3c1e1c90b12db29e2250930b7c0.tar.gz
Reduce the default height of MR/branch dropdowns61332-web-ide-mr-branch-dropdown-closes-unexpectedly
To avoid having empty areas in the dropdown that occupy unnessary space, I removed the dropdown's min-height and changed its default height in empty state to be same as its loading state (with the spinner).
-rw-r--r--app/assets/javascripts/ide/components/branches/search_list.vue4
-rw-r--r--app/assets/javascripts/ide/components/merge_requests/list.vue4
-rw-r--r--app/assets/stylesheets/page_bundles/ide.scss5
3 files changed, 6 insertions, 7 deletions
diff --git a/app/assets/javascripts/ide/components/branches/search_list.vue b/app/assets/javascripts/ide/components/branches/search_list.vue
index 5e82d1150a0..db8365a08e0 100644
--- a/app/assets/javascripts/ide/components/branches/search_list.vue
+++ b/app/assets/javascripts/ide/components/branches/search_list.vue
@@ -67,7 +67,7 @@ export default {
class="form-control dropdown-input-field"
@input="searchBranches"
/>
- <icon :size="18" name="search" class="input-icon" />
+ <icon :size="18" name="search" class="ml-3 input-icon" />
</label>
<div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
<gl-loading-icon
@@ -75,7 +75,7 @@ export default {
:size="2"
class="mt-3 mb-3 align-self-center ml-auto mr-auto"
/>
- <ul v-else class="mb-3 w-100">
+ <ul v-else class="mb-0 w-100">
<template v-if="hasBranches">
<li v-for="item in branches" :key="item.name">
<item :item="item" :project-id="currentProjectId" :is-active="isActiveBranch(item)" />
diff --git a/app/assets/javascripts/ide/components/merge_requests/list.vue b/app/assets/javascripts/ide/components/merge_requests/list.vue
index 6b9c83bad6c..5daf2d1422c 100644
--- a/app/assets/javascripts/ide/components/merge_requests/list.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/list.vue
@@ -85,7 +85,7 @@ export default {
@input="searchMergeRequests"
@removeToken="setSearchType(null)"
/>
- <icon :size="18" name="search" class="input-icon" />
+ <icon :size="18" name="search" class="ml-3 input-icon" />
</label>
<div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
<gl-loading-icon
@@ -94,7 +94,7 @@ export default {
class="mt-3 mb-3 align-self-center ml-auto mr-auto"
/>
<template v-else>
- <ul class="mb-3 w-100">
+ <ul class="mb-0 w-100">
<template v-if="showSearchTypes">
<li v-for="searchType in $options.searchTypes" :key="searchType.type">
<button
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 551c7cf5deb..ba126d59eef 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -1188,7 +1188,7 @@ $ide-commit-header-height: 48px;
.input-icon {
right: auto;
- left: 26px;
+ left: 10px;
top: 50%;
transform: translateY(-50%);
}
@@ -1216,11 +1216,10 @@ $ide-commit-header-height: 48px;
}
.ide-search-list-empty {
- height: 230px;
+ height: 69px;
}
.ide-merge-requests-dropdown-content {
- min-height: 230px;
max-height: 470px;
}