From 5e6ffc0e45abba5e7519457b21bd63ae9ba008f8 Mon Sep 17 00:00:00 2001
From: eal <eal@waifu.club>
Date: Sun, 10 Sep 2017 20:46:42 +0300
Subject: Make user finder more pleasant.

---
 src/components/user_finder/user_finder.vue | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

(limited to 'src/components/user_finder/user_finder.vue')

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>
-- 
cgit v1.2.3-70-g09d2