From 5e6ffc0e45abba5e7519457b21bd63ae9ba008f8 Mon Sep 17 00:00:00 2001 From: eal Date: Sun, 10 Sep 2017 20:46:42 +0300 Subject: [PATCH] Make user finder more pleasant. --- src/components/user_finder/user_finder.js | 12 +++++++++++- src/components/user_finder/user_finder.vue | 20 +++++++++++++++++--- static/font/css/animation.css | 7 +++++++ 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 index 03205382..abd40d51 100644 --- 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 index c23d8ee0..2ca476fa 100644 --- a/src/components/user_finder/user_finder.vue +++ b/src/components/user_finder/user_finder.vue @@ -1,8 +1,15 @@ @@ -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; + } diff --git a/static/font/css/animation.css b/static/font/css/animation.css index ac5a9562..c8cfc252 100644 --- 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);