diff --git a/src/js/components/feed.jsx b/src/js/components/feed.jsx index 729d937..aad98bc 100644 --- a/src/js/components/feed.jsx +++ b/src/js/components/feed.jsx @@ -30,14 +30,14 @@ module.exports = React.createClass({ } this.setState({ - messages: _(messages).sortBy('timestamp').reverse().value() + messages: _(messages).sortBy('timestamp').reverse().value().slice(0, 40) }); }).catch(throwError); }, render() { var messages = this.state.messages.map((message) => { - var image = ; + var image = ; if(message.imageLink) { image = {image}; @@ -45,8 +45,11 @@ module.exports = React.createClass({ return (
- {image} +
{image}
+
+ {message.user} +
diff --git a/src/styles/style.styl b/src/styles/style.styl index c46d047..d3ea544 100644 --- a/src/styles/style.styl +++ b/src/styles/style.styl @@ -215,23 +215,29 @@ footer padding-right 0 .message - padding 0.5em + padding 1em padding-right 2em - border-top 1px solid #E5E5E5 position relative - overflow auto + display flex + +.message__content + flex 1 .message__body font-weight 400 font-size 14px + line-height 1.4em .message__image - width 2.5em - float left - margin-right 0.5em - margin-top 0.2em - vertical-align top + width 50px + margin-right 1em + margin-top 0.5em + text-align center + a + outline 0 + img + width 50px .message__icon margin 6px @@ -248,7 +254,8 @@ footer .message__details font-size 0.7em - margin-top 0.3em + margin-top 0.5em + .message__meta margin-left 0.5em