Skip to content

Instantly share code, notes, and snippets.

@code-nation

code-nation/_staged-donations.scss

Last active April 22, 2018 21:35
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save code-nation/de901aadeab31faf6b5776eda7bfed97 to your computer and use it in GitHub Desktop.
Save code-nation/de901aadeab31faf6b5776eda7bfed97 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap with Staged Donations
Raw
_staged-donations.scss
.page-pages-show-donation-wide {
font-family: "Proxima-nova", sans-serif;
background: #222;
// BUTTONS
.btn-gray {
background: #222;
text-decoration: none;
border-color: transparent;
color: #07daba;
font-size: 18px;
letter-spacing: 1px;
font-weight: 200;
&:hover{
background: darken(#222, 10%);
border-color: transparent;
color:#07daba;
}
}
#donation_amount_other {
width: 100%;
}
.content{
margin: 30px 0;
}
.bkg_donate{
background: #07daba;
padding: 25px;
}
.bkg-form{
background: #fff;
padding: 40px;
color: #0E0E0E;
}
.bkg-intro{
background: #07daba;
color: #085a4e;
padding: 40px;
}
input{
width: 100%;
}
.headline{
margin-bottom: 20px;
margin-top: 0;
letter-spacing: 2px;
text-transform: uppercase;
border-bottom: solid 1px #085a4e;
padding-bottom: 5px;
h1{
margin: 0;
}
}
.donation_form .form-wrap {
margin-bottom: 1.25em;
a{
color: #07daba;
font-weight: 600;
}
}
.progress {
height: 30px;
background-color: rgba(71, 178, 169, 0.33);
border: solid 1px rgba(71, 178, 169, 0.53);
.progress-bar {
background-color: #3ed6aa;
line-height: 30px;
font-weight: 600;
}
}
.lead {
font-size: 19px;
letter-spacing: 1px;
margin:10px 0;
}
.bar-goal{
font-size: 21px;
letter-spacing: 1px;
}
.form-progress-indicator {
width: 130%;
left: -15%;
position: relative;
}
.progress-indicator-stages {
list-style-type: none;
padding: 0 0 15px 0;
margin: 0 auto;
width: auto;
text-align: center;
li {
display: inline-block;
position: relative;
margin-right: 32px;
white-space: nowrap;
width: 51px;
&:after {
content: " ";
width: 42px;
height: 0;
border-bottom: 1px solid #333;
position: absolute;
top: 18px;
left: 39px;
}
&:last-child {
margin-right: 0;
&:after {
display: none;
}
}
.stage-label {
font-size: 12px;
font-weight: 600;
position: relative;
text-transform: uppercase;
}
&.stage-1 .stage-label {
left: -1px;
}
&.stage-2 .stage-label {
left: -8px;
}
&.stage-3 .stage-label {
left: -3px;
}
.stage-count {
position: relative;
display: block;
color: #333;
width: 35px;
height: 35px;
text-align: center;
border-radius: 99px;
font-weight: 600;
line-height: 35px;
font-size: 18px;
}
.stage-count-inner {
width: 35px;
height: 35px;
line-height: 35px;
display: block;
position: relative;
color: #07daba;
border: solid 1px #07daba;
position: relative;
border-radius: 99px;
}
&.active .stage-count-inner {
background: #07daba;
color:#fff;
}
&.seen .stage-count-inner {
background: #07daba;
color: #fff;
cursor: pointer;
}
&.completed .stage-count-inner {
text-indent: -9999px;
background: #07daba;
cursor:pointer;
&:before {
color: #fff;
position: absolute;
width: 39px;
line-height: 39px;
z-index: 20;
opacity: 1;
text-align: center;
top: 0;
left: -3px;
font-size: 17px;
cursor: pointer;
text-indent: 0;
}
}
&.completed .stage-count {
cursor: pointer;
}
}
}
.progress-stages {
padding: 0;
min-height: 402px;
border-radius: 2px;
.progress-stage {
display: none;
&.active {
display: block;
}
}
}
.progress-stage-button-prev {
display: block;
margin-top: .5em;
&:before {
content:"\00ab\0000a0";
}
}
.radio-inline {
input[type="radio"] {
padding-left: 0;
display: block;
position: absolute;
left: -9999px;
}
label.radio {
border-radius: 10px;
color: #07daba;
background: rgba(255, 255, 255, 0.66);
display: inline-block;
width: 80px;
padding: 10px;
font-weight: bold;
font-size: 18px;
border: solid 1px #07daba;
text-align: center;
margin: 5px 5px 10px 7px;
}
input[type="radio"]:checked+label {
background-color: #07daba;
color: #fff;
}
}
}
.lt-ie9 .progress-indicator-stages li.stage-3:after {
display:none;
}
#donation_billing_address_state {
width: 100%;
}
Raw
jquery.ui.effect-slide.min.js
/*! jQuery UI - v1.10.4 - 2014-01-17
* http://jqueryui.com
* Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */
(function(t){t.effects.effect.slide=function(e,i){var s,n=t(this),a=["position","top","bottom","left","right","width","height"],o=t.effects.setMode(n,e.mode||"show"),r="show"===o,h=e.direction||"left",l="up"===h||"down"===h?"top":"left",c="up"===h||"left"===h,u={};t.effects.save(n,a),n.show(),s=e.distance||n["top"===l?"outerHeight":"outerWidth"](!0),t.effects.createWrapper(n).css({overflow:"hidden"}),r&&n.css(l,c?isNaN(s)?"-"+s:-s:s),u[l]=(r?c?"+=":"-=":c?"-=":"+=")+s,n.animate(u,{queue:!1,duration:e.duration,easing:e.easing,complete:function(){"hide"===o&&n.hide(),t.effects.restore(n,a),t.effects.removeWrapper(n),i()}})}})(jQuery);
Raw
jquery.ui.effect.min.js
/*! jQuery UI - v1.10.4 - 2014-01-17
* http://jqueryui.com
* Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */
(function(t,e){var i="ui-effects-";t.effects={effect:{}},function(t,e){function i(t,e,i){var s=u[e.type]||{};return null==t?i||!e.def?null:e.def:(t=s.floor?~~t:parseFloat(t),isNaN(t)?e.def:s.mod?(t+s.mod)%s.mod:0>t?0:t>s.max?s.max:t)}function s(i){var s=l(),n=s._rgba=[];return i=i.toLowerCase(),f(h,function(t,a){var o,r=a.re.exec(i),h=r&&a.parse(r),l=a.space||"rgba";return h?(o=s[l](h),s[c[l].cache]=o[c[l].cache],n=s._rgba=o._rgba,!1):e}),n.length?("0,0,0,0"===n.join()&&t.extend(n,a.transparent),s):a[i]}function n(t,e,i){return i=(i+1)%1,1>6*i?t+6*(e-t)*i:1>2*i?e:2>3*i?t+6*(e-t)*(2/3-i):t}var a,o="backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor color columnRuleColor outlineColor textDecorationColor textEmphasisColor",r=/^([\-+])=\s*(\d+\.?\d*)/,h=[{re:/rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,parse:function(t){return[t[1],t[2],t[3],t[4]]}},{re:/rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,parse:function(t){return[2.55*t[1],2.55*t[2],2.55*t[3],t[4]]}},{re:/#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})/,parse:function(t){return[parseInt(t[1],16),parseInt(t[2],16),parseInt(t[3],16)]}},{re:/#([a-f0-9])([a-f0-9])([a-f0-9])/,parse:function(t){return[parseInt(t[1]+t[1],16),parseInt(t[2]+t[2],16),parseInt(t[3]+t[3],16)]}},{re:/hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d?(?:\.\d+)?)\s*)?\)/,space:"hsla",parse:function(t){return[t[1],t[2]/100,t[3]/100,t[4]]}}],l=t.Color=function(e,i,s,n){return new t.Color.fn.parse(e,i,s,n)},c={rgba:{props:{red:{idx:0,type:"byte"},green:{idx:1,type:"byte"},blue:{idx:2,type:"byte"}}},hsla:{props:{hue:{idx:0,type:"degrees"},saturation:{idx:1,type:"percent"},lightness:{idx:2,type:"percent"}}}},u={"byte":{floor:!0,max:255},percent:{max:1},degrees:{mod:360,floor:!0}},d=l.support={},p=t("<p>")[0],f=t.each;p.style.cssText="background-color:rgba(1,1,1,.5)",d.rgba=p.style.backgroundColor.indexOf("rgba")>-1,f(c,function(t,e){e.cache="_"+t,e.props.alpha={idx:3,type:"percent",def:1}}),l.fn=t.extend(l.prototype,{parse:function(n,o,r,h){if(n===e)return this._rgba=[null,null,null,null],this;(n.jquery||n.nodeType)&&(n=t(n).css(o),o=e);var u=this,d=t.type(n),p=this._rgba=[];return o!==e&&(n=[n,o,r,h],d="array"),"string"===d?this.parse(s(n)||a._default):"array"===d?(f(c.rgba.props,function(t,e){p[e.idx]=i(n[e.idx],e)}),this):"object"===d?(n instanceof l?f(c,function(t,e){n[e.cache]&&(u[e.cache]=n[e.cache].slice())}):f(c,function(e,s){var a=s.cache;f(s.props,function(t,e){if(!u[a]&&s.to){if("alpha"===t||null==n[t])return;u[a]=s.to(u._rgba)}u[a][e.idx]=i(n[t],e,!0)}),u[a]&&0>t.inArray(null,u[a].slice(0,3))&&(u[a][3]=1,s.from&&(u._rgba=s.from(u[a])))}),this):e},is:function(t){var i=l(t),s=!0,n=this;return f(c,function(t,a){var o,r=i[a.cache];return r&&(o=n[a.cache]||a.to&&a.to(n._rgba)||[],f(a.props,function(t,i){return null!=r[i.idx]?s=r[i.idx]===o[i.idx]:e})),s}),s},_space:function(){var t=[],e=this;return f(c,function(i,s){e[s.cache]&&t.push(i)}),t.pop()},transition:function(t,e){var s=l(t),n=s._space(),a=c[n],o=0===this.alpha()?l("transparent"):this,r=o[a.cache]||a.to(o._rgba),h=r.slice();return s=s[a.cache],f(a.props,function(t,n){var a=n.idx,o=r[a],l=s[a],c=u[n.type]||{};null!==l&&(null===o?h[a]=l:(c.mod&&(l-o>c.mod/2?o+=c.mod:o-l>c.mod/2&&(o-=c.mod)),h[a]=i((l-o)*e+o,n)))}),this[n](h)},blend:function(e){if(1===this._rgba[3])return this;var i=this._rgba.slice(),s=i.pop(),n=l(e)._rgba;return l(t.map(i,function(t,e){return(1-s)*n[e]+s*t}))},toRgbaString:function(){var e="rgba(",i=t.map(this._rgba,function(t,e){return null==t?e>2?1:0:t});return 1===i[3]&&(i.pop(),e="rgb("),e+i.join()+")"},toHslaString:function(){var e="hsla(",i=t.map(this.hsla(),function(t,e){return null==t&&(t=e>2?1:0),e&&3>e&&(t=Math.round(100*t)+"%"),t});return 1===i[3]&&(i.pop(),e="hsl("),e+i.join()+")"},toHexString:function(e){var i=this._rgba.slice(),s=i.pop();return e&&i.push(~~(255*s)),"#"+t.map(i,function(t){return t=(t||0).toString(16),1===t.length?"0"+t:t}).join("")},toString:function(){return 0===this._rgba[3]?"transparent":this.toRgbaString()}}),l.fn.parse.prototype=l.fn,c.hsla.to=function(t){if(null==t[0]||null==t[1]||null==t[2])return[null,null,null,t[3]];var e,i,s=t[0]/255,n=t[1]/255,a=t[2]/255,o=t[3],r=Math.max(s,n,a),h=Math.min(s,n,a),l=r-h,c=r+h,u=.5*c;return e=h===r?0:s===r?60*(n-a)/l+360:n===r?60*(a-s)/l+120:60*(s-n)/l+240,i=0===l?0:.5>=u?l/c:l/(2-c),[Math.round(e)%360,i,u,null==o?1:o]},c.hsla.from=function(t){if(null==t[0]||null==t[1]||null==t[2])return[null,null,null,t[3]];var e=t[0]/360,i=t[1],s=t[2],a=t[3],o=.5>=s?s*(1+i):s+i-s*i,r=2*s-o;return[Math.round(255*n(r,o,e+1/3)),Math.round(255*n(r,o,e)),Math.round(255*n(r,o,e-1/3)),a]},f(c,function(s,n){var a=n.props,o=n.cache,h=n.to,c=n.from;l.fn[s]=function(s){if(h&&!this[o]&&(this[o]=h(this._rgba)),s===e)return this[o].slice();var n,r=t.type(s),u="array"===r||"object"===r?s:arguments,d=this[o].slice();return f(a,function(t,e){var s=u["object"===r?t:e.idx];null==s&&(s=d[e.idx]),d[e.idx]=i(s,e)}),c?(n=l(c(d)),n[o]=d,n):l(d)},f(a,function(e,i){l.fn[e]||(l.fn[e]=function(n){var a,o=t.type(n),h="alpha"===e?this._hsla?"hsla":"rgba":s,l=this[h](),c=l[i.idx];return"undefined"===o?c:("function"===o&&(n=n.call(this,c),o=t.type(n)),null==n&&i.empty?this:("string"===o&&(a=r.exec(n),a&&(n=c+parseFloat(a[2])*("+"===a[1]?1:-1))),l[i.idx]=n,this[h](l)))})})}),l.hook=function(e){var i=e.split(" ");f(i,function(e,i){t.cssHooks[i]={set:function(e,n){var a,o,r="";if("transparent"!==n&&("string"!==t.type(n)||(a=s(n)))){if(n=l(a||n),!d.rgba&&1!==n._rgba[3]){for(o="backgroundColor"===i?e.parentNode:e;(""===r||"transparent"===r)&&o&&o.style;)try{r=t.css(o,"backgroundColor"),o=o.parentNode}catch(h){}n=n.blend(r&&"transparent"!==r?r:"_default")}n=n.toRgbaString()}try{e.style[i]=n}catch(h){}}},t.fx.step[i]=function(e){e.colorInit||(e.start=l(e.elem,i),e.end=l(e.end),e.colorInit=!0),t.cssHooks[i].set(e.elem,e.start.transition(e.end,e.pos))}})},l.hook(o),t.cssHooks.borderColor={expand:function(t){var e={};return f(["Top","Right","Bottom","Left"],function(i,s){e["border"+s+"Color"]=t}),e}},a=t.Color.names={aqua:"#00ffff",black:"#000000",blue:"#0000ff",fuchsia:"#ff00ff",gray:"#808080",green:"#008000",lime:"#00ff00",maroon:"#800000",navy:"#000080",olive:"#808000",purple:"#800080",red:"#ff0000",silver:"#c0c0c0",teal:"#008080",white:"#ffffff",yellow:"#ffff00",transparent:[null,null,null,0],_default:"#ffffff"}}(jQuery),function(){function i(e){var i,s,n=e.ownerDocument.defaultView?e.ownerDocument.defaultView.getComputedStyle(e,null):e.currentStyle,a={};if(n&&n.length&&n[0]&&n[n[0]])for(s=n.length;s--;)i=n[s],"string"==typeof n[i]&&(a[t.camelCase(i)]=n[i]);else for(i in n)"string"==typeof n[i]&&(a[i]=n[i]);return a}function s(e,i){var s,n,o={};for(s in i)n=i[s],e[s]!==n&&(a[s]||(t.fx.step[s]||!isNaN(parseFloat(n)))&&(o[s]=n));return o}var n=["add","remove","toggle"],a={border:1,borderBottom:1,borderColor:1,borderLeft:1,borderRight:1,borderTop:1,borderWidth:1,margin:1,padding:1};t.each(["borderLeftStyle","borderRightStyle","borderBottomStyle","borderTopStyle"],function(e,i){t.fx.step[i]=function(t){("none"!==t.end&&!t.setAttr||1===t.pos&&!t.setAttr)&&(jQuery.style(t.elem,i,t.end),t.setAttr=!0)}}),t.fn.addBack||(t.fn.addBack=function(t){return this.add(null==t?this.prevObject:this.prevObject.filter(t))}),t.effects.animateClass=function(e,a,o,r){var h=t.speed(a,o,r);return this.queue(function(){var a,o=t(this),r=o.attr("class")||"",l=h.children?o.find("*").addBack():o;l=l.map(function(){var e=t(this);return{el:e,start:i(this)}}),a=function(){t.each(n,function(t,i){e[i]&&o[i+"Class"](e[i])})},a(),l=l.map(function(){return this.end=i(this.el[0]),this.diff=s(this.start,this.end),this}),o.attr("class",r),l=l.map(function(){var e=this,i=t.Deferred(),s=t.extend({},h,{queue:!1,complete:function(){i.resolve(e)}});return this.el.animate(this.diff,s),i.promise()}),t.when.apply(t,l.get()).done(function(){a(),t.each(arguments,function(){var e=this.el;t.each(this.diff,function(t){e.css(t,"")})}),h.complete.call(o[0])})})},t.fn.extend({addClass:function(e){return function(i,s,n,a){return s?t.effects.animateClass.call(this,{add:i},s,n,a):e.apply(this,arguments)}}(t.fn.addClass),removeClass:function(e){return function(i,s,n,a){return arguments.length>1?t.effects.animateClass.call(this,{remove:i},s,n,a):e.apply(this,arguments)}}(t.fn.removeClass),toggleClass:function(i){return function(s,n,a,o,r){return"boolean"==typeof n||n===e?a?t.effects.animateClass.call(this,n?{add:s}:{remove:s},a,o,r):i.apply(this,arguments):t.effects.animateClass.call(this,{toggle:s},n,a,o)}}(t.fn.toggleClass),switchClass:function(e,i,s,n,a){return t.effects.animateClass.call(this,{add:i,remove:e},s,n,a)}})}(),function(){function s(e,i,s,n){return t.isPlainObject(e)&&(i=e,e=e.effect),e={effect:e},null==i&&(i={}),t.isFunction(i)&&(n=i,s=null,i={}),("number"==typeof i||t.fx.speeds[i])&&(n=s,s=i,i={}),t.isFunction(s)&&(n=s,s=null),i&&t.extend(e,i),s=s||i.duration,e.duration=t.fx.off?0:"number"==typeof s?s:s in t.fx.speeds?t.fx.speeds[s]:t.fx.speeds._default,e.complete=n||i.complete,e}function n(e){return!e||"number"==typeof e||t.fx.speeds[e]?!0:"string"!=typeof e||t.effects.effect[e]?t.isFunction(e)?!0:"object"!=typeof e||e.effect?!1:!0:!0}t.extend(t.effects,{version:"1.10.4",save:function(t,e){for(var s=0;e.length>s;s++)null!==e[s]&&t.data(i+e[s],t[0].style[e[s]])},restore:function(t,s){var n,a;for(a=0;s.length>a;a++)null!==s[a]&&(n=t.data(i+s[a]),n===e&&(n=""),t.css(s[a],n))},setMode:function(t,e){return"toggle"===e&&(e=t.is(":hidden")?"show":"hide"),e},getBaseline:function(t,e){var i,s;switch(t[0]){case"top":i=0;break;case"middle":i=.5;break;case"bottom":i=1;break;default:i=t[0]/e.height}switch(t[1]){case"left":s=0;break;case"center":s=.5;break;case"right":s=1;break;default:s=t[1]/e.width}return{x:s,y:i}},createWrapper:function(e){if(e.parent().is(".ui-effects-wrapper"))return e.parent();var i={width:e.outerWidth(!0),height:e.outerHeight(!0),"float":e.css("float")},s=t("<div></div>").addClass("ui-effects-wrapper").css({fontSize:"100%",background:"transparent",border:"none",margin:0,padding:0}),n={width:e.width(),height:e.height()},a=document.activeElement;try{a.id}catch(o){a=document.body}return e.wrap(s),(e[0]===a||t.contains(e[0],a))&&t(a).focus(),s=e.parent(),"static"===e.css("position")?(s.css({position:"relative"}),e.css({position:"relative"})):(t.extend(i,{position:e.css("position"),zIndex:e.css("z-index")}),t.each(["top","left","bottom","right"],function(t,s){i[s]=e.css(s),isNaN(parseInt(i[s],10))&&(i[s]="auto")}),e.css({position:"relative",top:0,left:0,right:"auto",bottom:"auto"})),e.css(n),s.css(i).show()},removeWrapper:function(e){var i=document.activeElement;return e.parent().is(".ui-effects-wrapper")&&(e.parent().replaceWith(e),(e[0]===i||t.contains(e[0],i))&&t(i).focus()),e},setTransition:function(e,i,s,n){return n=n||{},t.each(i,function(t,i){var a=e.cssUnit(i);a[0]>0&&(n[i]=a[0]*s+a[1])}),n}}),t.fn.extend({effect:function(){function e(e){function s(){t.isFunction(a)&&a.call(n[0]),t.isFunction(e)&&e()}var n=t(this),a=i.complete,r=i.mode;(n.is(":hidden")?"hide"===r:"show"===r)?(n[r](),s()):o.call(n[0],i,s)}var i=s.apply(this,arguments),n=i.mode,a=i.queue,o=t.effects.effect[i.effect];return t.fx.off||!o?n?this[n](i.duration,i.complete):this.each(function(){i.complete&&i.complete.call(this)}):a===!1?this.each(e):this.queue(a||"fx",e)},show:function(t){return function(e){if(n(e))return t.apply(this,arguments);var i=s.apply(this,arguments);return i.mode="show",this.effect.call(this,i)}}(t.fn.show),hide:function(t){return function(e){if(n(e))return t.apply(this,arguments);var i=s.apply(this,arguments);return i.mode="hide",this.effect.call(this,i)}}(t.fn.hide),toggle:function(t){return function(e){if(n(e)||"boolean"==typeof e)return t.apply(this,arguments);var i=s.apply(this,arguments);return i.mode="toggle",this.effect.call(this,i)}}(t.fn.toggle),cssUnit:function(e){var i=this.css(e),s=[];return t.each(["em","px","%","pt"],function(t,e){i.indexOf(e)>0&&(s=[parseFloat(i),e])}),s}})}(),function(){var e={};t.each(["Quad","Cubic","Quart","Quint","Expo"],function(t,i){e[i]=function(e){return Math.pow(e,t+2)}}),t.extend(e,{Sine:function(t){return 1-Math.cos(t*Math.PI/2)},Circ:function(t){return 1-Math.sqrt(1-t*t)},Elastic:function(t){return 0===t||1===t?t:-Math.pow(2,8*(t-1))*Math.sin((80*(t-1)-7.5)*Math.PI/15)},Back:function(t){return t*t*(3*t-2)},Bounce:function(t){for(var e,i=4;((e=Math.pow(2,--i))-1)/11>t;);return 1/Math.pow(4,3-i)-7.5625*Math.pow((3*e-2)/22-t,2)}}),t.each(e,function(e,i){t.easing["easeIn"+e]=i,t.easing["easeOut"+e]=function(t){return 1-i(1-t)},t.easing["easeInOut"+e]=function(t){return.5>t?i(2*t)/2:1-i(-2*t+2)/2}})}()})(jQuery);
Raw
pages_show_donation_wide.html
<div id="{{ page.slug }}" class="donation">
<div class="row content">
<div class="col-md-6 padbottommore">
<div class="bkg-intro">
{% if page.headline.size > 0 %}
<h1 class="headline">{{ page.headline }}</h1>
{% endif %}
{% if page.donation.content.size > 0 %}
<div id="intro" class="intro">
{{ page.donation.content }}
</div>
{% endif %}
</div>
</div>
<div class="col-md-6">
<div class="bkg-form">
<div class="donation-form">
{% if page.donation.has_amount_goal? %}
{% assign thermo_width = 100 %}
<div class="progress" style="width: {{ thermo_width }}%;">
<div class="bar progress-bar" role="progressbar" style="min-width: 2em; width: {{ page.donation.percent_of_amount_goal | times:100 }}%;">
{% if page.donations_count < 1 %}
<div class="bar-text">0%</div>
{% else %}
<div class="bar-text">{{ page.donations_amount_format }} raised</div>
{% endif %}
</div>
</div>
<div class="bar-goal">
<h4 class="center padbottom">GOAL: {{ page.donation.amount_goal_format }}</h4>
</div>
{% elsif page.donation.has_donor_goal? %}
<div class="bar-goal">
<p class="text-center">{{ page.donation.donor_goal }} donors</p>
</div>
<div class="progress" style="width: {{ thermo_width }}%;">
<div class="bar progress-bar" role="progressbar" style="min-width: 2em; width: {{ page.donation.percent_of_donor_goal | times:100 }}%;">
{% if page.donations_count < 2 %}
<div class="bar-text">0%</div>
{% else %}
<div class="bar-text">{{ page.donations_count }} donors</div>
{% endif %}
</div>
</div>
{% endif %}
{% form_for donation autocomplete:off %}
<div class="form-wrap">
<div class="form">
<div class="form-errors">{% error_messages_for donation %}</div>
{% if page.donation.has_merchant_account? == false %}
<div class="marginbottommore">
<span class="text-danger">
<strong>No bank account:</strong> This page will not work until you add a bank account
</span>
</div>
{% elsif page.donation.merchant_account.is_test_mode? %}
<div class="marginbottommore">
<span class="text-danger">
<strong>Testing mode:</strong> Transactions will not be processed. Use your regular credit card to test, you will not actually be charged.
</span>
</div>
{% endif %}
<div class="row">
<div class="col-md-12">
<div class="form-progress-indicator">
<ul class="progress-indicator-stages">
<li class="progress-indicator-stage stage-1 active"><span class="stage-count"><span class="stage-count-inner">1</span></span>
</li>
<li class="progress-indicator-stage stage-2"><span class="stage-count"><span class="stage-count-inner">2</span></span>
</li>
<li class="progress-indicator-stage stage-3"><span class="stage-count"><span class="stage-count-inner">3</span></span>
</li>
</ul>
</div>
</div>
</div>
<!-- Progress-stages -->
<div class="progress-stages">
<!-- Progress-stage-1 -->
<div class="progress-stage stage-1 active" data-stageID="1">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<p class="lead">1. Select your amount</p>
{% if request.current_order %}
{% for item in request.current_order.items %}
{% if item.num_time_periods and item.time_period_type %}
{{ item.quantity }} {{ item.name }} @ {{ item.amount }} - billed automatically every {{ item.num_time_periods }} {{item.time_period_type }}
{% else %}
{{ item.quantity }} {{ item.name }} @ {{ item.amount }}
{% endif %}
{% endfor %}
<a href="{{ page.donation.clear_order_url }}">Clear order</a>
{% elsif page.donation.donation_frequency == "monthly" %}
{% if page.donation.amount_in_cents != 0 %}
<h4 class="padbottomless">{{ page.donation.amount_formatted }}</h4>
<div class="row">
<div class="col-md-12 padbottomless">Your credit card will be billed automatically every month</div>
</div>
{% else %}
<div class="radio-inline">{{ page.donation.form_amount_options }}</div>
<div class="row">
<div class="col-md-12 padbottomless">Your credit card will be billed automatically every month</div>
</div>
{% endif %}
{% else %}
{% if page.donation.amount_in_cents != 0 %}
<h4 class="padbottomless">{{ page.donation.amount_formatted }}</h4>
{% else %}
<div class="radio-inline">{{ page.donation.form_amount_options }}</div>
{% endif %}
{% if page.donation.max_installments > 1 %}
<label for="num_installments" class="padbottomless">I want to pay this in {% collection_select "num_installments", page.donation.installment_collection, class:"select" %} installments</label>
{% endif %}
{% endif %}
</div>
</div>
</div>
<div class="padtop center">
<span class="progress-stage-button-next btn-gray btn">Continue</span>
</div>
</div>
<!-- .Progress-stage-1 -->
<!-- Progress-stage-2 -->
<div class="progress-stage stage-2" data-stageID="2">
<p class="lead">2. Your details</p>
<div class="row">
<div class="col-md-12">
<div class="form-group">
{% text_field "first_name", class:"text form-control", placeholder:"First name" %}
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
{% text_field "last_name", class:"text form-control", placeholder:"Last name" %}
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
{% collection_select "billing_address.country_code", page.donation.countries, "code", "name", class:"select", placeholder:"Country" %}
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
{% text_field "billing_address.address1", class:"text form-control", placeholder:"Address 1" %}
{% text_field "billing_address.address2", class:"text form-control", placeholder:"Address 2" %}
{% text_field "billing_address.address3", class:"text form-control not-us-or-canada hide", placeholder:"Address 3" %}
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
{% text_field "billing_address.city", class:"text form-control", placeholder:"City" %}
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 us-or-canada us-only hide">
<div class="form-group">
{% collection_select "billing_address.state", page.donation.us_states, "code", "name", class:"select form-control", placeholder:"State" %}
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 us-or-canada canada-only hide">
<div class="form-group">
{% text_field "billing_address.state", class:"text form-control", placeholder:"State" %}
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group center">
{% text_field "billing_address.zip", class:"text form-control", placeholder:"Postal code" %}
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
{% email_field "email", class:"text form-control", placeholder:"Email" %}
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
{% phone_field "billing_address.phone_number", class:"text form-control", placeholder:"Phone" %}
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="checkbox">
<label class="checkbox" for="donation_email_opt_in">{% check_box "email_opt_in" %} Send email updates</label>
</div>
</div>
</div>
{% if page.donation.merchant_account.is_employer_and_occupation_required? %}
<div class="row">
<div class="col-md-6">
<div class="form-group">
{% text_field "employer", class:"text form-control", placeholder:"Employer" %}
</div>
</div>
<div class="col-md-6">
<div class="form-group">
{% text_field "occupation", class:"text form-control", placeholder:"Occupation" %}
</div>
</div>
</div>
{% if page.donation.merchant_account.is_employer_address_required? %}
<div class="row">
<div class="col-md-12">
<div class="form-group">
{% collection_select "work_address.country_code", page.donation.countries, "code", "name", class:"select", placeholder:"Employer country" %}
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
{% text_field "work_address.address1", class:"text form-control", placeholder:"Employer address 1" %} {% text_field "work_address.address2", class:"text form-control", placeholder:"Employer address 2" %} {% text_field "work_address.address3", class:"text form-control work-not-us-or-canada hide", placeholder:"Employer address 3" %}
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
{% text_field "work_address.city", class:"text form-control", placeholder:"City" %}
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 work-us-or-canada">
<div class="form-group">
{% text_field "work_address.state", class:"text form-control", placeholder:"State" %}
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
{% text_field "work_address.zip", class:"text form-control", placeholder:"Postal code" %}
</div>
</div>
</div>
{% elsif page.donation.merchant_account.is_employer_city_required? %}
<div class="row">
<div class="col-md-12">
{% collection_select "work_address.country_code", page.donation.countries, "code", "name", class:"select", placeholder:"Employer country" %}
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
{% text_field "work_address.city", class:"text form-control", placeholder:"City" %}
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 work-us-or-canada hide">
<div class="form-group">
{% text_field "work_address.state", class:"text form-control", placeholder:"State" %}
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
{% text_field "work_address.zip", class:"text form-control", placeholder:"Postal code" %}
</div>
</div>
</div>
{% endif %}
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="padtopless padbottomless">Law requires we ask for your employer and occupation. If you don't have an employer or are retired, put N/A, and if you are self-employed put "self-employed" in employer and describe your occupation.</div>
</div>
</div>
</div>
{% endif %}
{% if page.donation.merchant_account.is_corporate_contribution_required? %}
<div class="row">
<div class="col-md-12 input-checkbox">
<div class="checkbox">
<label for="donation_is_corporate_contribution">{% check_box "is_corporate_contribution", class:"checkbox" %} This is a contribution from a business.</label>
</div>
</div>
</div>
{% endif %}
{% comment %}
{% for cf in custom_fields.donation %}
{% assign custom_field = cf[1] %}
{% assign custom_field_id = 'custom_values.' | append: custom_field.slug %}
<div class="row">
<div class="col-md-12">
{% if custom_field.is_text? or custom_field.is_number? %}
<div class="form-group">
{% text_field custom_field_id, class:"text form-control", placeholder:custom_field.name %}
</div>
{% elsif custom_field.is_boolean? %}
<div class="checkbox">
<label for="donation_custom_values_{{ custom_field.slug }}_custom">{% check_box custom_field_id, class:"checkbox" %} {{ custom_field.name }}</label>
</div>
{% elsif custom_field.is_multiple_choice? %}
<label for="donation_custom_values_{{ custom_field.slug }}_custom">{{ custom_field.name }}</label>
{% collection_select custom_field_id, custom_fields.donation[custom_field.slug].multiple_choice_options, class:"select form-control" %}
{% endif %}
</div>
</div>
{% endfor %}
{% endcomment %}
<div class="padtop center">
<span class="progress-stage-button-next btn-gray btn">Continue</span>
<a class="progress-stage-button-prev" href="#">Back</a>
</div>
</div>
<!-- .Progress-stage-2 -->
<!-- Progress-stage-3 -->
<div class="progress-stage stage-3 padtopmore" data-stageID="3">
{% if page.donation.has_merchant_account? and page.donation.merchant_account.is_paypal_express? == false %}
<div class="row">
<div class="col-md-8">
<div class="form-group">
{% text_field "card_number", class:"text form-control", placeholder:"Credit card number" %}
</div>
</div>
<div class="col-md-4">{{ page.donation.merchant_account.accepted_card_icons }}</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="donation_card_expires_on">Expires</label>
{{ page.donation.form_card_expires_on }}
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="form-group">
{% text_field "card_verification", class:"text form-control", placeholder:"Security code" %}
</div>
</div>
</div>
{% endif %}
<div class="row">
<div class="col-md-12">
{% if page.donation.merchant_account.has_contribution_rules? %}
<label for="is_confirmation_text"><strong>Contribution rules</strong></label>
{{ page.donation.merchant_account.contribution_rules }}
<div class="checkbox">
<label for="donation_is_confirmed" class="padtop">{% check_box "is_confirmed", class:"checkbox" %} I confirm that the above statements are true and accurate.</label>
</div>
{% endif %}
{% if page.donation.merchant_account.is_de? %}
<div class="checkbox">
<label for="donation_is_de_confirmed">{% check_box "is_de_confirmed", class:"checkbox" %} I agree to the Democracy Engine
<a href="http://www.democracyengine.com/subscriber_tos" target="_new">Terms of Service</a> and
<a href="http://www.democracyengine.com/subscriber_privacy_policy" target="_new">Privacy Policy</a>. You will not receive any emails from them, they just deliver your donation to us.
</label>
</div>
{% endif %}
{% if site.ask_to_publish_to_stream? %}
<div class="checkbox">
<label for="donation_is_private">{% check_box "is_private", class:"checkbox" %} Don't publish my donation on the website.</label>
</div>
{% endif %}
{% if page.donation.has_merchant_account? and page.donation.merchant_account.is_paypal_express? %}
<div class="padtop">
<div class="padtop center">{% submit_tag "Continue to Paypal", class:"success-btn btn-gray btn" %}</div>
<div class="padtopmore">{{ page.donation.merchant_account.accepted_card_icons }}</div>
<a class="progress-stage-button-prev" href="#">Back</a>
</div>
{% else %}
<div class="row tax-info">
{% if page.donation.merchant_account.is_taxable? %}
<div class="col-md-12">Contributions are <i>not</i> tax deductible.</div>
{% else %}
<div class="col-md-12">Contributions are tax deductible.</div>
{% endif %}
</div>
<div class="padtop">
{% submit_tag "Process Donation", class:"btn-gray btn btn-primary" %}
<a class="center progress-stage-button-prev" href="#">Back</a>
</div>
{% endif %}
</div>
</div>
</div><!-- .Progress-stage-3 -->
</div><!-- .Progress-stages -->
</div><!-- .form -->
</div><!-- .form-wrap -->
{% endform_for %}
</div><!-- .donation-form -->
</div><!-- END .bkg-form -->
</div><!-- END .col-md-5 -->
</div><!-- END .row -->
</div><!-- END .donation -->
Raw
staged-donations.js
var StagedDonations = StagedDonations || {};
$(document).ready(function(){
(function(){
this.updateContainerHeight = function(height) {
$('.progress-stages').animate({'min-height':height},300);
}
this.updateProgressIndicator = function(indicator, direction) {
var current = indicator.find('.active');
var next = current.next();
var previous = current.prev();
if (direction && current.next().length) { // direction = 0 if going backwards, 1 if going forwards
current.addClass('completed').find('.stage-count-inner').addClass('icon-tick');
current.removeClass('active');
next.addClass('active');
next.addClass('seen');
} else if (!direction && current.prev().length) {
current.removeClass('active');
previous.addClass('active');
} else {
// do nothing
}
}
this.updateProgressStages = function(stages, direction) {
var ns = this;
var current = stages.find('.active');
var next = current.next();
var previous = current.prev();
if (direction && current.next().length) { // direction = 0 if going backwards, 1 if going forwards
current.hide('slide',{direction:'left',easing:'easeInBack'},300,function(){
$(this).removeClass('active');
current.next().show('slide',{direction:'left'},300,function(){$(this).addClass('active');});
});
} else if (!direction && current.prev().length) {
current.hide('slide',{direction:'left',easing:'easeInBack'},function(){$(this).removeClass('active');
current.prev().show('slide',{direction:'left'},300,function(){$(this).addClass('active');});
});
} else {
// do nothing
}
}
this.triggerAlert = function(alertMessage, element) {
element.closest(".form-group").addClass('has-error');
element.before("<label class='control-label custom-error text-left' style='text-align: left;'>" + alertMessage + "</label>");
// var message = '<div class="form-error">'+alertMessage+'</div>';
//insertBefore.before(message);
};
this.removeAlerts = function() {
$('.has-error').each(function(){
$(this).removeClass('has-error');
$(this).find('label.custom-error').remove();
});
$('#auto_address .form-group').removeClass('has-error');
$('#address-error-msg').hide();
};
this.validateEmail = function(email) {
var re = /\S+@\S+\.\S+/;
return re.test(email);
}
this.validateDonations = function(currentStage) {
var donationAmount = $('#donation_amount_other').val() == "" ? 0 : parseFloat($('#donation_amount_other').val());
switch (currentStage) {
case "1":
if ((donationAmount < 0.5) && ($('.progress-stage input[type="radio"]:checked').length == 0)) {
this.triggerAlert("Invalid donation amount",$('#donation_amount_other'));
return false;
} else {
return true;
}
break;
case "2":
var answer = true;
var validatedEmail = this.validateEmail($('#donation_email').val());
if (!$('#donation_billing_address_address1').val()) {
this.triggerAlert("Address1 can't be blank",$('#donation_billing_address_address1'));
answer = false;
}
if (!$('#donation_billing_address_city').val()) {
this.triggerAlert("City can't be blank",$('#donation_billing_address_city'));
answer = false;
}
if (!$('#donation_billing_address_phone_number').val()) {
this.triggerAlert("Phone number can't be blank",$('#donation_billing_address_phone_number'));
answer = false;
}
if (!$('#donation_first_name').val()) {
this.triggerAlert("You must supply your first name.",$('#donation_first_name'));
answer = false;
}
if (!$('#donation_last_name').val()) {
this.triggerAlert("You must supply your last name.",$('#donation_last_name'));
answer = false;
}
if (!validatedEmail) {
this.triggerAlert("Email address not valid",$('#donation_email'));
answer = false;
}
return answer;
break;
default:
return true;
}
}
}).apply(StagedDonations);
if ($('.progress-indicator-stages').length) {
var progressIndicator = $('.progress-indicator-stages');
var progressStages = $('.progress-stages');
// Stage indicator click functions
$('.progress-indicator-stages .stage-count').each(function(){$(this).click(function(event){
event.preventDefault();
if (!$(this).parent().hasClass('active')) {
if ($(this).parent().hasClass('completed') || $(this).parent().hasClass('seen')) {
var clickedIndicatorStageClass = $.grep($(this).parent().attr("class").split(" "), function(v, i){
return v.indexOf('stage-') === 0;
}).join();
var currentActiveIndicator = progressIndicator.find('.active');
var desiredProgressStage = progressStages.children('.'+clickedIndicatorStageClass);
var currentActiveStage = progressStages.find('.active');
currentActiveIndicator.removeClass('active');
$(this).parent().addClass('active');
currentActiveStage.hide('slide',{direction:'left',easing:'easeInBack'},300,function(){
$(this).removeClass('active');
desiredProgressStage.show('slide',{direction:'left'},300,function(){$(this).addClass('active');});
});
}
}
});});
// Prev and next stage actions on form
$('.progress-stage-button-next').each(function(){$(this).click(function(event){
event.preventDefault();
StagedDonations.removeAlerts();
var currentStage = $('.progress-stage.active').attr('data-stageid');
var isValid = StagedDonations.validateDonations(currentStage);
if (isValid) {
StagedDonations.updateProgressIndicator(progressIndicator, 1);
StagedDonations.updateProgressStages(progressStages, 1);
} else {
progressIndicator.find('.active').removeClass('completed').find('.stage-count-inner').removeClass('icon-tick');
progressIndicator.find('.active').next().removeClass('seen');
}
});});
$('.progress-stages .radio').each(function(){$(this).click(function(event){
StagedDonations.updateProgressIndicator(progressIndicator, 1);
StagedDonations.updateProgressStages(progressStages, 1);
});});
$('.progress-stage-button-prev').each(function(){$(this).click(function(event){
event.preventDefault();
StagedDonations.removeAlerts();
StagedDonations.updateProgressIndicator(progressIndicator, 0);
StagedDonations.updateProgressStages(progressStages, 0);
});});
progressStages.find('input[type="submit"]').click(function(event){
progressIndicator.find('.active').addClass('completed').find('.stage-count-inner').addClass('icon-tick');
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment