From 073b2365e08fedc7f7349142ea250214c1276363 Mon Sep 17 00:00:00 2001 From: Riku Rouvila Date: Sat, 8 Jul 2017 19:25:16 +0100 Subject: [PATCH] add success icon and new loader animation --- src/assets/images/ajax-loader.gif | Bin 4635 -> 0 bytes src/js/components/inviteForm.js | 10 ++--- src/js/components/loader.js | 12 ++++++ src/js/components/membershipForm.js | 8 ++++ src/js/components/membershipInfoForm.js | 12 +++++- src/styles/_loader.styl | 55 ++++++++++++++++++++++++ src/styles/style.styl | 41 ++++++++---------- src/yhdistys.jade | 1 - 8 files changed, 107 insertions(+), 32 deletions(-) delete mode 100644 src/assets/images/ajax-loader.gif create mode 100644 src/js/components/loader.js create mode 100644 src/styles/_loader.styl diff --git a/src/assets/images/ajax-loader.gif b/src/assets/images/ajax-loader.gif deleted file mode 100644 index c35c95176f48fb3e85362bd1083a4dfdbd73585f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4635 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 SHP2MW&!79ua(37ZtodI;EBJK) diff --git a/src/js/components/inviteForm.js b/src/js/components/inviteForm.js index 768b235..07317ea 100644 --- a/src/js/components/inviteForm.js +++ b/src/js/components/inviteForm.js @@ -5,7 +5,7 @@ var React = require('react'); var classSet = require('classnames'); var api = require('../api'); - +var Loader = require('./loader'); module.exports = React.createClass({ getInitialState() { return { @@ -99,11 +99,11 @@ module.exports = React.createClass({ disabled={this.state.error || this.state.submitted}> ⏎ - - +
+ +
{feedbackMessage} - ) + ); } }); diff --git a/src/js/components/loader.js b/src/js/components/loader.js new file mode 100644 index 0000000..80f58c2 --- /dev/null +++ b/src/js/components/loader.js @@ -0,0 +1,12 @@ +const React = require('react'); + +module.exports = function Loader() { + return ( +
+
+
+
+
+
+ ); +}; diff --git a/src/js/components/membershipForm.js b/src/js/components/membershipForm.js index 253bfb8..ceb30be 100644 --- a/src/js/components/membershipForm.js +++ b/src/js/components/membershipForm.js @@ -18,6 +18,14 @@ module.exports = React.createClass({ } return (
+ + + +

Maksu ja rekisteröityminen onnistui.

Tervetuloa Koodiklinikka ry:n jäseneksi!

diff --git a/src/js/components/membershipInfoForm.js b/src/js/components/membershipInfoForm.js index 67fe7db..f9774a4 100644 --- a/src/js/components/membershipInfoForm.js +++ b/src/js/components/membershipInfoForm.js @@ -4,9 +4,10 @@ var _ = require('lodash'); var request = require('axios'); var React = require('react'); var classSet = require('classnames'); +var StripeCheckout = require('react-stripe-checkout').default; var api = require('../api'); -var StripeCheckout = require('react-stripe-checkout').default; +var Loader = require('./loader'); var config = require('../../config.js')(); var fieldNameTranslations = { @@ -152,9 +153,16 @@ module.exports = React.createClass({ ); }); - + if (this.state.sending) { + return ( +
+ +
+ ); + } return (
+

Liity jäseneksi

{inputFields} {this.state.error && ( diff --git a/src/styles/_loader.styl b/src/styles/_loader.styl new file mode 100644 index 0000000..71eb8f5 --- /dev/null +++ b/src/styles/_loader.styl @@ -0,0 +1,55 @@ +.sk-folding-cube + margin auto + width 100% + height 100% + position relative + transform rotateZ(45deg) + +.sk-folding-cube .sk-cube + float left + width 50% + height 50% + position relative + transform scale(1.1) + +.sk-folding-cube .sk-cube:before + content '' + position absolute + top 0 + left 0 + width 100% + height 100% + background-color linkColor + animation sk-foldCubeAngle 2.4s infinite linear both + transform-origin 100% 100% + +.sk-folding-cube .sk-cube2 + transform scale(1.1) rotateZ(90deg) + +.sk-folding-cube .sk-cube3 + transform scale(1.1) rotateZ(180deg) + +.sk-folding-cube .sk-cube4 + transform scale(1.1) rotateZ(270deg) + +.sk-folding-cube .sk-cube2:before + animation-delay 0.3s + +.sk-folding-cube .sk-cube3:before + animation-delay 0.6s + +.sk-folding-cube .sk-cube4:before + animation-delay 0.9s + +@keyframes sk-foldCubeAngle + 0%, 10% + transform perspective(140px) rotateX(-180deg) + opacity 0 + 25%, 75% + transform perspective(140px) rotateX(0deg) + opacity 1 + 90%, 100% + transform perspective(140px) rotateY(180deg) + opacity 0 + + diff --git a/src/styles/style.styl b/src/styles/style.styl index d3a67f0..215a882 100644 --- a/src/styles/style.styl +++ b/src/styles/style.styl @@ -6,6 +6,7 @@ footerHeight = 50px @require '_input' @require '_button' @require '_header' +@require '_loader' body, html margin 0 @@ -112,28 +113,16 @@ section:first-child &:first-child margin-top 0 -.loader - background transparent url('../images/ajax-loader.gif') no-repeat center center - width 28px - height 28px - .form .btn background linkColor border-bottom 2px solid #117280 color rgba(255, 255, 255, 0.9) - .loader - display none &.sending .btn display none - .loader + .invite-form__loader display block - margin-left auto - margin-right auto - width 28px - height 28px - .invite-form position relative .btn @@ -146,15 +135,13 @@ section:first-child color rgba(255, 255, 255, 0.5) &:active border-bottom 0 - .loader + .invite-form__loader + display none + width 20px + height 20px position absolute - right 9px - top 9px - &.sending - .loader - display block - width 28px - height 28px + right 14px + top 14px .membership-form .input @@ -162,6 +149,11 @@ section:first-child .btn margin-top 12px +.membership-form__loader + width 70px + height 70px + margin auto + .stripe-form margin 20px 0px .name @@ -353,11 +345,12 @@ footer .bread-img background url('../images/hp3_bw.jpg') - background-size 120% - background-position-y 80% - border-radius 0px + background-size cover + border-radius 160px opacity 0.85 + width 320px height 320px + margin auto @media screen and (max-width: 700px) .bread-img diff --git a/src/yhdistys.jade b/src/yhdistys.jade index bc097a9..f7e441a 100644 --- a/src/yhdistys.jade +++ b/src/yhdistys.jade @@ -32,7 +32,6 @@ block content .row .bread .column.column1-2 - h3 Liity jäseneksi #membership-form.form .column.column1-2