Login improvements

phynias · Aug 27, 2017 · d66a5e6 · d66a5e6
1 parent b3e1cd8
commit d66a5e6
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>Umi</title>
-    <link rel="stylesheet" href="//unpkg.com/tachyons@4.7.1/css/tachyons.min.css">
+    <link rel="stylesheet" href="//unpkg.com/tachyons@4.8.1/css/tachyons.min.css">
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   </head>
   <body>

diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -7,7 +7,7 @@
           <span class="b db ttu white f3 logo-text">Umi!</span>
         </router-link>
       </div>
-      <div v-if="username">
+      <div>
         <div class="absolute nav" style="left: 95px; top: 16px;">
           <router-link to="/queue" class="white no-underline bg-animate">
             <i class="fa fa-th-list v-mid mr2" aria-hidden="true"></i>

diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
@@ -131,12 +131,6 @@
 </script>
 
 <style scoped>
-  .editable {
-    border-bottom: 1px dashed black;
-    display: inline-block;
-    cursor: pointer;
-  }
-
   .dashboard-section {
     padding-top: 15px;
   }

diff --git a/src/pages/Login.vue b/src/pages/Login.vue
@@ -5,27 +5,27 @@
       <h2 class="tc white fw5 mt1 mb2">The improved Crunchyroll player.</h2>
       <h3 class="tc white fw5 mt0">Watch together online, sync to MyAnimeList, and more.</h3>
       <form class="measure center bg-white shadow-2 br2 pa3" @submit.prevent="login">
-        <span class="dark-red" v-if="formError">{{ formError }}</span>
+        <span class="dark-red mb2 dib" v-if="formError">{{ formError }}</span>
         <legend class="f4 fw6 ph0 mt0 mb1">Sign in with Crunchyroll</legend>
         <fieldset class="ba b--transparent ph0 mh0 pb2">
           <div>
             <label class="db fw6 lh-copy f6 dark-gray" for="username">Username / Email</label>
-            <input class="pa2 input-reset ba b--black-20 br1 bg-transparent w-100" type="text" name="username" v-model="username" @focus="umiHover = true" @blur="umiHover = false" required>
+            <input class="pa2 input-reset ba b--black-20 br1 bg-transparent w-100" type="text" name="username" v-model="username" required>
           </div>
           <div class="mv3">
             <label class="db fw6 lh-copy f6 dark-gray" for="password">Password</label>
-            <input class="b pa2 input-reset ba b--black-20 br1 bg-transparent w-100" type="password" name="password" v-model="password" @focus="umiHover = true" @blur="umiHover = false" required>
+            <input class="b pa2 input-reset ba b--black-20 br1 bg-transparent w-100" type="password" name="password" v-model="password" required>
           </div>
         </fieldset>
         <div>
           <input class="fw6 ph3 pv2 input-reset ba b--black-20 bg-white bg-animate hover-bg-blue black hover-white br1 pointer f6 dib w-100" type="submit" :value="loading ? 'Signing in...' : 'Sign in'">
         </div>
         <small class="pt3 db">
-          <i class="fa fa-info-circle pr1" aria-hidden="true"></i> Your password is sent to Crunchyroll, and never stored by Umi player.
+          <i class="fa fa-info-circle pr1" aria-hidden="true"></i> Your password is sent directly to Crunchyroll, and is never stored by Umi.
           </small>
       </form>
     </div>
-    <img class="absolute left-0 right-0 center umi-illustration" :class="{hover: umiHover}" src="../assets/umi-login.png" alt="Illustration of the character Umi Sonoda">
+    <img class="absolute left-0 right-0 center umi-illustration" src="../assets/umi-login.png" alt="Illustration of the character Umi Sonoda">
   </div>
 </template>
 
@@ -40,8 +40,7 @@
         username: '',
         password: '',
         formError: '',
-        loading: false,
-        umiHover: false
+        loading: false
       }
     },
     methods: {
@@ -50,14 +49,12 @@
 
         this.formError = null
         this.loading = true
-        this.umiHover = true
         try {
           await $store.dispatch('login', {username, password})
           $router.replace($route.query.next || '/')
         } catch (err) {
           this.formError = typeof err.message === 'string' ? err.message : err.data.message
           this.loading = false
-          this.umiHover = false
         }
       }
     }
@@ -69,15 +66,25 @@
     height: 100vh;
     min-width: 600px;
     min-height: 965px;
-    background: linear-gradient(to bottom, #357EDD, #00449E);
+    background: linear-gradient(to bottom, #357edd, #00449e);
   }
 
-  .umi-illustration {
-    top: 450px;
-    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  @keyframes hover {
+    0% {
+      transform: translateY(0);
+    }
+    
+    50% {
+      transform: translateY(-15px);
+    }
+
+    100% {
+      transform: translateY(0);
+    }
   }
 
-  .umi-illustration.hover {
-    transform: translateY(-15px);
+  .umi-illustration {
+    top: 450px;
+    animation: hover 4s ease-in-out infinite;
   }
 </style>