bigchaindb
/
site
mirror of https://github.com/bigchaindb/site.git
1
0
Fork 0
Code Releases Activity

all the form interaction, prepare ajax submitting, ref #2

This commit is contained in:
Matthias Kretschmann 2015-12-21 14:03:31 +01:00
parent 7013177db7
commit 3b29264de3
8 changed files with 112 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
_src/_assets/javascripts/bigchain.js
View File

@ -6,6 +6,8 @@
//=include bigchain/forms.js
//=include bigchain/smoothscroll.js
//=include bigchain/form-earlyaccess.js
jQuery(function($) {
//
@ -14,6 +16,7 @@ jQuery(function($) {
GoogleAnalytics.init();
Forms.init();
SmoothScroll.init();
FormEarlyAccess.init();
$('.hero .logo').on('animationend webkitAnimationEnd oAnimationEnd',
function(e) {

58
_src/_assets/javascripts/bigchain/form-earlyaccess.js Normal file
View File

@ -0,0 +1,58 @@
var FormEarlyAccess = (function(w, d, $) {
'use strict';
var app, _private, _config;
_config = {
form: $('#form-earlyaccess'),
formBtn: $('#form-earlyaccess').find('.btn'),
formURL: $('#form-earlyaccess').attr('action'),
formMethod: $('#form-earlyaccess').attr('metthod')
};
_private = {
formSubmit: function() {
_config.form.submit(function(e) {
e.preventDefault();
if ( $(this).parsley().isValid() ) {
$.ajax({
url: _config.formURL,
method: _config.formMethod,
data: $(this).serialize(),
// dataType: 'json',
// contentType: 'application/json',
// crossDomain: true,
beforeSend: function() {
_config.formBtn
.addClass('disabled')
.attr('value', 'Sending...');
},
success: function(data) {
_config.form.find('.form-group').addClass('hide');
_config.form.find('.alert-success').removeClass('hide');
_config.formBtn.removeClass('disabled');
//GoogleAnalytics.gaEventEarlyAccess();
},
error: function(err) {
_config.form.find('.alert-danger').removeClass('hide');
_config.formBtn.removeClass('disabled');
}
});
}
});
}
};
app = {
init: function() {
_private.formSubmit();
}
};
return app;
})(window, document, jQuery);

1
_src/_assets/styles/bigchain.scss
View File

@ -24,6 +24,7 @@
@import 'bigchain/_sections';
@import 'bigchain/_alerts';
@import 'bigchain/_footer';
@import 'bigchain/_utilities';
// Content types
//@import 'bigchain/content-page';

2
_src/_assets/styles/bigchain/_forms.scss
View File

@ -75,7 +75,7 @@
&:invalid:not(.is-empty) ~ .form-label,
&.parsley-error ~ .form-label,
&.parsley-success ~ .form-label {
transform: translate3d(0, -1rem, 0) scale(.75);
transform: translate3d(0, -($spacer), 0) scale(.75);
transform-origin: left top;
}
}

2
_src/_assets/styles/bigchain/_sections.scss
View File

@ -38,7 +38,7 @@
.section-title {
font-size: $font-size-h3;
margin-top: 0;
margin-bottom: 0;
margin-bottom: ($spacer * 2);
&:after {
content: "";

21
_src/_assets/styles/bigchain/_utilities.scss Normal file
View File

@ -0,0 +1,21 @@
//
// Utilities
// ---
// bigchain.io
//
.invisible {
visibility: hidden !important;
}
.hide {
display: none !important;
}
.text-hide {
font: "0/0" a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}

2
_src/_assets/styles/bigchain/_variables.scss
View File

@ -46,7 +46,7 @@ $font-size-root: 18px !default;
$font-size-base: 1rem !default;
$font-size-lg: 1.25rem !default;
$font-size-sm: 0.875rem !default;
$font-size-sm: 0.75rem !default;
$font-size-xs: 0.75rem !default;
$font-size-h1: 3rem !default;

34
_src/index.html
View File

@ -56,13 +56,12 @@ front_page: true
<div class="row">
<header class="section-header">
<h1 class="section-title">Whitepaper</h1>
<p class="section-description">Coming soon</p>
</header>
<p class="section-description">
<svg class="icon">
<use xlink:href="/assets/img/sprite.svg#icon-documents"></use>
</svg>
Coming soon
</p>
<svg class="icon">
<use xlink:href="/assets/img/sprite.svg#icon-documents"></use>
</svg>
</div>
</section>
@ -70,10 +69,10 @@ front_page: true
<div class="row">
<header class="section-header">
<h1 class="section-title">Early Access</h1>
<p class="section-description">For early access and inquiries, enter your contact information below</p>
</header>
<p class="section-description">For early access and inquiries, enter your contact information below</p>
<form action="" id="form-earlyaccess" class="js-parsley">
<form id="form-earlyaccess" class="js-parsley" action="" method="POST">
<p class="form-group">
<input class="form-control" type="text" id="name" name="name" required>
<label class="form-label" for="name">Your Name</label>
@ -89,6 +88,25 @@ front_page: true
<p class="form-group">
<input class="btn btn-primary" type="submit" value="Send">
</p>
<div class="alert alert-success animation-slide-in-from-bottom hide">
<svg class="alert__icon icon icon-success">
<use xlink:href="/assets/img/sprite.svg#icon-success"></use>
</svg>
<p>
<strong class="alert__title">Great to hear you’re interested!</strong>
We’ll get in touch soon to discuss how we can work together.
</p>
</div>
<div class="alert alert-danger hide">
<svg class="alert__icon icon icon-fail">
<use xlink:href="/assets/img/sprite.svg#icon-fail"></use>
</svg>
<p>
<strong class="alert__title">Ops, there was an error</strong>
Would you mind trying again?
</p>
</div>
</form>
</div>
</section>