mirror of
https://github.com/bigchaindb/site.git
synced 2024-12-24 02:16:10 +01:00
drop in all elements for CLA page, ref #19
This commit is contained in:
parent
7e925e89bc
commit
670dc07ff1
@ -9,6 +9,7 @@
|
||||
|
||||
//=include bigchain/form-earlyaccess.js
|
||||
//=include bigchain/form-contact.js
|
||||
//=include bigchain/form-cla.js
|
||||
//=include bigchain/hero-video.js
|
||||
|
||||
jQuery(function($) {
|
||||
@ -19,6 +20,7 @@ jQuery(function($) {
|
||||
Forms.init();
|
||||
SmoothScroll.init();
|
||||
FormEarlyAccess.init();
|
||||
FormCla.init();
|
||||
|
||||
if ($('.hero-video').length > 0) {
|
||||
HeroVideo.init();
|
||||
|
||||
59
_src/_assets/javascripts/bigchain/form-cla.js
Normal file
59
_src/_assets/javascripts/bigchain/form-cla.js
Normal file
@ -0,0 +1,59 @@
|
||||
|
||||
var FormCla = (function(w, d, $) {
|
||||
|
||||
'use strict';
|
||||
|
||||
var app, _private, _config;
|
||||
|
||||
_config = {
|
||||
form: $('.form-cla'),
|
||||
formBtn: $('.form-cla').find('.btn'),
|
||||
formURL: $('.form-cla').attr('action'),
|
||||
formMethod: $('.form-cla').attr('method')
|
||||
};
|
||||
|
||||
_private = {
|
||||
formSubmit: function() {
|
||||
_config.form.submit(function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
if ( $(this).parsley().isValid() ) {
|
||||
$.ajax({
|
||||
url: _config.formURL,
|
||||
type: _config.formMethod,
|
||||
accept: {
|
||||
javascript: 'application/javascript'
|
||||
},
|
||||
data: _config.form.serialize(),
|
||||
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');
|
||||
},
|
||||
error: function(err) {
|
||||
_config.form.find('.alert-danger').removeClass('hide');
|
||||
_config.formBtn
|
||||
.removeClass('disabled')
|
||||
.attr('value', 'Send');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
app = {
|
||||
init: function() {
|
||||
_private.formSubmit();
|
||||
}
|
||||
};
|
||||
|
||||
return app;
|
||||
|
||||
})(window, document, jQuery);
|
||||
@ -1,15 +1,12 @@
|
||||
|
||||
//=include ../../../../node_modules/parsleyjs/dist/parsley.js
|
||||
|
||||
var Forms = (function(w, d) {
|
||||
var Forms = (function(w, d, $) {
|
||||
|
||||
'use strict'
|
||||
|
||||
var app, _private, _config
|
||||
|
||||
// workaround for blog
|
||||
var $ = jQuery
|
||||
|
||||
_config = {
|
||||
form: $('form'),
|
||||
parsleyForm: $('form.js-parsley')
|
||||
@ -52,4 +49,4 @@ var Forms = (function(w, d) {
|
||||
|
||||
return app
|
||||
|
||||
})(window, document)
|
||||
})(window, document, jQuery)
|
||||
|
||||
@ -62,8 +62,10 @@
|
||||
position: absolute;
|
||||
top: $input-padding-x;
|
||||
left: $input-padding-y;
|
||||
right: $input-padding-y;
|
||||
transition: .15s ease-out;
|
||||
user-select: none;
|
||||
cursor: text;
|
||||
|
||||
// style like placeholder
|
||||
font-family: $input-font;
|
||||
@ -84,8 +86,9 @@
|
||||
&:invalid:not(.is-empty) ~ .form-label,
|
||||
&.parsley-error ~ .form-label,
|
||||
&.parsley-success ~ .form-label {
|
||||
transform: translate3d(0, -($spacer + $input-padding-x), 0) scale(.75);
|
||||
transform-origin: left top;
|
||||
transform: translate3d(0, -($spacer + $input-padding-x), 0) scale(.7);
|
||||
transform-origin: left;
|
||||
color: $input-border-focus;
|
||||
}
|
||||
}
|
||||
|
||||
@ -101,6 +104,108 @@
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Checkboxes and radios
|
||||
//
|
||||
.radio,
|
||||
.checkbox {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: ($spacer * .75);
|
||||
|
||||
label {
|
||||
padding-left: 1.25rem;
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
// When there's no labels, don't position the input.
|
||||
input:only-child {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio input[type="radio"],
|
||||
.radio-inline input[type="radio"],
|
||||
.checkbox input[type="checkbox"],
|
||||
.checkbox-inline input[type="checkbox"] {
|
||||
position: absolute;
|
||||
margin-bottom: -0.25rem;
|
||||
margin-left: -1.25rem;
|
||||
margin-right: 0.25rem;
|
||||
|
||||
// reset styling, then style
|
||||
-webkit-appearance:button;
|
||||
background: none;
|
||||
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
border-radius: 50%;
|
||||
border: 2px solid $input-border-color;
|
||||
outline: none;
|
||||
|
||||
&:focus {
|
||||
border-color: $input-border-focus;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background: $brand-primary;
|
||||
border-color: $input-border-focus;
|
||||
}
|
||||
}
|
||||
|
||||
.radio + .radio,
|
||||
.checkbox + .checkbox {
|
||||
// Move up sibling radios or checkboxes for tighter spacing
|
||||
margin-top: -.25rem;
|
||||
}
|
||||
|
||||
// Radios and checkboxes on same line
|
||||
.radio-inline,
|
||||
.checkbox-inline {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding-left: 1.25rem;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
.radio-inline + .radio-inline,
|
||||
.checkbox-inline + .checkbox-inline {
|
||||
margin-top: 0;
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
// Apply same disabled cursor tweak as for inputs
|
||||
// Some special care is needed because <label>s don't inherit their parent's `cursor`.
|
||||
//
|
||||
// Note: Neither radios nor checkboxes can be readonly.
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
// These classes are used directly on <label>s
|
||||
.radio-inline,
|
||||
.checkbox-inline {
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
// These classes are used on elements with <label> descendants
|
||||
.radio,
|
||||
.checkbox {
|
||||
&.disabled {
|
||||
label {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Form Validation States
|
||||
//
|
||||
|
||||
116
_src/_includes/form-cla.html
Normal file
116
_src/_includes/form-cla.html
Normal file
@ -0,0 +1,116 @@
|
||||
|
||||
<div class="grid grid--full grid-small--half">
|
||||
<div class="grid__col">
|
||||
<a href="#form-cla-individuals">For Individuals</a>
|
||||
</div>
|
||||
<div class="grid__col">
|
||||
<a href="#form-cla-entities">For Organizations</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id="form-cla-individuals" class="form-cla js-parsley" action="//formspree.io/{{ site.email.contact }}" method="POST" accept-charset="UTF-8">
|
||||
|
||||
<p class="form-group">
|
||||
<input class="form-control" type="text" id="name" name="name" required>
|
||||
<label class="form-label" for="name">Your Name</label>
|
||||
</p>
|
||||
<p class="form-group">
|
||||
<input class="form-control" type="email" id="email" name="_replyto" required>
|
||||
<label class="form-label" for="email">Your Email</label>
|
||||
</p>
|
||||
<p class="form-group">
|
||||
<input class="form-control" type="text" id="org" name="org">
|
||||
<label class="form-label" for="org">Your Organization (if applicable)</label>
|
||||
</p>
|
||||
<p class="form-group">
|
||||
<input class="form-control" type="text" id="github" name="github">
|
||||
<label class="form-label" for="github">Your GitHub Account Name</label>
|
||||
</p>
|
||||
<p class="form-group">
|
||||
<input class="form-control" type="tel" id="phone" name="phone">
|
||||
<label class="form-label" for="phone">Your Phone Number</label>
|
||||
</p>
|
||||
<p class="text-dimmed">
|
||||
Agreed and accepted: By clicking and accepting this Agreement, I represent and warrant that I have authority to bind the entity named above (if applicable) to the terms and conditions of this Agreement.
|
||||
</p>
|
||||
<div class="checkbox">
|
||||
<label class="text-dimmed">
|
||||
<input type="checkbox" value="agreement" required>
|
||||
I have read and agree to the terms of this Agreement
|
||||
</label>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
|
||||
<form id="form-cla-entities" class="form-cla js-parsley" action="//formspree.io/{{ site.email.contact }}" method="POST" accept-charset="UTF-8">
|
||||
|
||||
<p class="form-group">
|
||||
<input class="form-control" type="text" id="org" name="org" required>
|
||||
<label class="form-label" for="org">Name of organization, foundation, company or other entity</label>
|
||||
</p>
|
||||
<p class="form-group">
|
||||
<input class="form-control" type="text" id="name" name="name" required>
|
||||
<label class="form-label" for="name">Contact Person</label>
|
||||
</p>
|
||||
<p class="form-group">
|
||||
<input class="form-control" type="email" id="email" name="_replyto" required>
|
||||
<label class="form-label" for="email">Contact Email Address</label>
|
||||
</p>
|
||||
<p class="form-group">
|
||||
<input class="form-control" type="tel" id="phone" name="phone">
|
||||
<label class="form-label" for="phone">Contact Phone Number</label>
|
||||
</p>
|
||||
<p class="text-dimmed">
|
||||
Agreed and accepted: By clicking and accepting this Agreement, I represent and warrant that I have authority to bind the entity named above (if applicable) to the terms and conditions of this Agreement.
|
||||
</p>
|
||||
<div class="checkbox">
|
||||
<label class="text-dimmed">
|
||||
<input type="checkbox" value="agreement" required>
|
||||
I have read and agree to the terms of this Agreement
|
||||
</label>
|
||||
</div>
|
||||
<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>
|
||||
11
_src/cla.md
Normal file
11
_src/cla.md
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
layout: page
|
||||
|
||||
title: Contributor License Agreement
|
||||
---
|
||||
|
||||
Before we can accept any contributions from you or the organization you represent, you or your organization must agree to license the contributions to others under some non-exclusive open licenses (as listed in the contributor license agreement ["Agreement"]).
|
||||
|
||||
You will retain full ownership of your work, including the ability to license it to others.
|
||||
|
||||
{% include form-cla.html %}
|
||||
Loading…
Reference in New Issue
Block a user