diff --git a/src/jade/index.jade b/src/jade/index.jade index 7be16bc..8c2c68b 100644 --- a/src/jade/index.jade +++ b/src/jade/index.jade @@ -6,19 +6,23 @@ html meta(name='description', content='Koodiklinikka on suomalainen Slack-yhteisö ohjelmistoalan harrastajille ja ammattilaisille.') meta(name='keywords', content='ohjelmointi,frontend,open source,devaus,suomi,javascript,clojure,go,java,node.js,io.js,angular.js,web') meta(charset='utf-8') + script(src='//use.typekit.net/scb5xny.js') + script. + try{Typekit.load();}catch(e){}; body .container - .jumbo - .form-container - p. - Etsitkö tiimikavereita projektiisi? Kiinnostaako koodaaminen, mutta et tiedä mistä lähtisi liikkeelle? - Onko koodissasi bugi joka ei pitkän googlettamisen jälkeen ole vieläkään ratkennut?
-
- Koodiklinikka on Slack-yhteisö kaikille ohjelmoinnista ja ohjelmistoalasta kiinnostuneille harrastajille ja ammattilaisille. + .jumbo-container + .jumbo + .form-container + p. + Etsitkö tiimikavereita projektiisi? Kiinnostaako koodaaminen, mutta et tiedä mistä lähtisi liikkeelle? + Onko koodissasi bugi joka ei pitkän googlettamisen jälkeen ole vieläkään ratkennut?
+
+ Koodiklinikka on Slack-yhteisö kaikille ohjelmoinnista ja ohjelmistoalasta kiinnostuneille harrastajille ja ammattilaisille. - #invite-form - h3 Liity mukaan + #invite-form + h3 Liity mukaan .footer @@ -32,6 +36,3 @@ html img(style='position: absolute; top: 0; right: 0; border: 0;', src='https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67', alt='Fork me on GitHub', data-canonical-src='https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png') script(src='js/bundle.js') - script(src='//use.typekit.net/scb5xny.js') - script. - try{Typekit.load();}catch(e){}; diff --git a/src/js/components/inviteForm.js b/src/js/components/inviteForm.js index e281a20..6ee526a 100644 --- a/src/js/components/inviteForm.js +++ b/src/js/components/inviteForm.js @@ -16,6 +16,26 @@ function render(props, state) { 'has-error': state.error }); + var feedbackMessage; + + if(state.error || state.submitted) { + let messageText; + + if(state.submitted) { + messageText = 'Kutsu lähetetty antamaasi sähköpostiosoitteeseen.'; + } else if(state.error.status === 400) { + messageText = 'Tarkasta syöttämäsi sähköpostiosoite'; + } else { + messageText = 'Jotain meni pieleen. Yritä hetken päästä uudelleen.'; + } + + feedbackMessage = ( +
+ {messageText} +
+ ); + + } return (
⏎ + {feedbackMessage}
) } diff --git a/src/js/main.js b/src/js/main.js index b243195..9399e32 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -11,7 +11,7 @@ var {diff, patch, create} = require('virtual-dom'); var state = { email: '', submitted: false, - error: false + error: null }; function setState(newState) { @@ -25,21 +25,25 @@ var props = { setState({ submitted: false, - error: false + error: null }); request.post('/api/invites', { email: state.email.email }).then(function() { setState({submitted: true}); - }).catch(function() { - setState({error: true}); + }).catch(function(err) { + setState({error: err}); }); }, onChange: function(e) { + if(e.target.value === state.email) { + return; + } + setState({ email: e.target.value, - error: false, + error: null, submitted: false }); }, diff --git a/src/styles/style.styl b/src/styles/style.styl index 3f936c5..8d869b4 100644 --- a/src/styles/style.styl +++ b/src/styles/style.styl @@ -1,3 +1,5 @@ +linkColor = #3090de +textColor = #444 body, html margin 0 @@ -5,23 +7,39 @@ body, html height 100% width 100% font-weight 400 - color #444 + color textColor font-smoothing antialiased h1, h2, h3 margin 0 margin-bottom 0.5em + text-shadow 1px 1px 0 rgba(255, 255, 255, 0.2) .container width 100% height 100% box-sizing border-box -.jumbo +@keyframes blur + 0% + filter blur(0px) + 100% + filter blur(3px) + +.jumbo-container width 100% height 100% + position relative +.jumbo + position absolute + top -10px + bottom -10px + left -10px + right -10px background url('../images/jumbo.jpg') background-size cover + animation blur 10s + filter blur(3px) .input width 100% @@ -54,7 +72,7 @@ h1, h2, h3 .input.has-error border-color rgba(226, 33, 112, 0.6) - color rgba(226, 33, 112, 0.6) + color rgb(226, 33, 112) .btn border-radius 3px @@ -75,17 +93,44 @@ h1, h2, h3 .btn width 40px height 32px - background #3090de + background linkColor padding 0 position absolute right 8px - top 50% - margin-top -15px + top 7px + border-bottom 2px solid #117280 color rgba(255, 255, 255, 0.5) &:active border-bottom 0 +@keyframes drop + 0% + transform rotateX(90deg) + 30% + transform rotateX(45deg) + 45% + transform rotateX(0deg) + 60% + transform rotateX(45deg) + 100% + transform rotateX(0deg) + +.invite-form--message + background linkColor + color #fff + height 40px + line-height 40px + padding 0 0.5em + margin-top 4px + transform rotateX(0deg) + transform-origin 100% 0 + animation drop 0.6s linear + +.invite-form.has-error + .invite-form--message + background rgb(226, 33, 112) + .form-container width 100% padding 0 2em @@ -100,7 +145,7 @@ h1, h2, h3 margin-bottom 2em line-height 1.7em a - color #2080CF + color linkColor text-decoration none &:hover text-decoration underline @@ -111,6 +156,9 @@ a position absolute bottom 0 i - margin 0 7px + margin 0 5px font-size 1.5em - color #3090de + color textColor + &:hover + color #fff +