diff options
Diffstat (limited to 'src/components/user_finder/user_finder.vue')
| -rw-r--r-- | src/components/user_finder/user_finder.vue | 29 |
1 files changed, 22 insertions, 7 deletions
diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue index 4d9f6842..9efdfab7 100644 --- a/src/components/user_finder/user_finder.vue +++ b/src/components/user_finder/user_finder.vue @@ -1,11 +1,14 @@ <template> <div class="user-finder-container"> <i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" /> - <a href="#" v-if="hidden" :title="$t('finder.find_user')" ><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden" /></a> - <span v-else> + <a href="#" v-if="hidden" :title="$t('finder.find_user')"><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden" /></a> + <template v-else> <input class="user-finder-input" @keyup.enter="findUser(username)" v-model="username" :placeholder="$t('finder.find_user')" id="user-finder-input" type="text"/> + <button class="btn search-button" @click="findUser(username)"> + <i class="icon-search"/> + </button> <i class="icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/> - </span> + </template> </div> </template> @@ -16,11 +19,23 @@ .user-finder-container { max-width: 100%; -} + display: inline-flex; + align-items: baseline; + vertical-align: baseline; + + + .user-finder-input, + .search-button { + height: 29px; + } + .user-finder-input { + max-width: 80%; + } -.user-finder-input { - max-width: 80%; - vertical-align: middle; + .search-button { + margin-left: .5em; + margin-right: .5em; + } } </style> |
