commit: e7691bff82c5d14505627ed84955be3080c7137b
parent: 9c7eb1de3c58b3ddc78548f814f7130d7d9aa99c
Author: lambadalambda <gitgud@rogerbraun.net>
Date: Wed, 13 Sep 2017 04:46:06 -0400
Merge branch 'fix/responsive-user-search' into 'develop'
Make user finder more pleasant.
See merge request !120
Diffstat:
3 files changed, 35 insertions(+), 4 deletions(-)
diff --git a/src/components/user_finder/user_finder.js b/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
}
}
}
diff --git 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>
diff --git a/static/font/css/animation.css b/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);