diff --git a/package.json b/package.json index 71f4293..0b9081a 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,8 @@ "dependencies": { "axios": "^0.4.2", "lodash": "^2.4.1", - "react": "^0.12.2" + "react": "^0.12.2", + "timeago": "^0.2.0" }, "devDependencies": { "6to5ify": "^3.1.2", @@ -29,6 +30,7 @@ "debowerify": "~0.9.1", "ecstatic": "~0.5.3", "event-stream": "^3.2.1", + "faker": "^2.1.2", "gulp": "~3.8.1", "gulp-autoprefixer": "1.0.1", "gulp-concat": "^2.4.3", diff --git a/src/jade/index.jade b/src/jade/index.jade index a905457..15c1c1c 100644 --- a/src/jade/index.jade +++ b/src/jade/index.jade @@ -37,6 +37,7 @@ html #logo .jumbo__container h1 Slack-yhteisö kaikille ohjelmoinnista ja ohjelmistoalasta kiinnostuneille harrastajille ja ammattilaisille. + .content section .row @@ -48,20 +49,28 @@ html .column.column1-2 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?
+ Onko koodissasi bugi, joka ei pitkän googlettamisen jälkeen ole vieläkään ratkennut? Koodiklinikka on kaikille avoin softakehitykseen keskittynyt yhteisö.

Tarkoituksenamme on yhdistää ja kasvattaa suomalaista ohjelmointiyhteisöä, sekä tarjota apua ja uusia kontakteja ohjelmoinnista innostuneille nuorille. .column.column1-2 #members - footer - a(href='https://koodiklinikka.slack.com') - i.fa.fa-slack - a(href='https://github.com/koodiklinikka/koodiklinikka.fi') - i.fa.fa-github - a(href='https://twitter.com/koodiklinikka') - i.fa.fa-twitter + + #feed + + + + footer + a(href='https://koodiklinikka.slack.com') + i.fa.fa-slack + + a(href='https://github.com/koodiklinikka/koodiklinikka.fi') + i.fa.fa-github + a(href='https://twitter.com/koodiklinikka') + i.fa.fa-twitter #fader + + script(src='js/bundle.js') diff --git a/src/js/components/feed.jsx b/src/js/components/feed.jsx new file mode 100644 index 0000000..3b6726b --- /dev/null +++ b/src/js/components/feed.jsx @@ -0,0 +1,48 @@ +'use strict'; + +var React = require('react'); +var faker = require('faker'); +var _ = require('lodash'); + +module.exports = React.createClass({ + getInitialState() { + return { + messages: _.range(10).map(() => { + return { + image: faker.image.avatar(), + body: faker.hacker.phrase(), + timestamp: faker.date.recent(), + type: _.sample(['twitter', 'slack', 'github']), + meta: `Retweeted by @${faker.internet.userName()}` + } + }) + }; + }, + componentDidMount() { + }, + render() { + var messages = this.state.messages.map((message) => { + return ( +
+ +
+
{message.body}
+
+ +
+
+ + {require('timeago')(message.timestamp)} + + {message.meta} +
+
+
+ ) + }); + + return ( +
{messages}
+ ) + } +}); diff --git a/src/js/main.js b/src/js/main.js index 3e112b0..19304a2 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -15,3 +15,8 @@ React.render( React.render( require('./components/members')(), document.getElementById('members')); + + +React.render( + require('./components/feed')(), + document.getElementById('feed')); diff --git a/src/styles/style.styl b/src/styles/style.styl index 6c51169..2780118 100644 --- a/src/styles/style.styl +++ b/src/styles/style.styl @@ -1,7 +1,9 @@ -@require '_input' -@require '_button' linkColor = #3090de textColor = #444 +feedWidth = 500px + +@require '_input' +@require '_button' body, html margin 0 @@ -11,6 +13,7 @@ body, html font-weight 400 color textColor font-smoothing antialiased + box-sizing border-box h1, h2, h3 margin 0 @@ -19,6 +22,8 @@ h1, h2, h3 p margin-top 1em line-height 1.5em + font-size 16px + font-weight 300 a color linkColor text-decoration none @@ -28,6 +33,7 @@ a .jumbo width 100% height 100% + position relative padding-bottom 200px background url('../images/jumbo.jpg') background-size cover @@ -62,6 +68,9 @@ section .content margin-top -200px + z-index 2 + position relative + padding-right feedWidth section:first-child box-shadow -1px -1px 1px rgba(0, 0, 0, 0.05) @@ -133,6 +142,7 @@ section:first-child .members margin-top 1em + .member width 57px vertical-align middle @@ -148,6 +158,59 @@ footer margin 0 0.30em font-size 1.5em color #fff +.feed + width feedWidth + height 100% + overflow auto + position absolute + top 0 + right 0 + z-index 5 + background #fff + border-left 1px solid #E5E5E5 + &::-webkit-scrollbar + display none + +.message + padding 1em + padding-right 2em + padding-bottom 0.5em + padding-top 0.6em + + border-top 1px solid #E5E5E5 + position relative + overflow auto + +.message__body + font-weight 300 + font-size 16px + +.message__image + margin-top 4px + margin-right 10px + float left + width 50px + +.message__icon + margin 6px + font-size 20px + position absolute + top 0 + right 0 + .fa-twitter + color #55ACEE + .fa-github + color #333333 + .fa-slack + color #DC005D + +.message__details + font-size 0.8em + margin-top 5px + + +.message__meta + margin-left 0.5em .fader position fixed @@ -155,5 +218,6 @@ footer left 0 width 100% height 50px - background linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 99%,rgba(0,0,0,0.2) 100%) + background linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.15) 99%,rgba(0,0,0,0.15) 100%) pointer-events none + z-index 2