mirror of
https://github.com/bigchaindb/site.git
synced 2024-11-25 03:03:16 +01:00
all the form interaction, prepare ajax submitting, ref #2
This commit is contained in:
parent
7013177db7
commit
3b29264de3
@ -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
58
_src/_assets/javascripts/bigchain/form-earlyaccess.js
Normal 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);
|
||||
@ -24,6 +24,7 @@
|
||||
@import 'bigchain/_sections';
|
||||
@import 'bigchain/_alerts';
|
||||
@import 'bigchain/_footer';
|
||||
@import 'bigchain/_utilities';
|
||||
|
||||
// Content types
|
||||
//@import 'bigchain/content-page';
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
21
_src/_assets/styles/bigchain/_utilities.scss
Normal 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;
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -70,10 +69,10 @@ front_page: true
|
||||
<div class="row">
|
||||
<header class="section-header">
|
||||
<h1 class="section-title">Early Access</h1>
|
||||
</header>
|
||||
<p class="section-description">For early access and inquiries, enter your contact information below</p>
|
||||
</header>
|
||||
|
||||
<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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user