From fd4289e45a1d9f952b44251110abe01081b92f8a Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 2 Apr 2019 13:18:41 -0400
Subject: [PATCH] improve ui
---
.../user_autosuggest/user_autosuggest.vue | 20 +++++++++++++++++--
.../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>