kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Reduce the default height of MR/branch dropdowns

Browse source 
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).
This commit is contained in:
Himanshu Kapoor 2019-08-09 12:35:55 +05:30
parent 8470c131fa
commit 4b9328c1c8
3 changed files with 6 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/ide/components/branches/search_list.vue
View file

@ -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)" />

4
app/assets/javascripts/ide/components/merge_requests/list.vue
View file

@ -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

5
app/assets/stylesheets/page_bundles/ide.scss
View file

@ -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;
}