diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/user_autosuggest/user_autosuggest.vue | 20 | ||||
| -rw-r--r-- | src/components/user_settings/user_settings.vue | 8 |
2 files changed, 25 insertions, 3 deletions
diff --git a/src/components/user_autosuggest/user_autosuggest.vue b/src/components/user_autosuggest/user_autosuggest.vue index eb5aa41b..2840941f 100644 --- a/src/components/user_autosuggest/user_autosuggest.vue +++ b/src/components/user_autosuggest/user_autosuggest.vue @@ -1,6 +1,6 @@ <template> - <input v-model="query" placeholder="Search..." /> <div class="user-autosuggest" v-click-outside="onClickOutside"> + <input v-model="query" placeholder="Search whom you want to block" @click="onInputClick" class="user-autosuggest-input" /> <div class="user-autosuggest-results" v-if="resultsVisible"> <BasicUserCard v-for="user in results" :key="user.id" :user="user"/> </div> @@ -10,15 +10,31 @@ <script src="./user_autosuggest.js"></script> <style lang="scss"> +@import '../../_variables.scss'; + .user-autosuggest { position: relative; + &-input { + display: block; + width: 100%; + } + &-results { position: absolute; left: 0; top: 100%; right: 0; - background: #FFF; + background-color: $fallback--lightBg; + background-color: var(--lightBg, $fallback--lightBg); + border-style: solid; + border-width: 1px; + border-color: $fallback--border; + border-color: var(--border, $fallback--border); + border-radius: $fallback--inputRadius; + border-radius: var(--inputRadius, $fallback--inputRadius); + border-top-left-radius: 0; + border-top-right-radius: 0; max-height: 400px; overflow-y: auto; z-index: 1; diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index d98a8eba..811f63aa 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -195,7 +195,9 @@ </div> <div :label="$t('settings.blocks_tab')"> - <UserAutoSuggest /> + <div class="profile-edit-usersearch-wrapper"> + <UserAutoSuggest /> + </div> <block-list :refresh="true"> <template slot="empty">{{$t('settings.no_blocks')}}</template> </block-list> @@ -263,5 +265,9 @@ text-align: right; } } + + &-usersearch-wrapper { + padding: 1em; + } } </style> |