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

Make user finder more pleasant.

See merge request !120
This commit is contained in:
lambadalambda 2017-09-13 04:46:06 -04:00
commit e7691bff82
3 changed files with 35 additions and 4 deletions

View file

@ -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
}
}
}

View file

@ -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>

View file

@ -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);