improved form, other minor improvements

gulpfile.js

@@ -71,6 +71,7 @@ gulp.task('watch', ['css', 'browserify', 'browser-sync'], function() {
   gulp.watch('src/scss/**/*.+(sass|scss)', ['css'])
   gulp.watch('src/*.html', browserSync.reload)
   gulp.watch('src/js/main.js', ['browserify'])
+  gulp.watch('src/js/mc-validate.js', ['browserify'])
 })
 
 gulp.task('build', ['clean', 'css', 'browserify', 'images', 'demo', 'dapps'], function() {
@@ -79,9 +80,9 @@ gulp.task('build', ['clean', 'css', 'browserify', 'images', 'demo', 'dapps'], fu
       .pipe(cleanCSS({compatibility: 'ie9'}))
       .pipe(gulp.dest('build/css'))
 
-  gulp.src(['src/js/app.js', 'src/js/mc-validate.js'])
+  gulp.src(['src/js/mc-validate.js','src/js/app.js'])
-      .pipe(concat('app.js'))
       .pipe(uglify())
+      //.on('error', gutil.log)
       .pipe(gulp.dest('build/js'))
 
   gulp.src('src/*.html')

src/css/main.css

@@ -340,6 +340,10 @@ li.social-link a {
   background-color: #E3306D;
   background-image: url(../img/new-site/icon_sl.svg); }
 
+.social-link.social-link--gh a {
+  background-color: #535353;
+  background-image: url(../img/new-site/icon_gh.svg); }
+
 .social-link:hover a {
   -ms-transform: scale(1.06);
   transform: scale(1.06); }
@@ -884,6 +888,12 @@ li.social-link a {
   width: 400px;
   position: relative; }
 
+.email-form.email-form--error .email-form__inner {
+  animation-duration: .6s;
+  animation-fill-mode: both;
+  animation-name: shakeIt;
+  animation-timing-function: ease; }
+
 .email-form a {
   color: white;
   font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
@@ -894,6 +904,15 @@ li.social-link a {
   text-align: left;
   margin: 10px 0 0 0; }
 
+.email-form__error-message {
+  opacity: 0;
+  transform: translate3d(0, 10px, 0);
+  transition: transform .2s ease, opacity .2s ease; }
+
+.email-form__error-message.email-form__error-message--shown {
+  opacity: 1;
+  transform: translate3d(0, 0, 0); }
+
 .email-form__success-message {
   width: 100%;
   padding: 15px;
@@ -905,9 +924,9 @@ li.social-link a {
   line-height: 22px;
   opacity: 0;
   transform: translate3d(0, 10px, 0);
-  transition: transform .6s ease,opacity .6s ease; }
+  transition: transform .2s ease, opacity .2s ease; }
 
-.email-form--valid .email-form__success-message {
+.email-form__success-message.email-form__success-message--shown {
   opacity: 1;
   transform: translate3d(0, 0, 0); }
 
@@ -1353,6 +1372,14 @@ input.email-form__input--email:disabled {
   .more-button {
     display: none; } }
 
+@keyframes shakeIt {
+  0%, 100% {
+    transform: translate3d(0, 0, 0); }
+  20%, 60% {
+    transform: translate3d(-4px, 0, 0); }
+  40%, 80% {
+    transform: translate3d(4px, 0, 0); } }
+
 .slide.slide--two {
   padding: 40px 0 40px 0;
   margin: -140px 0 0 0; }
@@ -1849,7 +1876,7 @@ input.email-form__input--email:disabled {
 .slide.slide--four {
   display: -ms-flexbox;
   display: flex;
-  padding: 40px 0 60px; }
+  padding: 40px 0 100px; }
 
 .slide.slide--four .slide__inner {
   border-radius: 8px;

src/img/new-site/icon_gh.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
+    <title>icon_github</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="page" transform="translate(-658.000000, -815.000000)" fill="#FFFFFF">
+            <g id="footer" transform="translate(538.000000, 805.000000)">
+                <g id="Group-2">
+                    <g id="Group-24">
+                        <g id="icon_github" transform="translate(120.000000, 10.000000)">
+                            <path d="M1.66666667,10.0413934 C1.66666667,13.723213 4.05419647,16.8463905 7.3656343,17.9483273 C7.78256955,18.0250639 7.93450791,17.7677406 7.93450791,17.5467394 C7.93450791,17.3492707 7.92734584,16.8249042 7.92325322,16.1296711 C5.60529789,16.6330629 5.11623029,15.012387 5.11623029,15.012387 C4.73715174,14.0495991 4.19078752,13.793299 4.19078752,13.793299 C3.43416516,13.2766063 4.24808414,13.2868378 4.24808414,13.2868378 C5.08451252,13.3456692 5.52446873,14.1457756 5.52446873,14.1457756 C6.26779009,15.4190907 7.47511178,15.0512668 7.94985522,14.8379392 C8.02556862,14.2997602 8.24094253,13.932448 8.47882583,13.7242361 C6.62845187,13.513978 4.68292458,12.7987934 4.68292458,9.6055298 C4.68292458,8.69594592 5.00777597,7.9516014 5.54083919,7.36942679 C5.45489426,7.15865707 5.16892272,6.310974 5.62269151,5.1640184 C5.62269151,5.1640184 6.32201725,4.93994768 7.91404483,6.01835196 C8.57858334,5.8331611 9.29172166,5.74107724 10.0002558,5.7374962 C10.7082783,5.74107724 11.4209051,5.8331611 12.0864667,6.01835196 C13.6774712,4.93994768 14.3757738,5.1640184 14.3757738,5.1640184 C14.8305657,6.310974 14.5445942,7.15865707 14.4591608,7.36942679 C14.9932472,7.9516014 15.3155407,8.69594592 15.3155407,9.6055298 C15.3155407,12.8069786 13.3669439,13.5114201 11.5109426,13.7175856 C11.8097036,13.9749088 12.0762352,14.4834164 12.0762352,15.2610134 C12.0762352,16.3747165 12.0660037,17.2735573 12.0660037,17.5467394 C12.0660037,17.7697869 12.2164073,18.0291565 12.6389699,17.9478157 C15.9478498,16.843321 18.3333333,13.7221898 18.3333333,10.0413934 C18.3333333,5.43873524 14.6018908,1.70780427 9.99923263,1.70780427 C5.39810921,1.70780427 1.66666667,5.43873524 1.66666667,10.0413934 Z" id="Fill-3"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/index.html

@@ -75,8 +75,8 @@
                             <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_d0c1a0be2adff281b52e27a7f_09e2d9ae07" tabindex="-1" value=""></div>
                           </div>
                           <div id="mce-responses" class="email-form__responces">
-                            <div class="response email-form__error-message" id="mce-error-response" style="display:none"></div>
+                            <div class="response email-form__error-message" id="mce-error-response"></div>
-                            <div class="email-form__success-message response" id="mce-success-response" style="display:none"></div>
+                            <div class="email-form__success-message response" id="mce-success-response"></div>
                           </div>
                         </form>
                     <!-- End Mailchimp -->
@@ -328,6 +328,7 @@
             <li class="social-link social-link--fb social-link--inversed"><a href="https://www.facebook.com/ethstatus" target="_blank"></a></li>
             <li class="social-link social-link--tw social-link--inversed"><a href="https://twitter.com/ethstatus" target="_blank"></a></li>
             <li class="social-link social-link--sl social-link--inversed"><a href="http://slack.status.im/" target="_blank"></a></li>
+            <li class="social-link social-link--gh social-link--inversed"><a href="https://github.com/status-im" target="_blank"></a></li>
           </ul>
           <div class="address">
             Status Holdings Pte.&nbsp;Ltd.<br/>22&nbsp;Sin&nbsp;Ming&nbsp;Lane<br/>Singapore
@@ -336,6 +337,7 @@
 
       </div>
     <script src="js/app.js?v=44d5354"></script>
+    <script src="js/mc-validate.js"></script>
     <!-- Google Analytics -->
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

src/js/app.js

@@ -9780,7 +9780,10 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
     });
 
     document.querySelectorAll(".button--scroll-top")[0].addEventListener('click', function (event) {
-      animateScroll(body, 1000, "easeInOutCubic", 0);
+      animateScroll(body, 600, "easeInOutCubic", 0);
+      setTimeout(function () {
+        document.querySelectorAll(".email-form__input--email")[0].focus();
+      }, 1000);
       event.preventDefault();
     });
 

src/js/main.js

@@ -29,7 +29,10 @@ document.querySelectorAll(".nav__item--about")[0].addEventListener('click', func
 })
 
 document.querySelectorAll(".button--scroll-top")[0].addEventListener('click', function(event){
-    animateScroll(body, 1000, "easeInOutCubic", 0)
+    animateScroll(body, 600, "easeInOutCubic", 0)
+    setTimeout(function(){
+      document.querySelectorAll(".email-form__input--email")[0].focus()
+    }, 1000)
     event.preventDefault()
 })
 

src/js/mc-validate.js

@@ -143,21 +143,6 @@
 
 // MC
 (function($) {
-	var err_style = '';
-	try {
-	    err_style = mc_custom_error_style;
-	} catch(e){
-	    err_style = '#mc_embed_signup input.mce_inline_error { border-color:#6B0505; } #mc_embed_signup div.mce_inline_error { margin: 0 0 1em 0; padding: 5px 10px; background-color:#6B0505; font-weight: bold; z-index: 1; color:#fff; }';
-	}
-	var head = document.getElementsByTagName('head')[0];
-	var style = document.createElement('style');
-	style.type = 'text/css';
-	if (style.styleSheet) {
-	  style.styleSheet.cssText = err_style;
-	} else {
-	  style.appendChild(document.createTextNode(err_style));
-	}
-	head.appendChild(style);
 
 	// Expose extra mc form methods in global var
 	window.mc = {
@@ -165,27 +150,30 @@
 			$('#mc_embed_signup a.mc_embed_close').show();
 		    setTimeout( function(){ $('#mc_embed_signup').fadeIn(); } , mc.delayPopup);
 		},
+
 		closePopup: function() {
-            $('#mc_embed_signup').hide();
+      $('#mc_embed_signup').hide();
-            var now = new Date();
+      var now = new Date();
-            var expires_date = new Date( now.getTime() + 31536000000 );
+      var expires_date = new Date( now.getTime() + 31536000000 );
-            document.cookie = 'MCEvilPopupClosed=yes;expires=' + expires_date.toGMTString()+';path=/';
+      document.cookie = 'MCEvilPopupClosed=yes;expires=' + expires_date.toGMTString()+';path=/';
-        },
+    },
-        /**
+
+		/**
 		 *	Figure out if we should show the popup (if they've closed it before, don't show it.)
-         */
+     */
-        evalPopup: function() {
+    evalPopup: function() {
-        	$('#mc_embed_signup').hide();
+    	$('#mc_embed_signup').hide();
-		    cks = document.cookie.split(';');
+	    cks = document.cookie.split(';');
-		    for(i=0; i<cks.length; i++){
+	    for(i=0; i<cks.length; i++){
-		        parts = cks[i].split('=');
+	        parts = cks[i].split('=');
-		        if (parts[0].indexOf('MCEvilPopupClosed') != -1) mc.showPopup = false;
+	        if (parts[0].indexOf('MCEvilPopupClosed') != -1) mc.showPopup = false;
-		    }
+	    }
-		    if (mc.showPopup) mc.openPopup();
+	    if (mc.showPopup) mc.openPopup();
-        },
+    },
-        /**
+
+		/**
 		 *	Grab the list subscribe url from the form action and make it work for an ajax post.
-         */
+    */
 		getAjaxSubmitUrl: function() {
 			var url = $("form#mc-embedded-subscribe-form").attr("action");
 			url = url.replace("/post?u=", "/post-json?u=");
@@ -244,25 +232,19 @@
 
 		    // On successful form submission, display a success message and reset the form
 		    if (resp.result == "success") {
-		        $('#mce-'+resp.result+'-response').show();
+						showSuccessMessage(resp.msg)
-		        $('#mce-'+resp.result+'-response').html(resp.msg);
 		        $('.email-form__input--email').blur();
-
-						//Reset the form
-		        // $('#mc-embedded-subscribe-form').each(function(){
-		        //     this.reset();
-		    		// });
-
 						$('.email-form').addClass("email-form--valid");
 
 						//Disable form inputs
 						disableInputs();
-
+						//Send GA event
             ga('send', 'event', 'Waitlist', 'Sign Up', 'Waitlist');
 
 		    // If the form has errors, display them, inline if possible, or appended to #mce-error-response
 		    } else {
 					enableInputs()
+
 				// Example errors - Note: You only get one back at a time even if you submit several that are bad.
 				// Error structure - number indicates the index of the merge field that was invalid, then details
 				// Object {result: "error", msg: "6 - Please enter the date"}
@@ -296,7 +278,6 @@
 		        	// If index is -1 if means we don't have data on specifically which field was invalid.
 		        	// Just lump the error message into the generic response div.
 		            if (index == -1) {
-		              $('#mce-'+resp.result+'-response').show();
 		              $('#mce-'+resp.result+'-response').html(msg);
 		            } else {
 		                var fieldName = $("input[name*='"+fnames[index]+"']").attr('name'); // Make sure this exists (they haven't deleted the fnames array lookup)
@@ -304,9 +285,12 @@
 		                data[fieldName] = msg;
 		                mc.mce_validator.showErrors(data);
 		            }
-		        } catch(e){
+								focusOnEmailInput();
-		            $('#mce-'+resp.result+'-response').show();
+								showErrorMessage()
+
+		        } catch(e) {
 		            $('#mce-'+resp.result+'-response').html(msg);
+								showErrorMessage()
 		        }
 		    }
 		}
@@ -314,8 +298,8 @@
 
 	window.mc.mce_validator = $("#mc-embedded-subscribe-form").validate({
 
-		// Set error HTML: <div class="mce_inline_error"></div>
+		// Set error HTML: <div class="email-form__validation-message"></div>
-		errorClass: "email-form__validation-message",
+		errorClass: "form-error",
   	errorElement: "div",
 
   	// Validate fields on keyup, focusout and blur.
@@ -323,13 +307,13 @@
 
 		onfocusout: function(element) {
 			if (!mc.isTooEarly(element)) {
-				$(element).valid();
+				//$(element).valid();
 			}
 		},
 
 		onblur: function(element) {
 			if (!mc.isTooEarly(element)) {
-				$(element).valid();
+				//$(element).valid();
 			}
 		},
 
@@ -338,11 +322,16 @@
 		// it's strictly for visual display of errors
 		groups: mc.getGroups(),
 
+		highlight: function(element, errorClass, validClass) {
+			shakeForm()
+			showErrorMessage()
+  	},
+
 		// Place a field's inline error HTML
 		errorPlacement: function(error, element) {
-			$('.email-form__responces').append(error);
+			$('.email-form__error-message').html(error);
 			enableInputs();
-			hideAllMessages();
+			showErrorMessage();
     },
 
 		invalidHandler: function() {
@@ -350,9 +339,15 @@
 			hideAllMessages();
     },
 
+		showErrors: function(errorMap, errorList) {
+			var content = errorMap.EMAIL;
+			showErrorMessage(content);
+		},
+
     // Submit the form via ajax (see: jQuery Form plugin)
 		submitHandler: function(form) {
 			$(form).ajaxSubmit(mc.ajaxOptions);
+			hideAllMessages();
 			disableInputs();
 		}
  	});
@@ -391,8 +386,56 @@
 	};
 
 	function hideAllMessages() {
-		$('#mce-success-response').hide();
+		hideErrorMessage();
-		$('#mce-error-response').hide();
+		hideSuccessMessage();
+	};
+
+	function focusOnEmailInput() {
+		$(".email-form__input--email").focus();
+	};
+
+	var formShaking = false;
+	function shakeForm() {
+		if(!formShaking) {
+			$(".email-form").addClass("email-form--error")
+			formShaking = true
+		}
+		setTimeout(function(){
+			$(".email-form").removeClass("email-form--error")
+			formShaking = false
+		}, 600)
+	};
+
+	var errorMessageShown = false;
+	function showErrorMessage(content) {
+		if (!errorMessageShown) {
+			$(".email-form__error-message").addClass("email-form__error-message--shown")
+			$(".email-form__error-message").html(content);
+			errorMessageShown = true
+		}
+	};
+
+	function hideErrorMessage() {
+		if(!errorMessageShown) return
+		$(".email-form__error-message").removeClass("email-form__error-message--shown")
+		$(".email-form__error-message").html("");
+		errorMessageShown = false
+	};
+
+	var successMessageShown = false;
+	function showSuccessMessage(content) {
+		if (!successMessageShown) {
+			$(".email-form__success-message").addClass("email-form__success-message--shown")
+			$(".email-form__success-message").html(content);
+			successMessageShown = true
+		}
+	};
+
+	function hideSuccessMessage() {
+		if(!successMessageShown) return
+		$(".email-form__success-message").removeClass("email-form__success-message--shown")
+		$(".email-form__success-message").html("");
+		successMessageShown = false
 	};
 
 }(jQuery));

src/scss/header.scss

@@ -148,6 +148,11 @@ li.social-link a {
   background-image: url(../img/new-site/icon_sl.svg);
 }
 
+.social-link.social-link--gh a {
+  background-color: #535353;
+  background-image: url(../img/new-site/icon_gh.svg);
+}
+
 .social-link:hover a {
   transform: scale(1.06)
 }

src/scss/slide--four.scss

@@ -1,6 +1,6 @@
 .slide.slide--four {
   display: flex;
-  padding: 40px 0 60px;
+  padding: 40px 0 100px;
 }
 
 .slide.slide--four .slide__inner {

src/scss/slide--one.scss

@@ -75,6 +75,13 @@
   position: relative;
 }
 
+.email-form.email-form--error .email-form__inner{
+  animation-duration: .6s;
+  animation-fill-mode: both;
+  animation-name: shakeIt;
+  animation-timing-function: ease
+}
+
 .email-form a {
   color: rgba(255, 255, 255, 1);
   font-family: $PostGroteskMedium;
@@ -87,6 +94,17 @@
   margin: 10px 0 0 0;
 }
 
+.email-form__error-message {
+  opacity: 0;
+  transform: translate3d(0, 10px, 0);
+  transition: transform .2s ease, opacity .2s ease;
+}
+
+.email-form__error-message.email-form__error-message--shown {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+}
+
 .email-form__success-message {
   width: 100%;
   padding: 15px;
@@ -99,10 +117,10 @@
 
   opacity: 0;
   transform: translate3d(0, 10px, 0);
-  transition: transform .6s ease,opacity .6s ease;
+  transition: transform .2s ease, opacity .2s ease;
 }
 
-.email-form--valid .email-form__success-message {
+.email-form__success-message.email-form__success-message--shown {
   opacity: 1;
   transform: translate3d(0, 0, 0);
 }
@@ -720,6 +738,18 @@ input.email-form__input--email:disabled {
   .more-button {
     display: none;
   }
-
+}
-
+
+@keyframes shakeIt {
+  0%, 100% {
+    transform: translate3d(0, 0, 0);
+  }
+
+  20%, 60% {
+    transform: translate3d(-4px, 0, 0);
+  }
+
+  40%, 80% {
+    transform: translate3d(4px, 0, 0);
+  }
 }