diff options
Diffstat (limited to 'src/components/user_finder/user_finder.vue')
| -rw-r--r-- | src/components/user_finder/user_finder.vue | 20 |
1 files changed, 17 insertions, 3 deletions
diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue index c23d8ee0..2ca476fa 100644 --- a/src/components/user_finder/user_finder.vue +++ b/src/components/user_finder/user_finder.vue @@ -1,8 +1,15 @@ <template> - <a href="#" v-if="hidden"><i class="icon-user-plus user-finder-icon" @click.prevent="toggleHidden"/></a> - <span v-else> - <input class="user-finder-input base03-border" @keyup.enter="findUser(username)" v-model="username" placeholder="Find user" id="user-finder-input" type="text"/> + <span> + <span class="finder-error base05" v-if="error"> + <i class="icon-cancel user-finder-icon" @click="dismissError"/> + Error fetching user + </span> + <i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" /> + <a href="#" v-if="hidden"><i class="icon-user-plus user-finder-icon" @click.prevent="toggleHidden"/></a> + <span v-else> + <input class="user-finder-input base03-border" @keyup.enter="findUser(username)" v-model="username" placeholder="Find user" id="user-finder-input" type="text"/> <i class="icon-cancel user-finder-icon" @click="toggleHidden"/> + </span> </span> </template> @@ -20,4 +27,11 @@ border-radius: 5px; padding: 0.1em 0.2em 0.2em 0.2em; } + + .finder-error { + background-color: rgba(255, 48, 16, 0.65); + margin: 0.35em; + border-radius: 5px; + padding: 0.25em; + } </style> |