Commit 4b9328c1 authored by Himanshu Kapoor's avatar Himanshu Kapoor

Reduce the default height of MR/branch dropdowns

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).
parent 8470c131
...@@ -67,7 +67,7 @@ export default { ...@@ -67,7 +67,7 @@ export default {
class="form-control dropdown-input-field" class="form-control dropdown-input-field"
@input="searchBranches" @input="searchBranches"
/> />
<icon :size="18" name="search" class="input-icon" /> <icon :size="18" name="search" class="ml-3 input-icon" />
</label> </label>
<div class="dropdown-content ide-merge-requests-dropdown-content d-flex"> <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
<gl-loading-icon <gl-loading-icon
...@@ -75,7 +75,7 @@ export default { ...@@ -75,7 +75,7 @@ export default {
:size="2" :size="2"
class="mt-3 mb-3 align-self-center ml-auto mr-auto" 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"> <template v-if="hasBranches">
<li v-for="item in branches" :key="item.name"> <li v-for="item in branches" :key="item.name">
<item :item="item" :project-id="currentProjectId" :is-active="isActiveBranch(item)" /> <item :item="item" :project-id="currentProjectId" :is-active="isActiveBranch(item)" />
......
...@@ -85,7 +85,7 @@ export default { ...@@ -85,7 +85,7 @@ export default {
@input="searchMergeRequests" @input="searchMergeRequests"
@removeToken="setSearchType(null)" @removeToken="setSearchType(null)"
/> />
<icon :size="18" name="search" class="input-icon" /> <icon :size="18" name="search" class="ml-3 input-icon" />
</label> </label>
<div class="dropdown-content ide-merge-requests-dropdown-content d-flex"> <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
<gl-loading-icon <gl-loading-icon
...@@ -94,7 +94,7 @@ export default { ...@@ -94,7 +94,7 @@ export default {
class="mt-3 mb-3 align-self-center ml-auto mr-auto" class="mt-3 mb-3 align-self-center ml-auto mr-auto"
/> />
<template v-else> <template v-else>
<ul class="mb-3 w-100"> <ul class="mb-0 w-100">
<template v-if="showSearchTypes"> <template v-if="showSearchTypes">
<li v-for="searchType in $options.searchTypes" :key="searchType.type"> <li v-for="searchType in $options.searchTypes" :key="searchType.type">
<button <button
......
...@@ -1188,7 +1188,7 @@ $ide-commit-header-height: 48px; ...@@ -1188,7 +1188,7 @@ $ide-commit-header-height: 48px;
.input-icon { .input-icon {
right: auto; right: auto;
left: 26px; left: 10px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
...@@ -1216,11 +1216,10 @@ $ide-commit-header-height: 48px; ...@@ -1216,11 +1216,10 @@ $ide-commit-header-height: 48px;
} }
.ide-search-list-empty { .ide-search-list-empty {
height: 230px; height: 69px;
} }
.ide-merge-requests-dropdown-content { .ide-merge-requests-dropdown-content {
min-height: 230px;
max-height: 470px; max-height: 470px;
} }
......
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