diff options
| author | Himanshu Kapoor <hkapoor@gitlab.com> | 2019-08-09 12:35:55 +0530 |
|---|---|---|
| committer | Himanshu Kapoor <hkapoor@gitlab.com> | 2019-08-09 12:44:45 +0530 |
| commit | 4b9328c1c8b2c3c1e1c90b12db29e2250930b7c0 (patch) | |
| tree | 3290ee07f7e7dc52f67f6b9f3e71a3f93c3f607b | |
| parent | 8470c131fa1eaacdf5a2278b69e79939fe761dcc (diff) | |
| download | gitlab-ce-61332-web-ide-mr-branch-dropdown-closes-unexpectedly.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).
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; } |