Fix login form not switchable

YunjieZhang · May 22, 2016 · b60a6c0 · b60a6c0
1 parent 5c3a379
commit b60a6c0
Show file tree

Hide file tree

Showing 19 changed files with 4,219 additions and 45 deletions.
diff --git a/bower.json b/bower.json
@@ -72,6 +72,7 @@
     "pdfmake": "^0.1.20",
     "jszip": "Stuk/jszip#v2.6.0",
     "echarts": "^3.1.7",
-    "malihu-custom-scrollbar-plugin": "^3.1.3"
+    "malihu-custom-scrollbar-plugin": "^3.1.3",
+    "animate.css": "^3.5.1"
   }
 }
diff --git a/production/css/custom.css b/production/css/custom.css
@@ -3490,35 +3490,37 @@ ul.project_files li a i {
 
 /* *********  /ecommerce  **************************** */
 
-/********* login ****************/
-
+/** login **/
+.login {
+  background:#F7F7F7;
+}
+.login .fa-paw {
+  font-size: 26px;
+}
 a.hiddenanchor {
   display: none;
 }
-
-/** The wrapper that will contain our two forms **/
-
-#wrapper {
+.login_wrapper {
   right: 0px;
   margin: 0px auto;
   margin-top: 5%;
   max-width: 350px;
   position: relative;
 }
-#register, #login {
+.registration_form, .login_form {
   position: absolute;
   top: 0px;
   width: 100%;
 }
-#register {
+.registration_form {
   z-index: 21;
   opacity: 0;
   width: 100%;
 }
-#login {
+.login_form {
   z-index: 22;
 }
-#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login {
+#signup:target ~ .login_wrapper .registration_form, #signin:target ~ .login_wrapper .login_form {
   z-index: 22;
   -webkit-animation-name: fadeInLeft;
   -moz-animation-name: fadeInLeft;
@@ -3531,16 +3533,13 @@ a.hiddenanchor {
   -ms-animation-delay: .1s;
   animation-delay: .1s;
 }
-#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register {
+#signup:target ~ .login_wrapper .login_form, #signin:target ~ .login_wrapper .registration_form {
   -webkit-animation-name: fadeOutLeft;
   -moz-animation-name: fadeOutLeft;
   -ms-animation-name: fadeOutLeft;
   -o-animation-name: fadeOutLeft;
   animation-name: fadeOutLeft;
 }
-
-/** the actual animation, credit where due : http://daneden.me/animate/ ***/
-
 .animate {
   -webkit-animation-duration: 0.5s;
   -webkit-animation-timing-function: ease;
@@ -3558,12 +3557,9 @@ a.hiddenanchor {
   animation-timing-function: ease;
   animation-fill-mode: both;
 }
+/** /login **/
 
-/********* /login ***************/
-
-
-/********** sign in ***************************/
-
+/** signup **/
 .login_box {
   padding: 20px;
   margin: auto;
@@ -3754,8 +3750,7 @@ a.hiddenanchor {
 header {
   width: 100%;
 }
-
-/********** end of sign in ********************/
+/** signup **/
 
 
 /* *********  start nprogress  **************************** */

diff --git a/production/login.html b/production/login.html
@@ -13,18 +13,20 @@
     <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
     <!-- Font Awesome -->
     <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
+    <!-- Animate.css -->
+    <link href="https://colorlib.com/polygon/gentelella/css/animate.min.css" rel="stylesheet">
 
     <!-- Custom Theme Style -->
     <link href="css/custom.css" rel="stylesheet">
   </head>
 
-  <body style="background:#F7F7F7;">
-    <div class="">
-      <a class="hiddenanchor" id="toregister"></a>
-      <a class="hiddenanchor" id="tologin"></a>
+  <body class="login">
+    <div>
+      <a class="hiddenanchor" id="signup"></a>
+      <a class="hiddenanchor" id="signin"></a>
 
-      <div id="wrapper">
-        <div id="login" class=" form">
+      <div class="login_wrapper">
+        <div class="animate form login_form">
           <section class="login_content">
             <form>
               <h1>Login Form</h1>
@@ -38,25 +40,27 @@ <h1>Login Form</h1>
                 <a class="btn btn-default submit" href="index.html">Log in</a>
                 <a class="reset_pass" href="#">Lost your password?</a>
               </div>
+
               <div class="clearfix"></div>
-              <div class="separator">
 
+              <div class="separator">
                 <p class="change_link">New to site?
-                  <a href="#toregister" class="to_register"> Create Account </a>
+                  <a href="#signup" class="to_register"> Create Account </a>
                 </p>
+
                 <div class="clearfix"></div>
                 <br />
-                <div>
-                  <h1><i class="fa fa-paw" style="font-size: 26px;"></i> Gentelella Alela!</h1>
 
-                  <p>©2015 All Rights Reserved. Gentelella Alela! is a Bootstrap 3 template. Privacy and Terms</p>
+                <div>
+                  <h1><i class="fa fa-paw"></i> Gentelella Alela!</h1>
+                  <p>©2016 All Rights Reserved. Gentelella Alela! is a Bootstrap 3 template. Privacy and Terms</p>
                 </div>
               </div>
             </form>
           </section>
         </div>
 
-        <div id="register" class=" form">
+        <div id="register" class="animate form registration_form">
           <section class="login_content">
             <form>
               <h1>Create Account</h1>
@@ -72,18 +76,20 @@ <h1>Create Account</h1>
               <div>
                 <a class="btn btn-default submit" href="index.html">Submit</a>
               </div>
+
               <div class="clearfix"></div>
-              <div class="separator">
 
+              <div class="separator">
                 <p class="change_link">Already a member ?
-                  <a href="#tologin" class="to_register"> Log in </a>
+                  <a href="#signin" class="to_register"> Log in </a>
                 </p>
+
                 <div class="clearfix"></div>
                 <br />
-                <div>
-                  <h1><i class="fa fa-paw" style="font-size: 26px;"></i> Gentelella Alela!</h1>
 
-                  <p>©2015 All Rights Reserved. Gentelella Alela! is a Bootstrap 3 template. Privacy and Terms</p>
+                <div>
+                  <h1><i class="fa fa-paw"></i> Gentelella Alela!</h1>
+                  <p>©2016 All Rights Reserved. Gentelella Alela! is a Bootstrap 3 template. Privacy and Terms</p>
                 </div>
               </div>
             </form>

diff --git a/vendors/animate.css/.bower.json b/vendors/animate.css/.bower.json
@@ -0,0 +1,24 @@
+{
+  "name": "animate.css",
+  "main": "./animate.css",
+  "ignore": [
+    ".*",
+    "source",
+    "*.yml",
+    "Gemfile",
+    "Gemfile.lock",
+    "*.md"
+  ],
+  "homepage": "https://github.com/daneden/animate.css",
+  "version": "3.5.1",
+  "_release": "3.5.1",
+  "_resolution": {
+    "type": "version",
+    "tag": "3.5.1",
+    "commit": "c7084f820bf65063b4e3fb6293ffe5df9eed1398"
+  },
+  "_source": "https://github.com/daneden/animate.css.git",
+  "_target": "^3.5.1",
+  "_originalSource": "animate.css",
+  "_direct": true
+}
diff --git a/vendors/animate.css/animate-config.json b/vendors/animate.css/animate-config.json
@@ -0,0 +1,120 @@
+{
+
+  "attention_seekers": [
+    "bounce",
+    "flash",
+    "pulse",
+    "rubberBand",
+    "shake",
+    "headShake",
+    "swing",
+    "tada",
+    "wobble",
+    "jello"
+  ],
+
+  "bouncing_entrances": [
+    "bounceIn",
+    "bounceInDown",
+    "bounceInLeft",
+    "bounceInRight",
+    "bounceInUp"
+  ],
+
+  "bouncing_exits": [
+    "bounceOut",
+    "bounceOutDown",
+    "bounceOutLeft",
+    "bounceOutRight",
+    "bounceOutUp"
+  ],
+
+  "fading_entrances": [
+    "fadeIn",
+    "fadeInDown",
+    "fadeInDownBig",
+    "fadeInLeft",
+    "fadeInLeftBig",
+    "fadeInRight",
+    "fadeInRightBig",
+    "fadeInUp",
+    "fadeInUpBig"
+  ],
+
+  "fading_exits": [
+    "fadeOut",
+    "fadeOutDown",
+    "fadeOutDownBig",
+    "fadeOutLeft",
+    "fadeOutLeftBig",
+    "fadeOutRight",
+    "fadeOutRightBig",
+    "fadeOutUp",
+    "fadeOutUpBig"
+  ],
+
+  "flippers": [
+    "flip",
+    "flipInX",
+    "flipInY",
+    "flipOutX",
+    "flipOutY"
+  ],
+
+  "lightspeed": [
+    "lightSpeedIn",
+    "lightSpeedOut"
+  ],
+
+  "rotating_entrances": [
+    "rotateIn",
+    "rotateInDownLeft",
+    "rotateInDownRight",
+    "rotateInUpLeft",
+    "rotateInUpRight"
+  ],
+
+  "rotating_exits": [
+    "rotateOut",
+    "rotateOutDownLeft",
+    "rotateOutDownRight",
+    "rotateOutUpLeft",
+    "rotateOutUpRight"
+  ],
+
+  "specials": [
+    "hinge",
+    "rollIn",
+    "rollOut"
+  ],
+
+  "zooming_entrances": [
+    "zoomIn",
+    "zoomInDown",
+    "zoomInLeft",
+    "zoomInRight",
+    "zoomInUp"
+  ],
+
+  "zooming_exits": [
+    "zoomOut",
+    "zoomOutDown",
+    "zoomOutLeft",
+    "zoomOutRight",
+    "zoomOutUp"
+  ],
+
+  "sliding_entrances": [
+    "slideInDown",
+    "slideInLeft",
+    "slideInRight",
+    "slideInUp"
+  ],
+
+  "sliding_exits": [
+    "slideOutDown",
+    "slideOutLeft",
+    "slideOutRight",
+    "slideOutUp"
+  ]
+}