refactor: re-organize components

Pinzzi · Sep 13, 2019 · e863ccb · e863ccb
1 parent baefc26
commit e863ccb
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 67 deletions.
diff --git a/login-form/App.vue b/login-form/App.vue
@@ -1,28 +1,40 @@
 <template>
   <div id="app" class="app">
-    <router-view/>
+    <router-view></router-view>
   </div>
 </template>
+
 <style>
-@import url("https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css");
+@import url('https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css');
+
 * {
   margin: 0;
   padding: 0;
 }
 a {
-  text-decoration: none;
+  text-decoration: inherit;
 }
-ul, ol {
+ul,
+ol {
   list-style: none;
 }
-input, select, button {
+input,
+select,
+button {
   font: inherit;
 }
-html, body {
+html,
+body {
   height: 100%;
 }
 body {
   background-color: #007dff;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+.app {
+  display: flex;
+  height: 100%;
+  align-items: center;
 }
 </style>
diff --git a/login-form/assets/logo.png b/login-form/assets/logo.png
diff --git a/login-form/components/LoginCheckbox.vue b/login-form/components/LoginCheckbox.vue
@@ -1,11 +1,12 @@
 <template>
   <span class="login_checkbox">
     <input :id="id" type="checkbox" />
-    <label :for="id">{{label}}</label>
+    <label :for="id">{{ label }}</label>
   </span>
 </template>
 <script>
 let GID = 1
+
 export default {
   props: {
     label: {
@@ -23,8 +24,8 @@ export default {
 .login_checkbox input {
   display: none;
 }
-.login_checkbox label::before,
-.login_checkbox label::after {
+.login_checkbox label:before,
+.login_checkbox label:after {
   content: '';
   display: inline-block;
   margin-right: 5px;
@@ -33,12 +34,12 @@ export default {
   height: 14px;
   vertical-align: top;
 }
-.login_checkbox label::before {
-  border-radius: 3px;
+.login_checkbox label:before {
+  border-radius: 2px;
   background-color: white;
   box-shadow: 0 1px 1px #0066d0;
 }
-.login_checkbox label::after {
+.login_checkbox label:after {
   content: '\f00c';
   position: relative;
   display: none;
@@ -51,7 +52,7 @@ export default {
   color: #007dff;
   float: left;
 }
-.login_checkbox input:checked+label::after {
+.login_checkbox input:checked + label:after {
   display: inline-block;
 }
 </style>
diff --git a/login-form/components/LoginForm.vue b/login-form/components/LoginForm.vue
@@ -10,10 +10,10 @@
       <login-textfield label="Email address" icon="envelope-o" />
     </div>
     <div class="login_form_r3">
-      <login-textfield label="Enter passwords" icon="lock" />
+      <login-textfield label="Enter password" icon="lock" />
     </div>
     <div class="login_form_r4">
-      <login-textfield label="Re-enter passwords" icon="lock" />
+      <login-textfield label="Re-enter password" icon="lock" />
     </div>
     <div class="login_form_r5">
       <login-checkbox label="Keep me sign in" />
@@ -28,6 +28,7 @@
 import LoginTextfield from './LoginTextfield'
 import LoginCheckbox from './LoginCheckbox'
 import LoginSubmit from './LoginSubmit'
+
 export default {
   components: {
     LoginTextfield,
@@ -40,12 +41,12 @@ export default {
 .login_form {
   padding: 20px;
 }
-.login_form>div {
+.login_form > div {
   padding-bottom: 10px;
   display: flex;
   min-height: 40px;
   justify-content: space-between;
-  transition: all .6s ease;
+  transition: all 0.6s ease;
 }
 .login_text {
   display: flex;
@@ -62,7 +63,8 @@ export default {
 }
 .login__signup .login_form_r5 {
   opacity: 0;
-  transition-duration: .4s;
+  /* transform: translateY(100%); */
+  transition-duration: 0.4s;
 }
 .login__signup .login_button label:nth-child(2) {
   transform: translateY(-100%);

diff --git a/login-form/components/LoginSubmit.vue b/login-form/components/LoginSubmit.vue
@@ -1,6 +1,6 @@
 <template>
   <span class="login_button">
-    <input type="button" />
+    <input type="button" value="" />
     <label>Sign In</label>
     <label>Sign Up</label>
   </span>
@@ -20,7 +20,7 @@
   border: none;
   border-radius: 2px;
   outline: none;
-  background: #0066d0
+  background: #0066d0;
 }
 .login_button label {
   position: absolute;
@@ -29,6 +29,6 @@
   align-items: center;
   justify-content: center;
   display: flex;
-  transition: all .6s ease;
+  transition: all 0.6s ease;
 }
 </style>
diff --git a/login-form/components/LoginTabs.vue b/login-form/components/LoginTabs.vue
@@ -1,8 +1,8 @@
 <template>
   <ul class="login_tabs">
-    <li><span>Sign up</span></li>
+    <li><span href="#">Sign up</span></li>
     <li class="login_tabs_s">or</li>
-    <li><span>Sign in</span></li>
+    <li><span href="#">Sign in</span></li>
   </ul>
 </template>
 <style>
@@ -16,31 +16,32 @@
   flex: 1;
   justify-content: space-around;
   align-items: center;
-  transition: all .6s ease;
+  transition: all 0.6s ease;
 }
 .login_tabs span {
   display: block;
   padding: 4px 10px;
   border: 1px solid white;
   border-radius: 3px;
+  color: white;
   text-align: center;
-  transition: all .6s ease;
+  transition: all 0.3s ease;
 }
 .login_tabs .login_tabs_s {
   justify-content: center;
-  transition-duration: .55s;
-  transition-delay: .05s;
+  transition-duration: 0.55s;
+  transition-delay: 0.05s;
 }
 .login_tabs_s {
   font-size: 12px;
 }
-.login_tabs_s::before,
-.login_tabs_s::after {
+.login_tabs_s:before,
+.login_tabs_s:after {
   content: '-';
 }
 .login__signup .login_tabs li:first-child {
-  transition-duration: .5s;
-  transition-delay: .1s;
+  transition-duration: 0.5s;
+  transition-delay: 0.1s;
   transform: translateX(100%) scale(1.5);
 }
 .login__signup .login_tabs li:first-child span {
@@ -55,19 +56,19 @@
   opacity: 0.8;
 }
 .login__signin .login_tabs li:last-child {
-  transition-duration: .5s;
-  transition-delay: .1s;
+  transition-duration: 0.5s;
+  transition-delay: 0.1s;
   transform: translateX(-100%) scale(1.5);
 }
 .login__signin .login_tabs li:last-child span {
-    border-color: transparent;
+  border-color: transparent;
 }
 .login__signin .login_tabs li:first-child {
-    transform: scale(0.6);
-    opacity: 0.4;
+  transform: scale(0.6);
+  opacity: 0.4;
 }
 .login__signin .login_tabs_s {
-    transform: translateX(-58%);
-    opacity: 0.8;
+  transform: translateX(-58%);
+  opacity: 0.8;
 }
 </style>
diff --git a/login-form/components/LoginTextfield.vue b/login-form/components/LoginTextfield.vue
@@ -1,6 +1,6 @@
 <template>
   <span class="login_textfield">
-    <label><i v-if="icon" :class="['fa', `fa-${icon}`]"></i> {{label}}</label>
+    <label><i v-if="icon" :class="['fa', `fa-${icon}`]"></i> {{ label }}</label>
     <input type="text" />
   </span>
 </template>
@@ -36,8 +36,8 @@ export default {
 .login_textfield input {
   flex: 1;
   width: 0;
-  padding: 0;
   margin: 0;
+  padding: 0;
   border: none;
   outline: none;
 }

diff --git a/login-form/router.js b/login-form/router.js
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Home from './views/Home.vue'
+import Login from './views/Login'
 
 Vue.use(Router)
 
@@ -10,8 +10,8 @@ export default new Router({
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: Home
+      name: 'login',
+      component: Login
     }
   ]
 })
diff --git a/login-form/store.js b/login-form/store.js
@@ -4,13 +4,7 @@ import Vuex from 'vuex'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-  state: {
-
-  },
-  mutations: {
-
-  },
-  actions: {
-
-  }
+  state: {},
+  mutations: {},
+  actions: {}
 })
diff --git a/login-form/views/Home.vue b/login-form/views/Home.vue
diff --git a/login-form/components/Login.vue → login-form/views/Login.vue b/login-form/components/Login.vue → login-form/views/Login.vue
@@ -1,12 +1,16 @@
 <template>
-  <div class="login" :class="{ login__signin: isSignIn, login__signup: isSignUp }">
+  <div
+    class="login"
+    :class="{ login__signin: isSignIn, login__signup: isSignUp }"
+  >
     <login-tabs @click.native="switchState" />
     <login-form />
   </div>
 </template>
 <script>
-import LoginTabs from './LoginTabs'
-import LoginForm from './LoginForm'
+import LoginTabs from '../components/LoginTabs'
+import LoginForm from '../components/LoginForm'
+
 export default {
   components: {
     LoginTabs,