mirror of
https://github.com/bigchaindb/site.git
synced 2024-11-01 07:45:41 +01:00
Merge pull request #63 from ascribe/feature/subscribe
More subscriptions
This commit is contained in:
commit
1be6282d29
@ -17,6 +17,7 @@ github:
|
||||
repo: bigchaindb
|
||||
medium: the-bigchaindb-blog
|
||||
googlegroup: bigchaindb
|
||||
gitter: bigchaindb/bigchaindb
|
||||
disqus: bigchain
|
||||
|
||||
address:
|
||||
|
||||
19
_src/_assets/images/gitter.svg
Normal file
19
_src/_assets/images/gitter.svg
Normal file
@ -0,0 +1,19 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: none;
|
||||
stroke: #ed1a55;
|
||||
stroke-linecap: square;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<title>gitter</title>
|
||||
<g id="gitter">
|
||||
<path class="cls-1" d="M8,4V19.5"/>
|
||||
<path class="cls-1" d="M12,4V19.5"/>
|
||||
<path class="cls-1" d="M16,4v7"/>
|
||||
<path class="cls-1" d="M4,1V11"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 457 B |
@ -7,6 +7,7 @@
|
||||
//=include bigchain/dnt.js
|
||||
|
||||
//=include bigchain/form-contact.js
|
||||
//=include bigchain/newsletter.js
|
||||
|
||||
|
||||
jQuery(function($) {
|
||||
@ -16,6 +17,7 @@ jQuery(function($) {
|
||||
//
|
||||
Forms.init();
|
||||
FormContact.init();
|
||||
Newsletter.init();
|
||||
|
||||
if (!_dntEnabled()) {
|
||||
GoogleAnalytics.init();
|
||||
|
||||
48
_src/_assets/javascripts/bigchain/newsletter.js
Normal file
48
_src/_assets/javascripts/bigchain/newsletter.js
Normal file
@ -0,0 +1,48 @@
|
||||
|
||||
//=include ../vendor/jquery.ajaxchimp.js
|
||||
|
||||
var Newsletter = (function(w, d, $) {
|
||||
|
||||
'use strict';
|
||||
|
||||
var app, _private, _config;
|
||||
|
||||
_config = {
|
||||
newsletter: $('#newsletter')
|
||||
},
|
||||
|
||||
_private = {
|
||||
ajaxChimp: function() {
|
||||
_config.newsletter.ajaxChimp({
|
||||
callback: formCallback
|
||||
});
|
||||
|
||||
function formCallback (resp) {
|
||||
if (resp.result === 'success') {
|
||||
|
||||
_config.newsletter.find('.input-group').addClass('hide');
|
||||
|
||||
// send GA event
|
||||
ga('send', 'event', 'newsletter', 'subscribe', 'success', true);
|
||||
}
|
||||
if (resp.result === 'error') {
|
||||
_config.newsletter.find('.btn')
|
||||
.removeClass('disabled')
|
||||
.text('Subscribe');
|
||||
|
||||
// send GA event
|
||||
ga('send', 'event', 'newsletter', 'subscribe', 'error', true);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
app = {
|
||||
init: function() {
|
||||
_private.ajaxChimp();
|
||||
}
|
||||
};
|
||||
|
||||
return app;
|
||||
|
||||
})(window, document, jQuery);
|
||||
158
_src/_assets/javascripts/vendor/jquery.ajaxchimp.js
vendored
Normal file
158
_src/_assets/javascripts/vendor/jquery.ajaxchimp.js
vendored
Normal file
@ -0,0 +1,158 @@
|
||||
/*!
|
||||
Mailchimp Ajax Submit
|
||||
jQuery Plugin
|
||||
Author: Siddharth Doshi
|
||||
URL: https://github.com/scdoshi/jquery-ajaxchimp
|
||||
|
||||
---
|
||||
Modified by: Matthias Kretschmann
|
||||
- changes to work with our form control feedback styles
|
||||
- changes to work with our parsley form validation
|
||||
---
|
||||
|
||||
Use:
|
||||
===
|
||||
$('#form_id').ajaxchimp(options);
|
||||
|
||||
- Form should have one <input> element with attribute 'type=email'
|
||||
- Form should have one label element with attribute 'for=email_input_id' (used to display error/success message)
|
||||
- All options are optional.
|
||||
|
||||
Options:
|
||||
=======
|
||||
options = {
|
||||
language: 'en',
|
||||
callback: callbackFunction,
|
||||
url: 'http://blahblah.us1.list-manage.com/subscribe/post?u=5afsdhfuhdsiufdba6f8802&id=4djhfdsh99f'
|
||||
}
|
||||
|
||||
Notes:
|
||||
=====
|
||||
To get the mailchimp JSONP url (undocumented), change 'post?' to 'post-json?' and add '&c=?' to the end.
|
||||
For e.g. 'http://blahblah.us1.list-manage.com/subscribe/post-json?u=5afsdhfuhdsiufdba6f8802&id=4djhfdsh99f&c=?',
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
'use strict';
|
||||
|
||||
$.ajaxChimp = {
|
||||
responses: {
|
||||
'We have sent you a confirmation email' : 0,
|
||||
'Please enter a value' : 1,
|
||||
'An email address must contain a single @' : 2,
|
||||
'The domain portion of the email address is invalid (the portion after the @: )' : 3,
|
||||
'The username portion of the email address is invalid (the portion before the @: )' : 4,
|
||||
'This email address looks fake or invalid. Please enter a real email address' : 5
|
||||
},
|
||||
translations: {
|
||||
'en': null
|
||||
},
|
||||
init: function (selector, options) {
|
||||
$(selector).ajaxChimp(options);
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.ajaxChimp = function (options) {
|
||||
$(this).each(function(i, elem) {
|
||||
var form = $(elem);
|
||||
var email = form.find('input[type=email]');
|
||||
var feedback = form.find('.form-control-feedback');
|
||||
var formgroup = form.find('.input-group');
|
||||
|
||||
var settings = $.extend({
|
||||
'url': form.attr('action'),
|
||||
'language': 'en'
|
||||
}, options);
|
||||
|
||||
var url = settings.url.replace('/post?', '/post-json?').concat('&c=?');
|
||||
|
||||
form.attr('novalidate', 'true');
|
||||
email.attr('name', 'EMAIL');
|
||||
|
||||
form.submit(function () {
|
||||
var msg;
|
||||
function successCallback(resp) {
|
||||
if (resp.result === 'success') {
|
||||
msg = 'We have sent you a confirmation email';
|
||||
formgroup.removeClass('has-error').addClass('has-success');
|
||||
} else {
|
||||
formgroup.removeClass('has-success').addClass('has-error');
|
||||
email.removeClass('parsley-success');
|
||||
var index = -1;
|
||||
try {
|
||||
var parts = resp.msg.split(' - ', 2);
|
||||
if (parts[1] === undefined) {
|
||||
msg = resp.msg;
|
||||
} else {
|
||||
var i = parseInt(parts[0], 10);
|
||||
if (i.toString() === parts[0]) {
|
||||
index = parts[0];
|
||||
msg = parts[1];
|
||||
} else {
|
||||
index = -1;
|
||||
msg = resp.msg;
|
||||
}
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
index = -1;
|
||||
msg = resp.msg;
|
||||
}
|
||||
}
|
||||
|
||||
// Translate and display message
|
||||
if (
|
||||
settings.language !== 'en'
|
||||
&& $.ajaxChimp.responses[msg] !== undefined
|
||||
&& $.ajaxChimp.translations
|
||||
&& $.ajaxChimp.translations[settings.language]
|
||||
&& $.ajaxChimp.translations[settings.language][$.ajaxChimp.responses[msg]]
|
||||
) {
|
||||
msg = $.ajaxChimp.translations[settings.language][$.ajaxChimp.responses[msg]];
|
||||
}
|
||||
feedback.html(msg);
|
||||
|
||||
feedback.show(2000);
|
||||
if (settings.callback) {
|
||||
settings.callback(resp);
|
||||
}
|
||||
}
|
||||
|
||||
var data = {};
|
||||
var dataArray = form.serializeArray();
|
||||
$.each(dataArray, function (index, item) {
|
||||
data[item.name] = item.value;
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
url: url,
|
||||
data: data,
|
||||
success: successCallback,
|
||||
dataType: 'jsonp',
|
||||
error: function (resp, text) {
|
||||
console.log('mailchimp ajax submit error: ' + text);
|
||||
}
|
||||
});
|
||||
|
||||
// Translate and display submit message
|
||||
var submitMsg = 'Sending...';
|
||||
if(
|
||||
settings.language !== 'en'
|
||||
&& $.ajaxChimp.translations
|
||||
&& $.ajaxChimp.translations[settings.language]
|
||||
&& $.ajaxChimp.translations[settings.language]['submit']
|
||||
) {
|
||||
submitMsg = $.ajaxChimp.translations[settings.language]['submit'];
|
||||
}
|
||||
form.find('.btn')
|
||||
.addClass('disabled')
|
||||
.text(submitMsg);
|
||||
|
||||
//feedback.html(submitMsg).show(2000);
|
||||
|
||||
return false;
|
||||
});
|
||||
});
|
||||
return this;
|
||||
};
|
||||
})(jQuery);
|
||||
@ -46,6 +46,10 @@
|
||||
fill: lighten($brand-primary, 10%);
|
||||
filter: drop-shadow(0 1px 4px rgba($brand-main-blue-dark, .4));
|
||||
transform: translateY(-1px);
|
||||
|
||||
&.icon--gitter {
|
||||
stroke: lighten($brand-primary, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -63,6 +67,10 @@
|
||||
fill: $brand-primary;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
|
||||
&.icon--gitter {
|
||||
stroke: $brand-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,6 +19,7 @@
|
||||
@import 'bigchain/_tables';
|
||||
@import 'bigchain/_buttons';
|
||||
@import 'bigchain/_forms';
|
||||
@import 'bigchain/_input-group';
|
||||
@import 'bigchain/_logo';
|
||||
@import 'bigchain/_icons';
|
||||
@import 'bigchain/_grid';
|
||||
@ -41,6 +42,7 @@
|
||||
@import 'bigchain/_content-page';
|
||||
@import 'bigchain/_comments';
|
||||
@import 'bigchain/_toc';
|
||||
@import 'bigchain/_newsletter';
|
||||
|
||||
// specific page styles
|
||||
@import '_page-front';
|
||||
|
||||
@ -18,6 +18,10 @@
|
||||
stroke: none;
|
||||
fill: $text-color;
|
||||
margin-bottom: -2px;
|
||||
|
||||
.icon--gitter {
|
||||
stroke: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.icon--sm {
|
||||
|
||||
60
_src/_assets/styles/bigchain/_input-group.scss
Normal file
60
_src/_assets/styles/bigchain/_input-group.scss
Normal file
@ -0,0 +1,60 @@
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
.input-group {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.form-control {
|
||||
flex: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-btn,
|
||||
.input-group .form-control {
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Button input groups
|
||||
//
|
||||
.input-group-btn {
|
||||
white-space: nowrap;
|
||||
vertical-align: middle; // Match the inputs
|
||||
position: relative;
|
||||
// Jankily prevent input button groups from wrapping with `white-space` and
|
||||
// `font-size` in combination with `inline-block` on buttons.
|
||||
font-size: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
> .btn {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Reset rounded corners
|
||||
//
|
||||
.input-group .form-control:not(:last-child),
|
||||
.input-group-btn:not(:last-child) > .btn,
|
||||
.input-group-btn:not(:last-child) > .btn-group > .btn,
|
||||
.input-group-btn:not(:last-child) > .dropdown-toggle,
|
||||
.input-group-btn:not(:first-child) > .btn:not(:last-child):not(.dropdown-toggle),
|
||||
.input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.input-group .form-control:not(:first-child),
|
||||
.input-group-btn:not(:first-child) > .btn,
|
||||
.input-group-btn:not(:first-child) > .btn-group > .btn,
|
||||
.input-group-btn:not(:first-child) > .dropdown-toggle,
|
||||
.input-group-btn:not(:last-child) > .btn:not(:first-child),
|
||||
.input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
52
_src/_assets/styles/bigchain/_newsletter.scss
Normal file
52
_src/_assets/styles/bigchain/_newsletter.scss
Normal file
@ -0,0 +1,52 @@
|
||||
|
||||
.section-newsletter {
|
||||
background: $brand-primary;
|
||||
|
||||
// .sections redefinitions
|
||||
padding-top: $spacer;
|
||||
padding-bottom: $spacer;
|
||||
|
||||
@media ($screen-sm) {
|
||||
padding-top: ($spacer * 3);
|
||||
padding-bottom: ($spacer * 3);
|
||||
}
|
||||
}
|
||||
|
||||
.newsletter {
|
||||
p,
|
||||
.form-group { margin: 0; }
|
||||
|
||||
.grid { margin-bottom: 0; }
|
||||
|
||||
.form-control {
|
||||
border-color: $gray-darker;
|
||||
|
||||
&:focus {
|
||||
border-color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: $brand-main-blue;
|
||||
}
|
||||
|
||||
.form-label,
|
||||
.form-control {
|
||||
color: $gray-dark !important;
|
||||
}
|
||||
|
||||
.form-control-feedback {
|
||||
@extend .bold;
|
||||
margin-top: ($spacer / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.newsletter__title {
|
||||
@extend .h4;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.newsletter__title,
|
||||
.newsletter__text {
|
||||
color: $gray-darker;
|
||||
}
|
||||
@ -22,6 +22,8 @@ community:
|
||||
url: https://github.com/bigchaindb
|
||||
- title: Twitter
|
||||
url: https://twitter.com/BigchainDB
|
||||
- title: Gitter
|
||||
url: https://gitter.im/bigchaindb/bigchaindb
|
||||
- title: Google Group
|
||||
url: https://groups.google.com/forum/#!forum/bigchaindb
|
||||
|
||||
|
||||
22
_src/_includes/form-newsletter.html
Normal file
22
_src/_includes/form-newsletter.html
Normal file
@ -0,0 +1,22 @@
|
||||
<form id="newsletter"
|
||||
class="form-newsletter js-parsley"
|
||||
action="//ascribe.us9.list-manage.com/subscribe/post?u=56f2d3da26a7d407177d3fba3&id=0a99a9481e"
|
||||
method="post">
|
||||
|
||||
<div class="form-group has-feedback">
|
||||
<div class="input-group">
|
||||
|
||||
<input class="form-control" type="email" id="email" name="EMAIL" required>
|
||||
<label class="form-label" for="email">Your Email</label>
|
||||
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-secondary" type="submit" name="button">
|
||||
Subscribe
|
||||
</button>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="form-control-feedback"></div>
|
||||
</div>
|
||||
</form>
|
||||
17
_src/_includes/section-newsletter.html
Normal file
17
_src/_includes/section-newsletter.html
Normal file
@ -0,0 +1,17 @@
|
||||
|
||||
<section class="section section-newsletter newsletter">
|
||||
<div class="row row--wide">
|
||||
|
||||
<div class="grid grid--full grid-small--half grid--gutters grid--center">
|
||||
<div class="grid__col">
|
||||
<h1 class="newsletter__title">Get updates delivered to your inbox</h1>
|
||||
<p class="newsletter__text">No more than 1 email per month. We're busy too.</p>
|
||||
</div>
|
||||
<div class="grid__col">
|
||||
|
||||
{% include form-newsletter.html %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -42,15 +42,7 @@ layout: base
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section-contact">
|
||||
<div class="row row--narrow">
|
||||
<header class="section-header">
|
||||
<h1 class="section-title">Get In Touch</h1>
|
||||
</header>
|
||||
|
||||
{% include form-contact.html %}
|
||||
</div>
|
||||
</section>
|
||||
{% include section-newsletter.html %}
|
||||
{% endif %}
|
||||
|
||||
{% if page.comments %}
|
||||
|
||||
@ -18,8 +18,14 @@ js: page-community.min.js
|
||||
|
||||
<div class="grid grid--full grid-small--fit grid--gutters">
|
||||
<div class="grid__col">
|
||||
<h1>Google Group</h1>
|
||||
<p>Participate in our Google Group</p>
|
||||
<h1>Join the discussion</h1>
|
||||
<p>Participate via Gitter or Google Group</p>
|
||||
<a class="social-link" href="https://gitter.im/{{ site.gitter }}">
|
||||
<svg class="icon icon--social icon--gitter" aria-labelledby="title">
|
||||
<title>Gitter</title>
|
||||
<use xlink:href="/assets/img/sprite.svg#gitter"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="social-link" href="https://groups.google.com/forum/#!forum/{{ site.googlegroup }}">
|
||||
<svg class="icon icon--social icon--github" aria-labelledby="title">
|
||||
<title>Google Group</title>
|
||||
@ -28,7 +34,7 @@ js: page-community.min.js
|
||||
</a>
|
||||
</div>
|
||||
<div class="grid__col">
|
||||
<h1>Social</h1>
|
||||
<h1>Follow</h1>
|
||||
<p>Follow us for the latest updates</p>
|
||||
<p>
|
||||
<a class="social-link" href="https://github.com/{{ site.github.org }}">
|
||||
@ -58,4 +64,7 @@ js: page-community.min.js
|
||||
</div>
|
||||
|
||||
{% include svg/wrigley-with-stage.svg %}
|
||||
|
||||
</section>
|
||||
|
||||
{% include section-newsletter.html %}
|
||||
|
||||
@ -60,6 +60,8 @@ js: page-front.min.js
|
||||
|
||||
</section>
|
||||
|
||||
{% include section-newsletter.html %}
|
||||
|
||||
<section class="section section-quickstart background--darker">
|
||||
<div class="row row--wide">
|
||||
<header class="section-header">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user