Merge branch 'fix/responsive-user-search' into 'develop'

Make user finder more pleasant.

See merge request !120

src/components/user_finder/user_finder.js

@@ -1,20 +1,30 @@
 const UserFinder = {
   data: () => ({
     username: undefined,
-    hidden: true
+    hidden: true,
+    error: false,
+    loading: false
   }),
   methods: {
     findUser (username) {
+      this.loading = true
       this.$store.state.api.backendInteractor.externalProfile(username)
         .then((user) => {
+          this.loading = false
+          this.hidden = true
           if (!user.error) {
             this.$store.commit('addNewUsers', [user])
             this.$router.push({name: 'user-profile', params: {id: user.id}})
+          } else {
+            this.error = true
           }
         })
     },
     toggleHidden () {
       this.hidden = !this.hidden
+    },
+    dismissError () {
+      this.error = false
     }
   }
 }

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>

static/font/css/animation.css

@@ -8,6 +8,13 @@
   animation: spin 2s infinite linear;
   display: inline-block;
 }
+.animate-spin-slow {
+  -moz-animation: spin 4s infinite linear;
+  -o-animation: spin 4s infinite linear;
+  -webkit-animation: spin 4s infinite linear;
+  animation: spin 4s infinite linear;
+  display: inline-block;
+}
 @-moz-keyframes spin {
   0% {
     -moz-transform: rotate(0deg);